场景化低代码搭建工作台-sparrowjs

背景

---

在近两年to B升温、前端资源紧缺的背景下，中后台研发效率提升成为各公司技术部门需要突破的重点技术方向。研发效率提升大致分为以下3类产物：

让别人开发（NoCode），转移劳动力，把研发成本转移给产品、运营等其他岗位，在产品生产周期上提升效率；

少开发 （LowCode），此方向重点是通过技术手段提升研发工程师自身的效率；

不开发（AutoCode），将生产力由人力转到机器；

中后台项目因自身的特点比较适合从 low code方向搞些事情。一个前端项目主体由两部分组成，工程部分和日常需求部分，工程部分由框架选择、目录结构、mock数据、构建发布，监控，统计等组成，提效的手段可以从技术收敛，标准化着手，这部分有较多成熟的开源项目可以参考如：vue-cli、iceworks、umi等。针对中后台项目提效有很多手段可以尝试，比如：跨应用组件、代码片段共享，微前端，可视化搭建。sparrow 是一款提升中后台研发效率的源代码可视化搭建 （LowCode）工具；

sparrow 介绍

---

目标

sparrow 的目标是场景化低代码搭建工作台，通过工作台直接生成源代码；

一般来说效率和通用性成反比，通用性好往往效率提升就不明显，如下图所示，直接原生js，html，css开发效率最低，但是创造力最强，组件、物料是对重复性功能进行抽离复用的资产，是作为上层搭建的根基，通用可视化搭建、场景可视化搭建负责组装粘合资产，通用可视化搭建因与业务不相关一般提效效果不明显，场景可视化搭建通过搭建容器可以与业务代码绑定让产出的源代码尽可能贴近需求。

搭建架构

上图从客户端负责业务搭建，产生数据传递给服务端，服务端负责生成代码，代码输出到预览工程，热更新实时展示，最后搭建完成将源代码导入到真实项目中，完成需求开发。搭建工作台由以下服务实现：

后端服务： Server 层负责处理数据，输出数据，生成代码；

搭建服务： Client 层负责可视化操作，提供数据；

预览服务： 预览层负责实时预览搭建产物；

资产服务： 包括搭建编辑容器client端、 区块、业务组件等，负责生产物料；

表单

表格

区块(from：ice)

快速使用

---

# 全局安装

$ npm install -g sparrow-code

# 运行

$ sparrow

未来规划

---

整体架构

sparrow 的愿景是实现场景化的低代码搭建工作台，整体架构设计如下图：

后续功能规划

1.增强搭建容器功能；

2.丰富搭建容器种类；

3.增强搭建工作台能力；

4.与前端工程结合；

5.插件化；

6.线上版；

总结

sparrow 由我个人业余时间开发，工作量巨大，目前实现了一个可行性版本，git地址在下面，实现了基础搭建功能，后续会按照功能规划逐步实现，争取今年底发布第一个正式版。感兴趣欢迎关注。

git地址