引言

1 什么是可视化辅助编程

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

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

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

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

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

1 可视化辅助编程的现状

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

但无论是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 项目配置

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

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

3 项目开发

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

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

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 层。

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: '<%=meta.fullName%>', // 展示名称
  pkgName: '@lianjia/<%=meta.fullName%>', // npm 包名
  description: '<%=meta.desc%>', // 展示在名称下方的描述
  link: '<%=meta.npmUrl%>', // “更多信息 (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 的脚手架管理界面看到最新接入的脚手架插件。

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

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

可以看到，在 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

创作场景

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