Categories
程式開發

可视化辅助编程在贝壳找房的探索与实践


引言

1 什么是可视化辅助编程

可视化辅助编程是近年来前端界兴起的一个新概念,它是在开发人员手动编写代码的基础上,辅以可视化的界面操作,从而达到提效的目的。

传统的开发模式以代码为基础,它的门槛很高,开发人员需要手动编写大量的代码来实现业务逻辑和功能界面,这样做的好处是非常灵活,下到简单的展示页面,上到复杂的动画交互,基本都能实现,而不足之处也很明显,所有的功能都需要用户手动完成,对某些特定的场景而言,会存在大量的重复工作。

前几年比较流行的可视化搭建系统则以配置为基础,它的好处在于所见即所得,用户通过简单的拖拽就可以生成页面,再通过一些简单的配置就能直接生成网站,不需要很强的专业技能,非技术人员(产品、运营)也能轻松完成这部分工作,劣势在于不够灵活,可视化搭建系统通常针对特定的领域与业务,并不能满足所有的业务场景。

可视化辅助编程位于 pro code 和 no code 之间,针对开发人员,它是一种 low code 的编程方式,能在不丧失灵活性的同时,最大程度减轻用户开发工作量,完成一站式研发。

可视化辅助编程探索与实践

1 可视化辅助编程的现状

目前业界也有很多相应的产品,比较知名的有 Vue 官方的 vue ui、淘宝的 iceworks 和支付宝的 umi ui。下面便是 umi ui 的截图。

可视化辅助编程在贝壳找房的探索与实践 1

但无论是vue ui、iceworks还是umi ui,目前的可视化辅助编程解决方案都存在着两个问题:

1 技术栈固定

用户在 iceworks 和 umi ui 里只能是使用 React、在 vue ui 里只能使用Vue,而在实际一个业务线中,通常会使用多种技术栈来开发项目,这样就不得不在多个工具之间切换使用,增加了学习和使用成本;

2 定制困难

iceworks 和 umi ui 都提供了一整套自己的项目管理和开发管理标准,用户只能遵循相应的标准进行开发,想要进行业务相关特殊定制会非常困难。

2 贝壳找房在可视化辅助编程的探索

为了解决上述这些问题,我们开发了一个可视化辅助编程工具 VE。VE 使得本地开发全生命周期实现了可视化,它的主要目的是在打造前端一站式开发体验的同时,兼顾灵活性。前端一站式的开发主要是解决一个前端项目从创建、配置到开发、运行、部署等一系列问题。

1 创建项目

通常我们创建项目时会在公司内部查找可用的脚手架,了解用法,根据文档创建项目。VE 对这个流程做了优化,它提供了一套脚手架插件机制来接入各个业务线的脚手架,脚手架不限制技术栈,无论是使用 React、Vue、Angular 甚至是 JQuery 的脚手架,都可以快速接入。

用户在 VE 上能看到公司现有的脚手架,然后可以选择自己感兴趣的脚手架,根据配置一键创建项目。脚手架的参数是通过可视化界面快速配置的,可以一目了然地知道配置项的功能是什么。一键生成项目后自动安装项目依赖,不需要看命令行文档,不需要手动切换目录“npm install”,完全用界面去操纵项目搭建。

可视化辅助编程在贝壳找房的探索与实践 2

2 项目配置

项目创建完,接下来就需要进行项目的配置了,在贝壳,前端项目的配置主要就是 redskull 和 hobber 的配置,redskull 是基于 webpack 的前端构建工具,hobber 是基于 koa 的 nodejs 服务框架,redskull 和 hobber 都是贝壳自研的工具,采用高度可配置化的设计,配置化的设计带来了很高的灵活性,但也带来了一个问题:越高度可配置,可能越不易配。

之前我们需要查看文档,根据文档修改相应的代码,步骤繁琐,且容易出错。使用 VE,可以直接通过“配置管理”可视化的进行项目的相关配置,比如session服务、cdn submodule、打包路径等等,同时,配置管理里面还有一个自定义配置功能,可以让你定制出更针对于你项目配置痛点的可视化配置界面。

可视化辅助编程在贝壳找房的探索与实践 3

3 项目开发

在日常项目开发过程中,我们经常需要新增一个页面或模块。以页面为例,大多数时候创建一个新页面的操作是添加一些页面文件,按需增加相应的 router、store 等,这些都是非常机械化且重复的,有一定的人工成本。

为了解决这个问题,不同项目有不同的处理方式:可以采用最原始的 copy 方式来拷贝粘贴代码,也可以通过脚手架提供的命令行来直接生成代码,VE 通过可视化界面快速生成模版代码,比如一个新的空白界面,或是一个带搜索条件的列表界面。有时简单的生成一个“page页面”代码或文件也许并不是你想要的,VE“开发管理”支持扩展和定制你自己的可视化代码生成逻辑,通过VE平台,实现从“ctrl+c加ctrl+v”到“一键生成”的自动化转变。

可视化辅助编程在贝壳找房的探索与实践 4

4 项目运行

通常我们在运行项目的时候,会使用终端输入命令行的方式来执行相应的指令。使用 VE 的“任务管理”,用户可以快速的执行项目启动、打包或是其他 npm scripts,非常方便。同时,VE 还提供了一个 web terminal 可以让用户直接在 VE 上运行命令,而不需要再切换到终端上进行操作。

5 项目部署

项目流程的最后一步就是部署,在贝壳,通常我们需要切换到青蝉或是 Jenkins 去部署项目,有一定的操作成本,有了 VE, 我们可以直接在 VE 系统的“部署管理”中快速进行构建平台的传送,同时一个同学设置后,其他同学直接可以传送,项目的构建、部署job不经意间被维护起来了。

6 其他功能

除了上面那些基础功能外,VE 还提供了丰富的配套功能来打造整个系统的闭环能力。这些配套功能主要包括:文档管理、依赖管理、快速打开项目等。这些配套能力完善了 VE 系统的使用体验,给用户提供了更多样性的选择。

1. VE 的特点

与目前市面上的可视化辅助编程方案相比,VE 的特点主要体现在以下三个方面:

A. 通用性 :VE 对日常前端项目开发流程进行了收敛,围绕这些开发流程,进行公共部分的抽取,开发了包括 redskull 配置、hobber 配置、文档管理、依赖管理、快速打开项目、web terminal等一系列的通用功能,这些通用功能,脱离了技术栈与业务场景的限制,适用于绝大部分的应用场景。

B. 可扩展 :在提供通用能力的同时,VE 也提供一套插件机制便于扩展,用户可以在通用功能的基础上,通过简单的代码编写,就能定制一套适配与自己业务场景和技术栈的项目配置和开发能力,非常灵活和方便。

C. 平台化 :VE 专注于基础平台能力的搭建,不关注具体的每块功能是怎么实现的,它将具体的功能实现下放到第三方进行定制,同时通过一系列的 API 接口,便于其他第三方解决方案的快速接入。

2. 技术架构

VE 系统的技术架构主要有六层:运行环境、数据库、API 层、业务层、展示层和前端 UI 层。

可视化辅助编程在贝壳找房的探索与实践 5

A. 运行环境 :VE 系统以 npm 包的形式存放在公司的 npm 私服上,目前只适配了 MacOS 操作系统上,依赖于 NodeJS 运行环境。

B. 数据库 :VE 系统采用 LowDB 数据库来存储项目相关数据(脚手架插件信息、项目信息等),LowDB 是一个小型的本地 JSON 数据库,数据直接保存在本地 json 文件里,省去了连接 sql 数据库的麻烦。

C. API 层 :VE 系统的 API 层主要分为两类,一类是 API 接口,主要用来处理基本的业务逻辑,包括 config、task 和 doc 等,另一类是 API 对象,主要用于脚手架插件的接口注入,包括 cliAPI、configAPI、codeAPI 等。

D. 业务层 :VE 系统的业务层也分为两类,与 API 层对应,一类是项目管理相关的业务逻辑,主要包括配置管理、任务管理和文档管理等,另一类是脚手架相关的业务逻辑,主要包括脚手架接入、自定义配置和自定义开发等,脚手架相关业务逻辑都依赖于脚手架插件。

E. 展示层 :VE 系统的展示层主要包括模块引擎渲染和前后端数据通信,VE 系统采用了 ejs 模板引擎,综合使用了 axios + sse(server-send event)的方式来完成前后端通信。

F. 前端 UI :VE 系统的前端 UI 层采用 Vue 全家桶,界面库使用 ElementUI。

3. 脚手架插件

为了方便用户快速接入自己开发的脚手架,VE 提供了一套脚手架插件机制,脚手架插件可以很好的包裹现有的脚手架,实现解耦的功能。

脚手架插件本质上是一个 npm 包,它和普通脚手架之间是一一对应的关系。脚手架插件在 VE 运行时会被加载,并通过注入 API 的方式来和 VE 进行通信。

脚手架插件内容主要包括:

  • cli.js:接入自定义脚手架配置
  • config.js:接入自定义项目配置
  • code.js:接入自定义项目开发

接入自定义脚手架的关键在于 cli.js 文件,该文件会导出一个函数,该函数接收 api 对象作为参数,这个 api 对象其实就是前文提到的 cliAPI 对象,主要用来处理脚手架配置的相关逻辑,它由 VE 系统在内部创建,并在加载 cli.js 文件时传入:

module.exports = api => {
  // 在这里使用 API...
};

你可以通过调用 api.registerPluginInfo 来注册插件信息,插件信息包括展示名称、npm 包名、描述、链接以及 config 配置项。config 配置项是一个数组,用来描述配置界面上有哪些元素,这里我们采用的是 inquirer 的配置项规则。

api.registerPluginInfo({
  name: '', // 展示名称
  pkgName: '@lianjia/', // npm 包名
  description: '', // 展示在名称下方的描述
  link: '', // “更多信息 (More info)”链接
  config: [] // 配置项规则参考 inquirer
});

在函数中调用 api.registerGenerate 来运行脚手架生成新项目,api.registerGenerater 接受一个 async 函数作为参数,这个 async 函数主要用来根据脚手架配置生成新项目,接收的参数包括脚手架插件信息 pluginInfo(对应 api.registerPluginInfo 中注册的 config 信息)、项目信息 projectInfo (包括项目名称、项目描述、项目绝对路径和项目根目录信息)以及 一个 sse-pusher 的实例 push,用来向前端推送项目生成的实时消息:

/**
   * @object projectInfo
   *  @field name 项目名称
   *  @field desc 项目描述
   *  @field path 项目绝对路径
   *  @field rootPath 项目所在根目录
   * @object pluginInfo 插件信息,对应 registerPluginInfo 中注册的 config 信息
   * @function push sse-pusher 的实例,用于向前端推送消息
   */
  api.registerGenerate(async ({ pluginInfo, projectInfo, push }) => {
    try {
      //...
    } catch(e) {
      throw e;
    }
  }

最后将脚手架插件项目发布到公司的 npm 私服上,包名以 @lianjia/ve-cli- 作为前缀,即可以在 VE 的脚手架管理界面看到最新接入的脚手架插件。

以下是对应的效果展示图:

可视化辅助编程在贝壳找房的探索与实践 6

接入自定义项目配置和自定义项目开发与接入自定义脚手架类似,区别在于它们使用了 ncform 来生成配置表单,ncform 的优点在于仅需配置即可生成表单 UI 及其交互行为,并且它自带丰富的标准组件和校验规则,这使得它非常适合项目配置和项目开发这种具有强交互行为的场景。下面分别是接入自定义项目配置和自定义项目开发的效果图。

可视化辅助编程在贝壳找房的探索与实践 7

可视化辅助编程在贝壳找房的探索与实践 8

可以看到,在 VE 中接入自定义脚手架是非常简单方便的,用户只需要通过简单的配置,就可以实现脚手架的快速接入,并且使项目具有自定义配置和自定义开发的功能。同时,为了进一步降低脚手架接入的成本,VE 还提供了一个快速创建脚手架插件的功能,用户只需要在界面中输入或选择相应的配置,就可以生成一个简单的脚手架插件样板项目,这个样板项目中包含了 cli.js、config.js 和 code.js 三个样板文件,并且内置了大量的样板代码,用户可以很方便在它们的基础上进行二次开发。

4. 未来展望

VE 系统致力于完善和丰富贝壳本地前端开发体验,后续工作的重心会集中在研发提效和技术升级上,主要围绕以下四个方面来进行发力:

A. 丰富脚手架类型和物料库:VE 后续会和更多的业务线进行接洽,接入更多不同种类的脚手架,以便满足更多样的业务需求,同时我们还计划围绕这些脚手架打造专属的物料库,用户选择自己感兴趣的物料,就能直接一键快速生成对应代码了

B. 内部系统打通:公司内部有很多其他的平行系统,如监控平台灯塔、代码检测平台 sonar 等,VE 后续也会陆续和这些系统进行线下打通。与平行系统进行打通,有助于丰富 VE 的一站式使用体验,用户只需要使用 VE,就可以完成一个前端项目从创建到部署的大部分工作

C. 推动技术升级:目前我们团队和公司内部都有着大量“古董”级别的前端项目,这些项目大多采用陈旧的技术栈,维护和开发起来都比较困难。为了解决这个问题,推动公司前端技术升级,VE 后续也会推出一系列针对现有存量项目进行技术改造的功能,比如 js 项目一键转为 ts 项目、bucky 一键升级为 hobber、一键支持 PWA、一键支持 SSR 等

D. 多平台支持能力:VE 现在只能依赖于浏览器运行,用户在项目开发过程中需要在 IDE 和浏览器间频繁进行切换,有一定的操作成本,我们正在筹备开发一个 VE 的 vscode 插件,有了这个插件,用户直接在 IDE 上就能完成 VE 支持的所有操作,非常方便

总结

VE 系统是贝壳找房在可视化辅助编程领域的一个新的探索和尝试,它的优点很明显,但也存在一定局限和挑战。最大的挑战是用户习惯的改变,可视化辅助编程意味着用户需要抛弃以往直接在 IDE 中编写代码的方式,而更多地使用图形化界面来进行操作,因此我们必须找到一些更符合用户习惯的提效破局点,才可能让用户更愿意使用,这也是我们未来探索的重点,比如上面提到的正在筹备的vscode插件。

目前 VE 系统已经开源,开源地址为:https://github.com/LianjiaTech/ke-ve。开源版本的 VE 系统旨在项目流程与开发赋能,提供了一套可视化辅助编程的底层框架,非常适合于有这方面需求的公司在此基础上进行二次开发,搭建属于自己的可视化辅助编程系统,欢迎大家试用,多提意见。

本文转载自公众号贝壳产品技术(ID:beikeTC)。

原文链接

https://mp.weixin.qq.com/s/O2O8Q0erx7tIsi-T7AO7RA