低代码基座的探索与实践_基座代码-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_33370468/article/details/146020630

自我简介：4年导游，10年程序员，最近6年一直深耕低代码领域，分享低代码和AI领域见解。

本文主题

在开发工作中，我使用的技术栈主要是React.js + Node.js 。目前，我也初步实现了Vue版本的可视化编辑工具。随着对该工具的深入研究，我逐渐意识到，想要让这个工具变得更加好用，深入了解AST抽象语法树是必不可少的。

我所开发的可视化编辑工具，主要面向初级前端开发者和后端人员，旨在让他们通过简单的拖拽和配置操作，就能快速生成前端页面并搭建项目。

刚开始接到这个需求时，我感到有些迷茫，因为可供参考的案例并不多。但在进行技术方案制定和调研的过程中，我发现其实有很多前辈和先驱者都在致力于可视化编辑工具的开发。他们的目标大多是通过这类工具来提高开发效率，而这也正是我们开发这个工具的初衷——搭建一个快速开发平台，实现项目的快速开发，尽量减少手动编写代码的工作量。在调研过程中，我收集了大量的资料，其中一些对我启发很大，我也会在本文中列举出来，希望能给大家带来一些帮助。

如何提高开发效率

在日常的开发工作中，很多人都在从事着重复性的代码堆砌工作，时间久了难免会感到厌倦，因此提高开发效率成为了大家共同的追求。许多大厂都在积极研发各种提高效率的工具，其中可视化编辑工具是一个重要的发展趋势。据我了解，阿里的云凤蝶在一两个月前就准备将移动端建站功能切换为中台的快速开发平台，这与我们设想的可视化编辑工具的定位非常契合。我们的目标是借助可视化编辑工具，快速生成简易中台，从而节省开发成本和周期。

那么，如何才能提高开发效率呢？大家可以参考这篇文章减少代码量的 7~8 种方式，我认为它总结得非常到位。根据这些文章的内容，我也进行了一些简化和总结（这里直接用了之前总结的文档截图）：

在这里插入图片描述

下面我来大致解释一下其中涉及的几个要点：

脚手架：类似于我们日常使用的vue-cli和create-react-app，通过命令行的方式可以快速初始化一个项目。我们设想开发一个CLI工具，它能够帮助我们快速创建符合规范的项目架构，并自动安装相关依赖。这个工具发布到npm仓库后，使用者可以全局下载并通过命令行使用，这样不仅避免了手动一步步新建项目的繁琐过程，还能确保项目初始化的标准化。此外，它还可以通过特定命令快速生成文件到指定目录，或者生成多个相关文件到关联目录，就像Laravel tinker一样便捷。当然，我们也可以参考Angular CLI强大的功能，来提升我们工具的效率。
工程化：制定一套项目规范，这套规范不会过于细化到变量函数的命名规则等方面，而是侧重于保证项目的标准化输出，确保项目在开发过程中的一致性和可维护性。
编辑器插件：例如开发Vscode插件，根据我们自己的项目规则和结构，实现代码的自动生成功能。这样可以大大减少手动编写重复代码的工作量，提高开发效率。
组件设计系统：以storybook为例，它集成了组件开发、预览、调试和文档说明等功能，形成了一套完整的方案。组件代码可以直接复制使用，方便我们快速、系统地研发组件，提高组件的复用性和开发效率。
减少代码量：综合来看，减少手写代码量无疑是提高开发效率的关键。通过合理运用上述方法，如使用脚手架、工程化规范、编辑器插件和组件设计系统等，都可以有效地减少手动编写代码的工作量，从而提高开发效率。
物料资源：我们可以将封装好的组件和区块（这里的区块概念可以参照antd-design来理解）视为一种资源，这些资源可以进行版本维护和修改。在需要使用时，直接从资源库中选取即可，无需重复开发。同时，上传的图片等资源也可以存储在资源池中，方便随时取用，避免了多次重复上传的麻烦。
可视化编辑器工具：这是本文的重点内容。通过预置组件，用户可以通过拖拽操作快速生成页面布局，然后继续拖入组件来丰富页面内容。编辑器工具会读取组件的props配置信息，并通过可视化的方式让用户进行配置。用户可以实时预览组件效果，最后下载保存代码，在浏览器端即可生成file.jsx代码文件。整个过程无需后端参与，大大简化了开发流程，提高了开发效率。

编辑器工具

业务架构：我用两张图来展示整体的业务架构，以便大家更好地理解。

在这里插入图片描述

在这个架构中，涉及到组件、插件、区块、模板等概念，这些都统称为物料资源，其目的是实现代码复用，减少代码量。图中对这些概念都有详细的备注和解释，大家可以结合图片进行理解。
2. 编辑器配置原理：接下来用一张图来解释编辑器的配置原理，特别是组件props配置的原理。

在这里插入图片描述

当预置组件被拖入主操作区后，用户点选该组件对象，组件的props配置信息会通过不同类型的表单组件展示出来。例如，String类型的值会用Input组件展示，Boolean值会用Switch组件展示。表单组件的类型是由需要配置的值的类型决定的。
3. 编辑器总体技术架构：下面这张图展示了编辑器的总体技术架构。

在这里插入图片描述

从整体来看，这个架构形成了一个闭环，意味着我们的可视化编辑工具及其配套的CLI工具等设施是具有持续迭代和发展能力的。从右下角开始分析，我们的一系列工具最终生成的是一个完整的项目。项目由CLI命令行初始化后，由一个个组件构成，这些组件聚合形成区块，即页面级别的组件。用户通过拖拽操作将组件放入编辑器的主操作区，形成组件数据树形结构。编辑器通过拖拽操作构建一套组件树对象，实际上拖拽过程中修改的是组件树的json结构。通过修改数据，驱动页面的即时更新，这部分工作由React完成。我们只需要用json数据树准确描述好组件树、组件配置props以及组件之间的层级关系即可。编辑器输出的是json数据，然后通过解析引擎将json对象编译还原成组件，生成一个大的组件树，再通过react模板文件，最终生成一个file.jsx的react文件，将这个文件放入umi.js的pages目录中就可以直接访问，它就相当于我们日常编写的react组件或页面文件。

为了让大家更具体地理解项目中涉及的几个概念，下面我再用一些图来进行说明：
4. 组件：这张图展示了更具体的组件概念，组件是系统中的最小资源级别，其他的大区块都是基于组件构建的。

在这里插入图片描述

区块：区块是页面级别的，可以通过代码库进行版本维护，具体可以参照antd-design的区块来理解。图片右侧展示了整个区块的生命周期逻辑。

在这里插入图片描述

模板：模板可以理解为一个主题，在项目初始化时，用户可以选择一个主体色、主体布局等。主题同样可以进行版本维护。

在这里插入图片描述

编译：这里所说的编译还是比较基础的层面，暂时没有深入到AST抽象语法树。编译是代码自动生成的原理支撑，个人认为，想要将可视化编辑器工具做到更好，后期必须深入到AST编译层面。

在这里插入图片描述

可视化配置：
- 可视化拖拽 + 即时编译预览：用户通过拖拽操作来布局页面，同时编辑器能够即时编译并预览效果，让用户实时看到自己的操作结果。
- 拖拽映射到HTML树形结构->AST->生成代码：拖拽操作会映射到HTML树形结构，然后进一步转化为AST，最终生成代码，实现了从可视化操作到代码生成的过程。
- 可视化生成块，解析后生成的代码可以复制：用户通过可视化操作生成的块，经过解析后生成的代码可以方便地复制使用，提高了代码的复用性。
- 后期实现生成的代码直接生成或者修改源文件：这是我们未来的一个目标，即让生成的代码能够直接生成或修改源文件，进一步简化开发流程。
- 拖拽生成文件时可以选择目标目录：用户在拖拽生成文件时，可以自由选择文件的保存目录，提高了操作的灵活性。

配置的方式不仅仅只有props一种，我还想到了以下几种：
- config.json + JSON-Schema
- Template
- Props
- States
- Service存储
- LocalStorage存储
9. 数据驱动：在开发这个工具的过程中，我深刻体会到了数据驱动的重要性。用户的拖拽操作最终会映射到数据结构的变化，我们将这些数据交给react、vue这样的框架，让框架去完成UI渲染的工作。这也让我意识到自己在深层次数据结构和算法方面的不足，因此建议大家一定要重视这两方面能力的培养。下面用一张图来形象地展示数据驱动的过程。

在这里插入图片描述

Node.js服务支撑：
- 浏览器在操作文件方面存在一定的局限性，而Node.js可以作为浏览器功能的拓展，弥补这一不足。
- 在服务端，Node.js可以用于操作文件和读取系统信息，为项目提供必要的支持。
- Node.js操作文件流的功能是CLI命令行的底层支撑和核心，对于我们的可视化编辑工具的配套CLI工具的实现至关重要。

目前，整个编辑器的实现还没有用到Node.js做拓展，但从上述分析可以看出，后期引入Node.js来拓展浏览器功能是非常有必要的。
11. CLI工具可以有哪些功能：
- 命令行脚本：提供一系列命令行脚本，方便用户进行各种操作。
- 快速查创建项目（可交互式选择布局）/ git clone：用户可以通过命令快速创建项目，并可以交互式地选择项目布局，也可以通过git clone命令克隆项目。
- 快速创建块：能够快速创建页面级别的区块，提高开发效率。
- 快速创建文件( 数据+模板=文件 )，路由随之生成：根据数据和模板快速创建文件，并且自动生成相应的路由，简化了开发流程。
- 项目快速发布脚本：提供项目快速发布的脚本，方便用户将项目发布到生产环境。
- 底层支撑就是Node：CLI工具的底层支撑是Node.js，利用Node.js的强大功能实现各种操作。
- 可参照Angular CLI ：可以参考Angular CLI的功能和设计思路，来完善我们自己的CLI工具。
12. 即时编译预览：这里用一张图描述了rect是怎么实现热更新和即时预览功能的。

在这里插入图片描述