首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
广告
sparrowwht7
V2EX  ›  分享创造

实时输出前端代码，折腾大半年的开源项目 sparrow-js

  sparrowwht7 · 2020-10-26 07:30:44 +08:00 · 19848 次点击
这是一个创建于 1523 天前的主题，其中的信息可能已经有所发展或是发生改变。

前言

sparrow-js 第一次提交到 git 是在 2019-12，转眼将近一年时间，一直在坚持更新，唯一目标就是提升前端研发效率，几年前在市场加速数字化的背景下开始关注前端研发效率这块儿的东西，最开始在前公司内部开发了一个工程化方面的前端项目，大体做了两方面工作 1.前端工程搭建接入各种插件、公司内部服务。2.按照原子设计理论搭建物料体系。在搭建这个项目时产生了很多新灵感，去年年底决定将想法开始付诸实践所以就有了 sparrow-js 这个开源项目，这个项目更侧重于解决业务开发部分的前端效率提升，直接输出源代码。

远景

最初设想的有三大块功能：

  • 本地低代码搭建，常规开发模式还是在本地开发，所以实现了一个本地可视化搭建工具，实时输出源代码。
  • online 低代码搭建，线上化的可视化搭建更利于传播，更方便。
  • 数据采集，包括各种数据收集：如图片、sketch 设计稿类智能生成代码等，swagger 等接口管理工具数据生成接口代码。

目前本地低代码搭建已经完成一期的功能，可实现实时输出可读的 Vue 源代码，下面会做介绍。下一步大方向除了本地低代码项目的迭代外将开始实现 online 版的 sparrow-js，最后实现数据采集转化为源代码，最终达到秒级前端需求开发（部分场景下），达成前端提效目标。

介绍

sparrow-js 提供丰富的物料来帮助开发者提效，目前生成的源代码是 vue，element-ui 的代码，提供函数级别代码搭建能力，可以注入逻辑代码。界面展示如下图：

展示 1

展示 2

物料

提供多种类型的物料源，以此来满足不同场景下的需求。

  • 组件：vue element-ui 基础组件
  • 容器：存储基础组件
  • 编辑区块：可增删改可编辑的特定场景代码片段
  • 静态区块：代码片段
  • 搜索组件：官方内置拥有特定逻辑组件
  • 插件：第三方自定义组件

使用示例如下：

示例 1:

示例 2:

更多功能感兴趣可自行体验。

基础功能

  • 实时预览
  • 拖拽
  • 实时预览源代码
  • 组件: 复制
  • 组件: 删除
  • 组件: 配置
  • 撤销
  • 保存
  • 导出
  • 重置
  • 接口生成
  • 打开 vscode 展示代码
  • 文本编辑
  • 等等功能

生产代码示例

以下链接为使用 sparrow-js 生成的未经任何修改的源代码;

https://github.com/sparrow-js/sparrow/blob/master/packages/sparrow-server/src/app/view/template/index.vue

快速使用

全局安装

# 全局安装
$ npm install -g sparrow-code

# 运行
$ sparrow

项目内安装

# 项目内安装
$ npm install sparrow-code -D

# package.json 增加 sparrow
"scripts": {
  "sparrow": "sparrow start -m page"
}

# 项目内安装 GUI 组件
$ npm install @sparrow-vue/develop-ui -S

# 项目内引用 App.vue
<template>
  <div id="app">
    <router-view />
    <sparrow />
  </div>
</template>

<script>
import Sparrow from '@sparrow-vue/develop-ui'

export default {
  components: {
    Sparrow
  },
  name: 'App'
}
</script>

开源地址

git 地址：https://github.com/sparrow-js/sparrow

总结

功能正在按既定规划由想法一步步落地，使用体验、文档也在逐步优化解决，目前完全由个人业余时间开发，正在努力使 sparrow-js 让更多人体验使用，欢迎关注交流，任何合理理性的想法都可以讨论探索并付诸实践，创作不易，感谢支持！

第 1 条附言  ·  2020-10-30 16:05:13 +08:00
利用工具生成出来的代码，文章中贴的有误，https://github.com/sparrow-js/sparrow/blob/master/packages/sparrow-server/src/app/view/template/genertate.vue
  • 代码
  • sparrow
  • sparrow-js
  • 组件
    106 条回复  •  2021-06-02 15:33:27 +08:00
    1  2  
    ❮ ❯
    simple233
        1
    simple233  
       2020-10-26 07:49:21 +08:00 via Android
    加油！
    THP301
        2
    THP301  
       2020-10-26 08:31:09 +08:00
    这个工具看起来可以大幅提高开发效率，把工具的意义发挥出来了，不错
    sparrowwht7
        3
    sparrowwht7  
    OP
       2020-10-26 08:55:08 +08:00
    @THP301 这个项目的实现通过 AST 直接输出的代码可以复刻到大部分界面端技术上，还需要多花精力打磨
    revalue
        4
    revalue  
       2020-10-26 09:36:01 +08:00
    大厂有很多 low code 的项目，可能是还没有开源的。还有专门的团队搞这些
    sparrowwht7
        5
    sparrowwht7  
    OP
       2020-10-26 09:46:33 +08:00
    @revalue 了解的，去年刚重大厂出来，确实有不少 low code 、no code 的项目，国外更超前些，这种东西目前还处在竞争阶段
    dinjufen
        6
    dinjufen  
       2020-10-26 09:52:59 +08:00   ❤️ 2
    感觉自己要下岗了🐶
    young
        7
    young  
       2020-10-26 10:04:11 +08:00
    赞一个
    sparrowwht7
        8
    sparrowwht7  
    OP
       2020-10-26 11:01:50 +08:00
    @dinjufen 不能够，只能解决部分场景，定制化的复杂的目前还要大师们来开发😄
    zvil
        9
    zvil  
       2020-10-26 11:06:02 +08:00
    赞一个 抽空看看源码
    bojue
        10
    bojue  
       2020-10-26 11:07:58 +08:00
    @sparrowwht7 感觉 nocode 和行业需求也强相关，目前大部分做的都是后台管理系统，运营平台，H5 页面搭建，我比较看好但是没有解决好的的是：自动驾驶 /智慧城市 /细分行业
    sparrowwht7
        11
    sparrowwht7  
    OP
       2020-10-26 11:16:48 +08:00
    @bojue 完全赞同，领域内的 nocode 才有更大实际价值，这个需要相对领域的专业人士搞数字化部分
    sparrowwht7
        12
    sparrowwht7  
    OP
       2020-10-26 11:45:19 +08:00
    @zvil 多多交流😄
    xiangyuecn
        13
    xiangyuecn  
       2020-10-26 12:03:01 +08:00   ❤️ 4
    @sparrowwht7 #5 历史轮回，感觉又回到了 20 年前，Macromedia Dreamweaver （!Adobe ）所见即所得😶
    zqx
        14
    zqx  
       2020-10-26 12:16:21 +08:00 via Android
    感觉是表单设计器+vue 代码生成器，想知道生成 vue 代码用的什么库？涉及事件绑定，生命周期钩子的时候，用模板字符串插值？不会是自己做个类似词法分析器的东西吧
    sparrowwht7
        15
    sparrowwht7  
    OP
       2020-10-26 12:18:36 +08:00
    @xiangyuecn 是啊，这种产物主要还是市场需求的轮回，B 端业务抬头了需求量旺盛，就出现很多这类产物
    firefox12
        16
    firefox12  
       2020-10-26 12:45:13 +08:00   ❤️ 1
    @xiangyuecn dw 有什么缺点吗？ 感觉好用没缺点。 慢慢的就看不到人用了。


    不是太懂前端，怎么和我司 前端用的东西差不多，好像也是一个 wyswyg 的编辑器，貌似没开源，但是前端说基本上每个公司都有一个类似的。
    ssshooter
        17
    ssshooter  
       2020-10-26 13:25:22 +08:00
    持续关注
    sparrowwht7
        18
    sparrowwht7  
    OP
       2020-10-26 14:09:38 +08:00   ❤️ 1
    @zqx 不只是表单设计器哦，预览和生成的代码都是源代码，也提供了插件能力，理论上表单、表格、图表等等都可以。代码生成用的 cheerio （ template ） + babel （ script ）
    jimoya
        19
    jimoya  
       2020-10-26 14:16:32 +08:00
    牛逼，赞赞赞
    sparrowwht7
        20
    sparrowwht7  
    OP
       2020-10-26 15:12:51 +08:00
    @jimoya
    @ssshooter

    感谢支持，后续还有更精彩的😄
    markmx
        21
    markmx  
       2020-10-26 15:14:39 +08:00
    好像很帅的样子 牛气
    popn74
        22
    popn74  
       2020-10-26 15:32:15 +08:00
    阿里好像也有开源也有个区块什么的
    基于 react 的 umi 也有好像，不过用的人很少
    sparrowwht7
        23
    sparrowwht7  
    OP
       2020-10-26 15:45:51 +08:00
    @popn74 区块最早出处我知道的是在原子设计理论里，三四年前也开发过一个工程化相关的和 umi 差不多（没有 umi 方案成体系），我这个更侧重业务需求开发，能不能被更多人使用也不太好说，毕竟是探索性项目😄
    hvboekml
        24
    hvboekml  
       2020-10-26 17:26:44 +08:00
    有趣的项目。

    ps：gif 小快长，看起来有些不便，感觉可以拆分下，或者用视频。
    tojonozomi
        25
    tojonozomi  
       2020-10-26 17:27:12 +08:00
    low code 的趋势感觉越来越明显了
    拜读源码了
    ruoxie
        26
    ruoxie  
       2020-10-26 17:32:58 +08:00
    我司后台管理系统要按设计稿来，精确到像素
    sparrowwht7
        27
    sparrowwht7  
    OP
       2020-10-26 17:38:23 +08:00
    @tojonozomi 代码有点儿...，写成 anyscript 了，现已实现功能为主占个坑，后面在优化代码
    sparrowwht7
        28
    sparrowwht7  
    OP
       2020-10-26 18:35:51 +08:00
    @hvboekml 可以的，下次用视频试试
    sparrowwht7
        29
    sparrowwht7  
    OP
       2020-10-26 19:58:05 +08:00
    @ruoxie 你司是高手，内部自己用的也有设计稿吗
    IssacTomatoTan
        30
    IssacTomatoTan  
       2020-10-26 21:34:25 +08:00 via Android
    这个能集成去别的已有的项目呢？是不是只有 element 和 vue 的项目可用？ elementui 版本是否有兼容问题啊
    sparrowwht7
        31
    sparrowwht7  
    OP
       2020-10-26 22:20:09 +08:00
    @IssacTomatoTan 直接输出代码可以集成到现有项目，目前只有 element 和 vue 的项目可用其他组件库和框架暂时没写，现有项目不能用可以搞个微前端
    lori01
        32
    lori01  
       2020-10-27 09:58:31 +08:00
    持续关注
    sparrowwht7
        33
    sparrowwht7  
    OP
       2020-10-27 11:22:19 +08:00
    @lori01 🤝
    wht100
        34
    wht100  
       2020-10-27 12:27:17 +08:00
    看着不错
    duian
        35
    duian  
       2020-10-27 16:45:46 +08:00
    楼主有兴趣建一个微信群吗， 现在使用 QQ 的频次有一些低。
    sparrowwht7
        36
    sparrowwht7  
    OP
       2020-10-27 17:01:20 +08:00
    @duian 不瞒你说，用社交产品不多，没创建过微信群，晚上看看怎么建微信群，弄一个😄
    id4alex
        37
    id4alex  
       2020-10-28 11:09:04 +08:00
    .net 说 我还是太超前了
    justin2018
        38
    justin2018  
       2020-10-28 11:17:14 +08:00
    挺好的 每次写这些代码 自己也觉得挺无聊的~
    sparrowwht7
        39
    sparrowwht7  
    OP
       2020-10-28 11:25:42 +08:00
    @id4alex visual studio 太强，太超前市场跟不上😄
    sparrowwht7
        40
    sparrowwht7  
    OP
       2020-10-28 11:28:17 +08:00
    @justin2018 是的啊，有这精力多研究点儿数据结构算法、底层替代周期慢，不香吗
    yeqizhang
        41
    yeqizhang  
       2020-10-29 08:26:34 +08:00 via Android
    jack sparrow ？
    sparrowwht7
        42
    sparrowwht7  
    OP
       2020-10-29 09:19:12 +08:00
    @yeqizhang 是的
    Tigerw
        43
    Tigerw  
       2020-10-29 09:42:01 +08:00
    以后不用切图了吗
    sparrowwht7
        44
    sparrowwht7  
    OP
       2020-10-29 11:04:01 +08:00
    @Tigerw 不能够，路漫漫，以后的以后的以后可能不用了
    tikazyq
        45
    tikazyq  
       2020-10-29 11:35:18 +08:00
    支持大佬
    daimon1
        46
    daimon1  
       2020-10-29 15:59:11 +08:00
    大佬！
    est
        47
    est  
       2020-10-29 16:17:21 +08:00   ❤️ 2
    好东西啊。能找回当年 VB dephi 开发的感觉最好了。
    sparrowwht7
        48
    sparrowwht7  
    OP
       2020-10-29 16:43:12 +08:00
    @tikazyq
    @daimon1
    感谢支持😄
    sparrowwht7
        49
    sparrowwht7  
    OP
       2020-10-29 16:46:20 +08:00
    @est 没用过 VB dephi，就成天写业务闹心，就整了个这
    qfdk
        50
    qfdk  
       2020-10-30 03:43:31 +08:00
    不错不错 特地回来评论
    sparrowwht7
        51
    sparrowwht7  
    OP
       2020-10-30 08:25:17 +08:00
    @qfdk 后面先把物料和体验丰富起来，能真正用起来
    cqu2008
        52
    cqu2008  
       2020-10-30 09:40:07 +08:00
    赞，已 star
    sparrowwht7
        53
    sparrowwht7  
    OP
       2020-10-30 11:27:32 +08:00
    @cqu2008 感谢支持
    taowen
        54
    taowen  
       2020-10-30 11:29:02 +08:00
    @est 怀念 delphi
    SuperMild
        55
    SuperMild  
       2020-10-30 11:33:14 +08:00
    这个系统工作量很大啊，难以置信你一个人搞出来，有魄力！
    sparrowwht7
        56
    sparrowwht7  
    OP
       2020-10-30 11:51:49 +08:00
    @SuperMild 量确实很大，精力比较旺盛，后面我还可能开源 online 的和机器学习部分的😄
    sparrowwht7
        57
    sparrowwht7  
    OP
       2020-10-30 11:52:43 +08:00
    看来需要看看 delphi 是啥了，借鉴一番
    FEDT
        58
    FEDT  
       2020-10-30 11:57:45 +08:00 via iPhone
    跟阿里飞冰差不多吗？
    sparrowwht7
        59
    sparrowwht7  
    OP
       2020-10-30 12:16:18 +08:00
    @FEDT 也不太一样，ice 是通过原子设计理论搭建的物料体系（现在啥情况不太清楚了），我这个是把静态变成动态了，后面要能采集到数据就可以实现快速出代码
    37Y37
        60
    37Y37  
       2020-10-30 13:39:01 +08:00
    真的牛逼，大佬！
    aogu555
        61
    aogu555  
       2020-10-30 14:16:28 +08:00
    low code 的趋势确越来越明显了
    sparrowwht7
        62
    sparrowwht7  
    OP
       2020-10-30 14:56:03 +08:00
    @37Y37 感谢支持
    sparrowwht7
        63
    sparrowwht7  
    OP
       2020-10-30 16:54:02 +08:00
    这一波自荐开源就结束了，感谢各位的关注，我就继续撸代码去了，争取从适用进化到使用，过几个月再来宣传一轮🙏
    tuzituzi
        64
    tuzituzi  
       2020-10-30 18:32:57 +08:00
    真的厉害啊
    sparrowwht7
        65
    sparrowwht7  
    OP
       2020-10-30 18:49:17 +08:00
    @tuzituzi 以前貌似一个公司的酒旅的，搞不好认识😄
    tuzituzi
        66
    tuzituzi  
       2020-11-03 09:14:09 +08:00
    @sparrowwht7 有可能哦
    awolfly9
        67
    awolfly9  
       2020-11-04 09:14:27 +08:00
    留名，mark，估计用得上
    seanxx
        68
    seanxx  
       2020-11-04 09:52:15 +08:00
    上家也有这种拖拽的,不过都是内部用的
    cweijan
        69
    cweijan  
       2020-11-04 10:29:06 +08:00
    看起来不错
    yumi007
        70
    yumi007  
       2020-11-04 10:55:34 +08:00
    留名，楼主加油
    yxzh
        71
    yxzh  
       2020-11-04 11:39:50 +08:00   ❤️ 1
    你这个可视化与代码的转换是单向的吗？修改了生成的代码，能不能把改动带回可视化模版？
    sparrowwht7
        72
    sparrowwht7  
    OP
       2020-11-04 12:04:34 +08:00
    @awolfly9
    @cweijan
    @yumi007
    感谢支持
    @seanxx 感觉拖拽不是重点，和复制粘贴没啥区别，重点还是内容的组织上
    @yxzh 不能，生成的代码是子集，暂时想不到怎么从子集转化到全集，后续有考虑增量插入、mixin 等能力，目前还没想好
    WillLIANG
        73
    WillLIANG  
       2020-11-05 09:14:00 +08:00 via Android
    看着不错，虽然我不是搞前端的，但还是赞一个，也说不定以后会用到😄
    SuperXRay
        74
    SuperXRay  
       2020-11-05 09:21:52 +08:00
    非常 cool
    swaggeek
        75
    swaggeek  
       2020-11-05 17:05:53 +08:00
    楼主能否加个 vx 交流下
    sparrowwht7
        76
    sparrowwht7  
    OP
       2020-11-05 17:22:23 +08:00
    @WillLIANG
    @SuperXRay
    感谢支持
    @swaggeek github 上有需要的话可以加，就不再这发了
    change1689
        77
    change1689  
       2020-11-05 17:32:20 +08:00
    大佬牛皮，解决了我后端程序员快速搭建简单前端页面的苦
    zitup
        78
    zitup  
       2020-11-05 18:52:21 +08:00
    楼主觉得邮件拖拽有价值吗，拖拽几个模块，组成一个邮件格式供人使用
    sparrowwht7
        79
    sparrowwht7  
    OP
       2020-11-05 19:36:58 +08:00
    @change1689 后端更愿意使用😄
    @zitup 感觉国外用邮件的多，有些付费的产品做的邮件的
    sparrowwht7
        80
    sparrowwht7  
    OP
       2020-11-05 19:37:34 +08:00
    这个项目还挺受欢迎，打算置顶在宣传两天😄
    stage0071
        81
    stage0071  
       2020-11-06 10:08:24 +08:00
    感觉和阿里的飞冰（ ice ）系统很像
    silence0812
        82
    silence0812  
       2020-11-06 10:25:15 +08:00
    @sparrowwht7 刚又看了遍，一如既往的没注释，不拉代码 debugger，一个也看不懂
    Lemeng
        83
    Lemeng  
       2020-11-06 10:40:23 +08:00
    加油＾０＾~‘
    zitup
        84
    zitup  
       2020-11-06 10:55:59 +08:00
    @sparrowwht7 是的，国外习惯用邮件，国内也用，只是不注重这些样式之类的。大公司比如阿里腾讯的对外邮件一般都会有样式，不知道国内做一款类似的收费产品，楼主以为有搞头吗？
    sparrowwht7
        85
    sparrowwht7  
    OP
       2020-11-06 11:18:20 +08:00
    @silence0812 目前只有我个人在开发维护，后续规划主要丰富物料、开发 online 版，短时间没精力你那要有精力可以帮提俩 pr，看不懂的可以问我，没有的化只能再等等了
    @Lemeng 感谢支持
    @zitup 这个我没深入调研过市场情况，凭感觉说是有搞头的，我了解到的信息很多做国外生意的小公司就有这方面的需求。
    zitup
        86
    zitup  
       2020-11-06 14:19:14 +08:00
    @sparrowwht7 好的，谢谢恢复
    hitaoguo
        87
    hitaoguo  
       2020-11-06 22:17:34 +08:00
    在上家公司也写过类似的，但实在没你这个好看啊，羡慕。
    sparrowwht7
        88
    sparrowwht7  
    OP
       2020-11-06 22:34:10 +08:00
    @hitaoguo 我也是跟着感觉走，想到哪写到哪
    punk2sang
        89
    punk2sang  
       2020-11-07 11:07:44 +08:00
    start sparrow failed 大佬能赐教吗
    sparrowwht7
        90
    sparrowwht7  
    OP
       2020-11-07 11:49:37 +08:00
    @punk2sang
    1.查看 node 版本，我的是 v12
    2.检测项目安装情况:cd ~/.sparrow/sparrow-server/ 主界面服务，cd ~/.sparrow/sparrow-view 预览服务
    3.搞不定，提 issues，或加 readme 上的 vx 联系我
    punk2sang
        91
    punk2sang  
       2020-11-07 13:08:50 +08:00
    @sparrowwht7 ok
    micolore
        92
    micolore  
       2020-11-21 12:12:50 +08:00 via iPhone
    有时间研究一下
    itcastcn
        93
    itcastcn  
       2020-11-22 14:15:39 +08:00
    支持开源，加油
    ashine
        94
    ashine  
       2020-11-22 16:24:28 +08:00
    用其他 UI 比如 vuetify 是不是不能用
    FightPig
        95
    FightPig  
       2020-11-23 10:24:03 +08:00
    不错，不过 element-ui 好像都不维护了，
    sparrowwht7
        96
    sparrowwht7  
    OP
       2020-11-23 11:08:22 +08:00
    @FightPig UI 框架好适配，哪个胜出我就适配哪个😄
    zxcvsh
        97
    zxcvsh  
       2020-11-23 16:08:49 +08:00 via iPhone
    swagger 好评
    geebos
        98
    geebos  
       2020-11-23 18:48:11 +08:00
    简单用了一下，个人认为交互体验还能提升。

    一个小问题就是左侧的树状图和页面组件不同步（在属性页面删除的组件不会实时同步到左侧的树状图上），还有就是点击组件右侧如果能自动切换到属性就更好了。

    最后关于性能不知道有没有做过评估，我开启 sparrow 之后电脑风扇就狂转。
    sparrowwht7
        99
    sparrowwht7  
    OP
       2020-11-23 18:54:58 +08:00
    @geebos 感谢反馈，交互体验还差点事儿，后续规划大概是先开发完线上版，再细化使用体验
    wurunpu
        100
    wurunpu  
       2020-11-24 16:12:05 +08:00
    。怎么本地运行啊 大佬
    1  2  
    ❮ ❯
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2736 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 13:07 · PVG 21:07 · LAX 05:07 · JFK 08:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.