这是一个创建于 1494 天前的主题，其中的信息可能已经有所发展或是发生改变。
前言
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 生成的未经任何修改的源代码;
快速使用
全局安装
# 全局安装
$ 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
106 条回复 • 2021-06-02 15:33:27 +08:00
 |
1
simple233 2020-10-26 07:49:21 +08:00 via Android
加油！
|
 |
2
THP301 2020-10-26 08:31:09 +08:00
这个工具看起来可以大幅提高开发效率，把工具的意义发挥出来了，不错
|
 |
3
sparrowwht7 OP @THP301 这个项目的实现通过 AST 直接输出的代码可以复刻到大部分界面端技术上，还需要多花精力打磨
|
 |
4
revalue 2020-10-26 09:36:01 +08:00
大厂有很多 low code 的项目，可能是还没有开源的。还有专门的团队搞这些
|
|
5
sparrowwht7 OP @revalue 了解的，去年刚重大厂出来，确实有不少 low code 、no code 的项目，国外更超前些，这种东西目前还处在竞争阶段
|
 |
6
dinjufen 2020-10-26 09:52:59 +08:00  2
感觉自己要下岗了🐶
|
 |
7
young 2020-10-26 10:04:11 +08:00
赞一个
|
|
8
sparrowwht7 OP @dinjufen 不能够，只能解决部分场景，定制化的复杂的目前还要大师们来开发😄
|
 |
9
zvil 2020-10-26 11:06:02 +08:00
赞一个 抽空看看源码
|
 |
10
bojue 2020-10-26 11:07:58 +08:00
@sparrowwht7 感觉 nocode 和行业需求也强相关，目前大部分做的都是后台管理系统，运营平台，H5 页面搭建，我比较看好但是没有解决好的的是：自动驾驶 /智慧城市 /细分行业
|
|
11
sparrowwht7 OP @bojue 完全赞同，领域内的 nocode 才有更大实际价值，这个需要相对领域的专业人士搞数字化部分
|
|
12
sparrowwht7 OP @zvil 多多交流😄
|
 |
13
xiangyuecn 2020-10-26 12:03:01 +08:00 4
@sparrowwht7 #5 历史轮回，感觉又回到了 20 年前，Macromedia Dreamweaver （!Adobe ）所见即所得😶
|
 |
14
zqx 2020-10-26 12:16:21 +08:00 via Android
感觉是表单设计器+vue 代码生成器，想知道生成 vue 代码用的什么库？涉及事件绑定，生命周期钩子的时候，用模板字符串插值？不会是自己做个类似词法分析器的东西吧
|
|
15
sparrowwht7 OP @xiangyuecn 是啊，这种产物主要还是市场需求的轮回，B 端业务抬头了需求量旺盛，就出现很多这类产物
|
 |
16
firefox12 2020-10-26 12:45:13 +08:00 1
@xiangyuecn dw 有什么缺点吗？ 感觉好用没缺点。 慢慢的就看不到人用了。
不是太懂前端，怎么和我司 前端用的东西差不多，好像也是一个 wyswyg 的编辑器，貌似没开源，但是前端说基本上每个公司都有一个类似的。 |
 |
17
ssshooter 2020-10-26 13:25:22 +08:00
持续关注
|
|
18
sparrowwht7 OP 1
@zqx 不只是表单设计器哦，预览和生成的代码都是源代码，也提供了插件能力，理论上表单、表格、图表等等都可以。代码生成用的 cheerio （ template ） + babel （ script ）
|
 |
19
jimoya 2020-10-26 14:16:32 +08:00
牛逼，赞赞赞
|
|
20
sparrowwht7 OP |
 |
21
markmx 2020-10-26 15:14:39 +08:00
好像很帅的样子 牛气
|
 |
22
popn74 2020-10-26 15:32:15 +08:00
阿里好像也有开源也有个区块什么的
基于 react 的 umi 也有好像，不过用的人很少 |
|
23
sparrowwht7 OP @popn74 区块最早出处我知道的是在原子设计理论里，三四年前也开发过一个工程化相关的和 umi 差不多（没有 umi 方案成体系），我这个更侧重业务需求开发，能不能被更多人使用也不太好说，毕竟是探索性项目😄
|
 |
24
hvboekml 2020-10-26 17:26:44 +08:00
有趣的项目。
ps：gif 小快长，看起来有些不便，感觉可以拆分下，或者用视频。 |
 |
25
tojonozomi 2020-10-26 17:27:12 +08:00
low code 的趋势感觉越来越明显了
拜读源码了 |
 |
26
ruoxie 2020-10-26 17:32:58 +08:00
我司后台管理系统要按设计稿来，精确到像素
|
|
27
sparrowwht7 OP @tojonozomi 代码有点儿...，写成 anyscript 了，现已实现功能为主占个坑，后面在优化代码
|
|
28
sparrowwht7 OP @hvboekml 可以的，下次用视频试试
|
|
29
sparrowwht7 OP @ruoxie 你司是高手，内部自己用的也有设计稿吗
|
 |
30
IssacTomatoTan 2020-10-26 21:34:25 +08:00 via Android
这个能集成去别的已有的项目呢？是不是只有 element 和 vue 的项目可用？ elementui 版本是否有兼容问题啊
|
|
31
sparrowwht7 OP @IssacTomatoTan 直接输出代码可以集成到现有项目，目前只有 element 和 vue 的项目可用其他组件库和框架暂时没写，现有项目不能用可以搞个微前端
|
 |
32
lori01 2020-10-27 09:58:31 +08:00
持续关注
|
|
33
sparrowwht7 OP @lori01 🤝
|
 |
34
wht100 2020-10-27 12:27:17 +08:00
看着不错
|
 |
35
duian 2020-10-27 16:45:46 +08:00
楼主有兴趣建一个微信群吗， 现在使用 QQ 的频次有一些低。
|
|
36
sparrowwht7 OP @duian 不瞒你说，用社交产品不多，没创建过微信群，晚上看看怎么建微信群，弄一个😄
|
 |
37
id4alex 2020-10-28 11:09:04 +08:00
.net 说 我还是太超前了
|
 |
38
justin2018 2020-10-28 11:17:14 +08:00
挺好的 每次写这些代码 自己也觉得挺无聊的~
|
|
39
sparrowwht7 OP @id4alex visual studio 太强，太超前市场跟不上😄
|
|
40
sparrowwht7 OP @justin2018 是的啊，有这精力多研究点儿数据结构算法、底层替代周期慢，不香吗
|
 |
41
yeqizhang 2020-10-29 08:26:34 +08:00 via Android
jack sparrow ？
|
|
42
sparrowwht7 OP @yeqizhang 是的
|
 |
43
Tigerw 2020-10-29 09:42:01 +08:00
以后不用切图了吗
|
|
44
sparrowwht7 OP @Tigerw 不能够，路漫漫，以后的以后的以后可能不用了
|
 |
45
tikazyq 2020-10-29 11:35:18 +08:00
支持大佬
|
 |
46
daimon1 2020-10-29 15:59:11 +08:00
大佬！
|
 |
47
est 2020-10-29 16:17:21 +08:00 2
好东西啊。能找回当年 VB dephi 开发的感觉最好了。
|
|
48
sparrowwht7 OP |
|
49
sparrowwht7 OP @est 没用过 VB dephi，就成天写业务闹心，就整了个这
|
 |
50
qfdk 2020-10-30 03:43:31 +08:00
不错不错 特地回来评论
|
|
51
sparrowwht7 OP @qfdk 后面先把物料和体验丰富起来，能真正用起来
|
 |
52
cqu2008 2020-10-30 09:40:07 +08:00
赞，已 star
|
|
53
sparrowwht7 OP @cqu2008 感谢支持
|
 |
55
SuperMild 2020-10-30 11:33:14 +08:00
这个系统工作量很大啊，难以置信你一个人搞出来，有魄力！
|
|
56
sparrowwht7 OP @SuperMild 量确实很大，精力比较旺盛，后面我还可能开源 online 的和机器学习部分的😄
|
|
57
sparrowwht7 OP 看来需要看看 delphi 是啥了，借鉴一番
|
 |
58
FEDT 2020-10-30 11:57:45 +08:00 via iPhone
跟阿里飞冰差不多吗？
|
|
59
sparrowwht7 OP @FEDT 也不太一样，ice 是通过原子设计理论搭建的物料体系（现在啥情况不太清楚了），我这个是把静态变成动态了，后面要能采集到数据就可以实现快速出代码
|
 |
60
37Y37 2020-10-30 13:39:01 +08:00
真的牛逼，大佬！
|
 |
61
aogu555 2020-10-30 14:16:28 +08:00
low code 的趋势确越来越明显了
|
|
62
sparrowwht7 OP @37Y37 感谢支持
|
|
63
sparrowwht7 OP 这一波自荐开源就结束了，感谢各位的关注，我就继续撸代码去了，争取从适用进化到使用，过几个月再来宣传一轮🙏
|
 |
64
tuzituzi 2020-10-30 18:32:57 +08:00
真的厉害啊
|
|
65
sparrowwht7 OP @tuzituzi 以前貌似一个公司的酒旅的，搞不好认识😄
|
|
66
tuzituzi 2020-11-03 09:14:09 +08:00
@sparrowwht7 有可能哦
|
 |
67
awolfly9 2020-11-04 09:14:27 +08:00
留名，mark，估计用得上
|
 |
68
seanxx 2020-11-04 09:52:15 +08:00
上家也有这种拖拽的,不过都是内部用的
|
 |
69
cweijan 2020-11-04 10:29:06 +08:00
看起来不错
|
 |
70
yumi007 2020-11-04 10:55:34 +08:00
留名，楼主加油
|
 |
71
yxzh 2020-11-04 11:39:50 +08:00 1
你这个可视化与代码的转换是单向的吗？修改了生成的代码，能不能把改动带回可视化模版？
|
|
72
sparrowwht7 OP |
 |
73
WillLIANG 2020-11-05 09:14:00 +08:00 via Android
看着不错，虽然我不是搞前端的，但还是赞一个，也说不定以后会用到😄
|
 |
74
SuperXRay 2020-11-05 09:21:52 +08:00
非常 cool
|
 |
75
swaggeek 2020-11-05 17:05:53 +08:00
楼主能否加个 vx 交流下
|
|
76
sparrowwht7 OP |
 |
77
change1689 2020-11-05 17:32:20 +08:00
大佬牛皮，解决了我后端程序员快速搭建简单前端页面的苦
|
 |
78
zitup 2020-11-05 18:52:21 +08:00
楼主觉得邮件拖拽有价值吗，拖拽几个模块，组成一个邮件格式供人使用
|
|
79
sparrowwht7 OP |
|
80
sparrowwht7 OP 这个项目还挺受欢迎，打算置顶在宣传两天😄
|
 |
81
stage0071 2020-11-06 10:08:24 +08:00
感觉和阿里的飞冰（ ice ）系统很像
|
 |
82
silence0812 2020-11-06 10:25:15 +08:00
@sparrowwht7 刚又看了遍，一如既往的没注释，不拉代码 debugger，一个也看不懂
|
 |
83
Lemeng 2020-11-06 10:40:23 +08:00
加油＾０＾~‘
|
|
84
zitup 2020-11-06 10:55:59 +08:00
@sparrowwht7 是的，国外习惯用邮件，国内也用，只是不注重这些样式之类的。大公司比如阿里腾讯的对外邮件一般都会有样式，不知道国内做一款类似的收费产品，楼主以为有搞头吗？
|
|
85
sparrowwht7 OP @silence0812 目前只有我个人在开发维护，后续规划主要丰富物料、开发 online 版，短时间没精力你那要有精力可以帮提俩 pr，看不懂的可以问我，没有的化只能再等等了
@Lemeng 感谢支持 @zitup 这个我没深入调研过市场情况，凭感觉说是有搞头的，我了解到的信息很多做国外生意的小公司就有这方面的需求。 |
|
86
zitup 2020-11-06 14:19:14 +08:00
@sparrowwht7 好的，谢谢恢复
|
 |
87
hitaoguo 2020-11-06 22:17:34 +08:00
在上家公司也写过类似的，但实在没你这个好看啊，羡慕。
|
|
88
sparrowwht7 OP @hitaoguo 我也是跟着感觉走，想到哪写到哪
|
 |
89
punk2sang 2020-11-07 11:07:44 +08:00
start sparrow failed 大佬能赐教吗
|
|
90
sparrowwht7 OP @punk2sang
1.查看 node 版本，我的是 v12 2.检测项目安装情况:cd ~/.sparrow/sparrow-server/ 主界面服务，cd ~/.sparrow/sparrow-view 预览服务 3.搞不定，提 issues，或加 readme 上的 vx 联系我 |
|
91
punk2sang 2020-11-07 13:08:50 +08:00
@sparrowwht7 ok
|
 |
92
micolore 2020-11-21 12:12:50 +08:00 via iPhone
有时间研究一下
|
 |
93
itcastcn 2020-11-22 14:15:39 +08:00
支持开源，加油
|
 |
94
ashine 2020-11-22 16:24:28 +08:00
用其他 UI 比如 vuetify 是不是不能用
|
 |
95
FightPig 2020-11-23 10:24:03 +08:00
不错，不过 element-ui 好像都不维护了，
|
|
96
sparrowwht7 OP @FightPig UI 框架好适配，哪个胜出我就适配哪个😄
|
 |
97
zxcvsh 2020-11-23 16:08:49 +08:00 via iPhone
swagger 好评
|
 |
98
geebos 2020-11-23 18:48:11 +08:00
简单用了一下，个人认为交互体验还能提升。
一个小问题就是左侧的树状图和页面组件不同步（在属性页面删除的组件不会实时同步到左侧的树状图上），还有就是点击组件右侧如果能自动切换到属性就更好了。 最后关于性能不知道有没有做过评估，我开启 sparrow 之后电脑风扇就狂转。 |
|
99
sparrowwht7 OP @geebos 感谢反馈，交互体验还差点事儿，后续规划大概是先开发完线上版，再细化使用体验
|
 |
100
wurunpu 2020-11-24 16:12:05 +08:00
。怎么本地运行啊 大佬
|
Select Language