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

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

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

前言

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
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   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   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   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   2020-10-26 11:16:48 +08:00
@bojue 完全赞同,领域内的 nocode 才有更大实际价值,这个需要相对领域的专业人士搞数字化部分
sparrowwht7
    12
sparrowwht7   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   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   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   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   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   2020-10-26 17:38:23 +08:00
@tojonozomi 代码有点儿...,写成 anyscript 了,现已实现功能为主占个坑,后面在优化代码
sparrowwht7
    28
sparrowwht7   2020-10-26 18:35:51 +08:00
@hvboekml 可以的,下次用视频试试
sparrowwht7
    29
sparrowwht7   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   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   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   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   2020-10-28 11:25:42 +08:00
@id4alex visual studio 太强,太超前市场跟不上😄
sparrowwht7
    40
sparrowwht7   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   2020-10-29 09:19:12 +08:00
@yeqizhang 是的
Tigerw
    43
Tigerw   2020-10-29 09:42:01 +08:00
以后不用切图了吗
sparrowwht7
    44
sparrowwht7   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   2020-10-29 16:43:12 +08:00
@tikazyq
@daimon1
感谢支持😄
sparrowwht7
    49
sparrowwht7   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   2020-10-30 08:25:17 +08:00
@qfdk 后面先把物料和体验丰富起来,能真正用起来
cqu2008
    52
cqu2008   2020-10-30 09:40:07 +08:00
赞,已 star
sparrowwht7
    53
sparrowwht7   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   2020-10-30 11:51:49 +08:00
@SuperMild 量确实很大,精力比较旺盛,后面我还可能开源 online 的和机器学习部分的😄
sparrowwht7
    57
sparrowwht7   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   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   2020-10-30 14:56:03 +08:00
@37Y37 感谢支持
sparrowwht7
    63
sparrowwht7   2020-10-30 16:54:02 +08:00
这一波自荐开源就结束了,感谢各位的关注,我就继续撸代码去了,争取从适用进化到使用,过几个月再来宣传一轮🙏
tuzituzi
    64
tuzituzi   2020-10-30 18:32:57 +08:00
真的厉害啊
sparrowwht7
    65
sparrowwht7   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   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   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   2020-11-05 19:36:58 +08:00
@change1689 后端更愿意使用😄
@zitup 感觉国外用邮件的多,有些付费的产品做的邮件的
sparrowwht7
    80
sparrowwht7   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
加油^0^~‘
zitup
    84
zitup   2020-11-06 10:55:59 +08:00
@sparrowwht7 是的,国外习惯用邮件,国内也用,只是不注重这些样式之类的。大公司比如阿里腾讯的对外邮件一般都会有样式,不知道国内做一款类似的收费产品,楼主以为有搞头吗?
sparrowwht7
    85
sparrowwht7   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   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   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
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   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   2020-11-23 18:54:58 +08:00
@geebos 感谢反馈,交互体验还差点事儿,后续规划大概是先开发完线上版,再细化使用体验
wurunpu
    100
wurunpu   2020-11-24 16:12:05 +08:00
。怎么本地运行啊 大佬
1  2  
关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1094 人在线   最高记录 5497   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 37ms · UTC 22:09 · PVG 06:09 · LAX 14:09 · JFK 17:09
♥ Do have faith in what you're doing.