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

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

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

前言

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  
qing0304
    101
qing0304  
   2020-11-24 18:29:27 +08:00
顾得,[贪心] 研究下,看能不能用上,太需要了
sparrowwht7
    102
sparrowwht7  
OP
   2020-11-24 19:58:15 +08:00
@wurunpu 按 github readme
Betsy
    103
Betsy  
   2020-11-25 00:39:41 +08:00 via iPhone
想问下,基于同样的原理,是不是也能生成其他语言的代码,比如 Java
sparrowwht7
    104
sparrowwht7  
OP
   2020-11-25 08:18:44 +08:00
@Betsy 应该可以,和语言框架没啥关系,这个项目想表达的是开发方式
Betsy
    105
Betsy  
   2020-11-25 08:27:00 +08:00 via iPhone
@sparrowwht7 感谢,有时间研究研究老哥这个项目的实现原理。我个人目前也有个类似的小需求,但希望生成的不是 js,而是 Java 和 Scala
looseChen
    106
looseChen  
   2021-06-02 15:33:27 +08:00
@Betsy 后端语言可以搜索关键字 模板引擎。
1  2  
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2828 人在线   最高记录 6543   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 23ms · UTC 13:25 · PVG 21:25 · LAX 06:25 · JFK 09:25
Developed with CodeLauncher
♥ Do have faith in what you're doing.