lowcode-engine源码阅读 - 02、编排模块01-搭建的"本质" - 《低代码引擎文章专区》

这篇文章的主要内容有：
相关资料

:::info 💡 据说，最好的学习方式之一，是把自己学到的内容教授给别人。现在阅读低代码引擎的开源代码有一段时间了，在不断的阅读过程中、我学到了好多东西，心里的兴奋憋不住、有股冲动想要跟别人分享，所以就有了这篇文章，接下来我也打算继续阅读代码/继续写，争取把低代码引擎的源代码吃透，大家一起“猛啃”吧。 :::

代码仓库	https://github.com/alibaba/lowcode-engine
作者	王士江
状态	容易
简介	低代码引擎给人印象最深的应该是它的“可视化编辑器”吧——通过使用在线编辑器/设计器，让用户通过做“选择题”（选择组件）和“填空题”（修改配置），简单地拖拖拽拽、修修改改，快速完成一个页面的搭建工作。这很有当年苹果“滑动解锁”给人带来的快感有没有？既然这个可视化的编辑器（设计器），是低代码引擎的核心模块之一，那么咱们就先阅读一下这个模块。

这篇文章的主要内容有：

接下来，我会从以下几个方面，谈谈我对lowcode-engine的渲染模块的理解。

02、编排模块01-搭建的"本质" - 图1

1. 怎样描述一个“UI”？

怎样描述一个“UI”…

（1）UI的“树”型数据结构

下面是一个简单的UI界面：

分解一下这个UI界面，看一下它有哪些元素，发现它是由很多有层次的节点（Node）组成：

而这些节点（Node）元素（Element），最终会组成一棵树（Tree）：

而这种“树”（Tree）型数据结构，正是搭建UI/用户界面的关键，其实不止是对于Web前端来说，其他包括PSD、PDF、Microsoft Word/Excel/PowerPoint等等在内，也都是使用树形数据结构来描述UI的。

（2）UI的“格式转换”

就像我们可以将Word、PPT文档转换为PDF格式一样，我们也可以把UI描述进行“格式转换”。

比如，京东有一个Taro框架，可以使用React语法、进行UI页面开发，然后把UI转换成Web端、APP端、各种小程序端等等。

对于使用React框架的开发者来说，可以通过使用react-dom、react-native、react-art等等包，将React应用分别应用到浏览器、iOS/Android原生App和canvas画布上等等。

而对于Vue框架的开发者来说，也有一个名称为uni-app的框架，甚至实现了“一套代码，运行到多个平台”——使用Vue框架语法开发的应用，同时应用到H5、iOS/Android原生App以及输出成各种小程序。

所以，我们可以看到，虽然各个客户端、各个平台提供的原生API很不相同，但是如果只是看UI的描述形式、倒是非常相似，甚至可以使用同一套源代码、直接进行转换。

2. 搭建相关的“三棵树”

搭建相关的“三棵树”…

现在我们知道了，我们可以通过“树”（Tree）型数据结构来描述UI的，而且描述UI的树形结构不止一种、甚至可以进行转换。

那么我们来看看，我们在使用低代码引擎进行可视化搭建时，需要关注UI相关的“三棵树”——HTML DOM树、React虚拟DOM树，以及低代码引擎实现的文档模型树（DocumentModel）。

当然，在这里要看的重点是文档模型树（DocumentModel），这个模型模块的重要程度，按照官方文档的说法：“编排的本质是生产符合《阿里巴巴中后台前端搭建协议规范》的数据，在这个场景里，协议是通过 JSON 来承载的”。

（1）HTML DOM树

首先看低代码引擎可视化搭建相关的第一棵树——HTML DOM树。
使用低代码引擎进行可视化搭建的运行环境是浏览器，而HTML是我们跟浏览器打交道的协议。
我们通过使用结构化的HTML、在浏览器中开发UI；而浏览器也通过提供HTML DOM相关的API、让我们可以进行动态调整UI。

（2）React虚拟DOM树

虽然可以直接使用浏览器提供的原生HTML DOM API进行UI/界面的开发，但是现在项目上基本都在使用“组件式开发”——比如使用三大框架“React”“Vue”“Angular”——通过使用框架提供的“组件”这种更高维度的抽象、对HTML DOM的相关API进行底层封装，确实能够提高开发效率，尤其是在有比如ant-design、element ui、taro ui等等第三方UI库的情况下，能够极大地提高开发效率。

以ant-design中的Button组件为例，如果使用原生的HTML+CSS来实现，需要写这么多代码：

<button type="button" class="ant-btn ant-btn-primary">
  <span>Primary Button</span>
</button>

而如果使用React写法，则可以把代码简化成：

<Button type="primary">Primary Button</Button>

可以看出，使用React的JSX语法书写的代码量，得到了明显地简化。
以官方提供的react-simulator-renderer、react-renderer为例，我们需要关注的第二棵树就是“React组件树”，而React组件树在运行时的表现、就是React虚拟DOM树（React Fiber）。

（3）文档模型树DocumentModel

接下来，我们就看看这第三棵树——文档模型树/DocumentModel。

既然我们能够使用React这种框架、使用JSX这种语法、进行UI开发了，那么为什么需要这第三棵树呢？
这是为了对“搭建”更友好——考虑一下，如果直接使用React的JSX语法、使用对JSX的抽象语法树（AST）进行可视化搭建的操作，那么对搭建的开发者要求就提高了——你需要懂编译原理啥的。

既然直接操作JSX的AST难度太高，那么能不能把问题、转化成我们能解决的问题呢？
当然是可以的！

比如，下面是一个使用JSX语法的组件元素：

<dialog>
   <button className="blue" />
   <button className="red" />
</dialog>

而同样的组件元素，可以使用如下的JSON表示：

{
  type: 'dialog',
  props: {
    children: [{
      type: 'button',
      props: { className: 'blue' }
    }, {
      type: 'button',
      props: { className: 'red' }
    }]
  }
}

对普通的JSON对象进行操作，相信绝大部分前端程序员都能做到——而且JSON这种形式，也正好适合在浏览器中进行操作的形式。

3. 读懂低代码引擎的《搭建协议》

《搭建协议》可以看成低代码引擎的“DNA”，描述了搭建的蓝图；而project模块可以看成低代码引擎的“RNA”，是蓝图的一个实现。

行文到此，其实我们应该就能理解官方文档中这句话的意思了：“编排的本质是生产符合《阿里巴巴中后台前端搭建协议规范》的数据，在这个场景里，协议是通过 JSON 来承载的”。
我们使用低代码引擎进行页面UI的搭建，搭建的最终结果其实是一棵UI树，而且是一棵用JSON表示的UI树。
如果做个类比的话，《搭建协议》可以看成低代码引擎的“DNA🧬”，描述了搭建的蓝图；而project（模型）可以看成低代码引擎的“RNA🧬”，是蓝图的一个实现；而搭建的UI界面、就是根据DNA/RNA中的蓝图生产出来的蛋白质。

4. 让“搬砖”，更简单

让“搬砖”，更简单…

可视化编辑器的“拖拖拽拽”（Drag & Drop）操作，其实是通过让用户做“选择题”（选择组件）“填空题”（修改配置），来完成一个UI页面的设计。

大家经常把“低水平重复”的简单工作、比喻成“搬砖”——而低代码可视化搭建呢，其实可以让这种低价值的“搬砖”、变得更加简单，从而让我们从简单任务中解放出来。

（1）“砖块”：组件/Components

就像建筑工人用“砖块”砌墙一样，我们使用“组件”进行页面搭建，“组件”就好比我们的“砖块”。在可视化编辑器里，我们通过所见即所得地拖拽形式，进行页面的布局、组件的定位，形成我们所期望的页面。

（2）“胶水”：设置器/Setters

我们页面中的组件，往往是需要接收Props参数，而设置这个“参数”，就好比是在组件上涂了一层“胶水”，将组件嵌入到页面中去。而这层“胶水”代码，就是使用低代码引擎的设置器/Setters。

最终，就是是搭积木一样，可视化编辑器就是我们的“工作台”，将各个组件“组装”成我们想要的模样，然后涂上一层“胶水”代码，最终实现一个页面的搭建。

02、编排模块01-搭建的"本质"