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

[sparrowwht7]

前言

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 让更多人体验使用，欢迎关注交流，任何合理理性的想法都可以讨论探索并付诸实践，创作不易，感谢支持！

利用工具生成出来的代码，文章中贴的有误，https://github.com/sparrow-js/sparrow/blob/master/packages/sparrow-server/src/app/view/template/genertate.vue

[simple233]

加油！

[THP301]

这个工具看起来可以大幅提高开发效率，把工具的意义发挥出来了，不错

[sparrowwht7]

@THP301 这个项目的实现通过 AST 直接输出的代码可以复刻到大部分界面端技术上，还需要多花精力打磨

[revalue]

大厂有很多 low code 的项目，可能是还没有开源的。还有专门的团队搞这些

[sparrowwht7]

@revalue 了解的，去年刚重大厂出来，确实有不少 low code 、no code 的项目，国外更超前些，这种东西目前还处在竞争阶段

[dinjufen]

感觉自己要下岗了🐶

[young]

赞一个

[sparrowwht7]

@dinjufen 不能够，只能解决部分场景，定制化的复杂的目前还要大师们来开发😄

[zvil]

赞一个 抽空看看源码

[bojue]

@sparrowwht7 感觉 nocode 和行业需求也强相关，目前大部分做的都是后台管理系统，运营平台，H5 页面搭建，我比较看好但是没有解决好的的是：自动驾驶 /智慧城市 /细分行业

[sparrowwht7]

@bojue 完全赞同，领域内的 nocode 才有更大实际价值，这个需要相对领域的专业人士搞数字化部分

[sparrowwht7]

@zvil 多多交流😄

[xiangyuecn]

@sparrowwht7 #5 历史轮回，感觉又回到了 20 年前，Macromedia Dreamweaver （!Adobe ）所见即所得😶

[zqx]

感觉是表单设计器+vue 代码生成器，想知道生成 vue 代码用的什么库？涉及事件绑定，生命周期钩子的时候，用模板字符串插值？不会是自己做个类似词法分析器的东西吧

[sparrowwht7]

@xiangyuecn 是啊，这种产物主要还是市场需求的轮回，B 端业务抬头了需求量旺盛，就出现很多这类产物

[firefox12]

@xiangyuecn dw 有什么缺点吗？ 感觉好用没缺点。 慢慢的就看不到人用了。


不是太懂前端，怎么和我司 前端用的东西差不多，好像也是一个 wyswyg 的编辑器，貌似没开源，但是前端说基本上每个公司都有一个类似的。

[ssshooter]

持续关注

[sparrowwht7]

@zqx 不只是表单设计器哦，预览和生成的代码都是源代码，也提供了插件能力，理论上表单、表格、图表等等都可以。代码生成用的 cheerio （ template ） + babel （ script ）

[jimoya]

牛逼，赞赞赞

[sparrowwht7]

@jimoya
@ssshooter

感谢支持，后续还有更精彩的😄

[markmx]

好像很帅的样子 牛气

[popn74]

阿里好像也有开源也有个区块什么的
基于 react 的 umi 也有好像，不过用的人很少

[sparrowwht7]

@popn74 区块最早出处我知道的是在原子设计理论里，三四年前也开发过一个工程化相关的和 umi 差不多（没有 umi 方案成体系），我这个更侧重业务需求开发，能不能被更多人使用也不太好说，毕竟是探索性项目😄

[hvboekml]

有趣的项目。

ps：gif 小快长，看起来有些不便，感觉可以拆分下，或者用视频。

[tojonozomi]

low code 的趋势感觉越来越明显了
拜读源码了

[ruoxie]

我司后台管理系统要按设计稿来，精确到像素

[sparrowwht7]

@tojonozomi 代码有点儿...，写成 anyscript 了，现已实现功能为主占个坑，后面在优化代码

[sparrowwht7]

@hvboekml 可以的，下次用视频试试

[sparrowwht7]

@ruoxie 你司是高手，内部自己用的也有设计稿吗

[IssacTomatoTan]

这个能集成去别的已有的项目呢？是不是只有 element 和 vue 的项目可用？ elementui 版本是否有兼容问题啊

[sparrowwht7]

@IssacTomatoTan 直接输出代码可以集成到现有项目，目前只有 element 和 vue 的项目可用其他组件库和框架暂时没写，现有项目不能用可以搞个微前端

[lori01]

持续关注

[sparrowwht7]

@lori01 🤝

[wht100]

看着不错

[duian]

楼主有兴趣建一个微信群吗， 现在使用 QQ 的频次有一些低。

[sparrowwht7]

@duian 不瞒你说，用社交产品不多，没创建过微信群，晚上看看怎么建微信群，弄一个😄

[id4alex]

.net 说 我还是太超前了

[justin2018]

挺好的 每次写这些代码 自己也觉得挺无聊的~

[sparrowwht7]

@id4alex visual studio 太强，太超前市场跟不上😄

[sparrowwht7]

@justin2018 是的啊，有这精力多研究点儿数据结构算法、底层替代周期慢，不香吗

[yeqizhang]

jack sparrow ？

[sparrowwht7]

@yeqizhang 是的

[Tigerw]

以后不用切图了吗

[sparrowwht7]

@Tigerw 不能够，路漫漫，以后的以后的以后可能不用了

[tikazyq]

支持大佬

[daimon1]

大佬！

[est]

好东西啊。能找回当年 VB dephi 开发的感觉最好了。

[sparrowwht7]

@tikazyq
@daimon1
感谢支持😄

[sparrowwht7]

@est 没用过 VB dephi，就成天写业务闹心，就整了个这

[qfdk]

不错不错 特地回来评论

[sparrowwht7]

@qfdk 后面先把物料和体验丰富起来，能真正用起来

[cqu2008]

赞，已 star

[sparrowwht7]

@cqu2008 感谢支持

[taowen]

@est 怀念 delphi

[SuperMild]

这个系统工作量很大啊，难以置信你一个人搞出来，有魄力！

[sparrowwht7]

@SuperMild 量确实很大，精力比较旺盛，后面我还可能开源 online 的和机器学习部分的😄

[sparrowwht7]

看来需要看看 delphi 是啥了，借鉴一番

[FEDT]

跟阿里飞冰差不多吗？

[sparrowwht7]

@FEDT 也不太一样，ice 是通过原子设计理论搭建的物料体系（现在啥情况不太清楚了），我这个是把静态变成动态了，后面要能采集到数据就可以实现快速出代码

[37Y37]

真的牛逼，大佬！

[aogu555]

low code 的趋势确越来越明显了

[sparrowwht7]

@37Y37 感谢支持

[sparrowwht7]

这一波自荐开源就结束了，感谢各位的关注，我就继续撸代码去了，争取从适用进化到使用，过几个月再来宣传一轮🙏

[tuzituzi]

真的厉害啊

[sparrowwht7]

@tuzituzi 以前貌似一个公司的酒旅的，搞不好认识😄

[tuzituzi]

@sparrowwht7 有可能哦

[awolfly9]

留名，mark，估计用得上

[seanxx]

上家也有这种拖拽的,不过都是内部用的

[cweijan]

看起来不错

[yumi007]

留名，楼主加油

[yxzh]

你这个可视化与代码的转换是单向的吗？修改了生成的代码，能不能把改动带回可视化模版？

[sparrowwht7]

@awolfly9
@cweijan
@yumi007
感谢支持
@seanxx 感觉拖拽不是重点，和复制粘贴没啥区别，重点还是内容的组织上
@yxzh 不能，生成的代码是子集，暂时想不到怎么从子集转化到全集，后续有考虑增量插入、mixin 等能力，目前还没想好

[WillLIANG]

看着不错，虽然我不是搞前端的，但还是赞一个，也说不定以后会用到😄

[SuperXRay]

非常 cool

[swaggeek]

楼主能否加个 vx 交流下

[sparrowwht7]

@WillLIANG
@SuperXRay
感谢支持
@swaggeek github 上有需要的话可以加，就不再这发了

[change1689]

大佬牛皮，解决了我后端程序员快速搭建简单前端页面的苦

[zitup]

楼主觉得邮件拖拽有价值吗，拖拽几个模块，组成一个邮件格式供人使用

[sparrowwht7]

@change1689 后端更愿意使用😄
@zitup 感觉国外用邮件的多，有些付费的产品做的邮件的

[sparrowwht7]

这个项目还挺受欢迎，打算置顶在宣传两天😄

[stage0071]

感觉和阿里的飞冰（ ice ）系统很像

[silence0812]

@sparrowwht7 刚又看了遍，一如既往的没注释，不拉代码 debugger，一个也看不懂

[Lemeng]

加油＾０＾~‘

[zitup]

@sparrowwht7 是的，国外习惯用邮件，国内也用，只是不注重这些样式之类的。大公司比如阿里腾讯的对外邮件一般都会有样式，不知道国内做一款类似的收费产品，楼主以为有搞头吗？

[sparrowwht7]

@silence0812 目前只有我个人在开发维护，后续规划主要丰富物料、开发 online 版，短时间没精力你那要有精力可以帮提俩 pr，看不懂的可以问我，没有的化只能再等等了
@Lemeng 感谢支持
@zitup 这个我没深入调研过市场情况，凭感觉说是有搞头的，我了解到的信息很多做国外生意的小公司就有这方面的需求。

[zitup]

@sparrowwht7 好的，谢谢恢复

[hitaoguo]

在上家公司也写过类似的，但实在没你这个好看啊，羡慕。

[sparrowwht7]

@hitaoguo 我也是跟着感觉走，想到哪写到哪

[punk2sang]

start sparrow failed 大佬能赐教吗

[sparrowwht7]

@punk2sang
1.查看 node 版本，我的是 v12
2.检测项目安装情况:cd ~/.sparrow/sparrow-server/ 主界面服务，cd ~/.sparrow/sparrow-view 预览服务
3.搞不定，提 issues，或加 readme 上的 vx 联系我

[punk2sang]

@sparrowwht7 ok

[micolore]

有时间研究一下

[itcastcn]

支持开源，加油

[ashine]

用其他 UI 比如 vuetify 是不是不能用

[FightPig]

不错，不过 element-ui 好像都不维护了，

[sparrowwht7]

@FightPig UI 框架好适配，哪个胜出我就适配哪个😄

[zxcvsh]

swagger 好评

[geebos]

简单用了一下，个人认为交互体验还能提升。

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

最后关于性能不知道有没有做过评估，我开启 sparrow 之后电脑风扇就狂转。

[sparrowwht7]

@geebos 感谢反馈，交互体验还差点事儿，后续规划大概是先开发完线上版，再细化使用体验

[wurunpu]

。怎么本地运行啊 大佬