低代码平台架构~理念设计与术语解析

前言

零代码、低代码的概念在整个全球行业内已经流行了很长一段时间，在以前人们对于低代码的概念往往还只是在那种建站系统的二次开发上，能够通过某个商城的PHP系统， 一键安装或者卸载某个已经写好的模块，这恐怕是早期大多数人对于低代码的认识。而笔者本人刚开始做程序员的时候便是一名这样的PHP开发人员，那个时候我还没有开始做前端。

而随着时间慢慢的发展，越来越来的企业开始具有类似的中台业务需求，使得原本已经沉寂的低代码领域开始重新焕发生机（主要是闻到了商业的气息^_^）。 当然现在的低代码平台早就不是以前那种固定模块的安装与拆卸，而是具备更加强大的生成与渲染能力，当然两者之间具有一些通性如：

• 可视化页面搭建：通过简单的拖拽完成应用页面开发，对前端技能没有要求或不需要特别专业的了解。

• 可视化模型设计：与业务相关的数据存储变得更容易理解，甚至大多数简单场景可以做到表单即模型，模型字段的类型更加业务化。

• 可视化流程设计：不管是业务流程还是审批流程，都可以通过简单的点线连接来进行配置

这些的共同点，使得对于使用低代码平台的人员而言，往往感受到的区别不大，他们都能够使得一个技术小白不受束缚的完成大多数业务应用的搭建。 但是对于开发低代码平台的工程师们而言，却是截然不同的世界，对于一个想要了解和开发低代码平台的工程师而言，往往一开始就会陷入一种迷惘，在各种新的术语词汇面前不知所措， 因此作为整个低代码平台设计规划文章的第一步，去让大家理解并清楚各个术语模块及其理念是十分重要的前提条件。

什么是低代码(low-code)?

简单点来说，低代码是一个可视化的平台，他提供了一些点、线、面的操作，使得用户可以通过这些基本的操作来完成一个业务系统功能的搭建， 同时也不需要用户关注任何的实现逻辑也仅仅需要关注业务本身，甚至你无需去关注其部署运维等一系列操作，当你搭建完成即可立即使用。

低代码平台的组成成分

首先，我们开始介绍一下一个低代码平台的各个组成模块，以使我们对于整个低代码平台的构建有一个整体的认识。对其整体的功能能力有一个大概的认知， 知悉其大致如何去实现以及其能够去实现什么？，可能通过这句话你已经猜到了，低代码并不能够完全根据你的想法去实现对应的业务能力，他所能做的更多是根据各个积木的组成而完成整个系统的搭建， 他更像一个堆积木的游戏。通常来说一个低代码平台往往包括以下基本组成部分：

• 设计器：设计器是综合的载体，即通过我们所见到的低代码编辑器页面本身

• 物料组件：物料组件是最基本的低代码平台组成元素，例如段落、表单、表格、弹窗等等UI元素

• 编排组件：编排组件提供了将基本的物料元素进行组装的能力，比如将多个Input框组装成一个完成的表单

• 画布：画布用于实现组件的拖拽，这是低代码可视化效果的预览

• 出码器：出码器负责将在画布已经组装好的物料生成具体的代码

设计器

低代码的设计器是一个比较宽泛的概念，一般情况下来讲，设计器是一个如下图所示的可视化平台，即我们所使用的低代码编辑器本身。设计器是一个容器平台，他承载了整个低代码的搭建与配置能力。

通常来说一个设计器往往具备如下模块：

• 物料与大纲面板：用于物料组件摆放，我们可以接入平台或者开发自己的物料的组件，所提供的物料将用于后续的画布预览与出码器用于代码生成

• 画布：画布用于组件的可视化拖拽拼装，为我们呈现初步的实际效果预览与拼装操作功能，同时画布也是与出码器沟通的桥梁，用户在画布的每一步操作，都会被出码器记录并最终生成实际的代码

• 插件：插件赋予了低代码平台更加强大的功能，诸如实际效果预览，页面保存等

• 设置器：设置器位于整个设计器最右侧，它是物料属性和用户交互的重要途径，他定义了物料组件的样式、文本内容、事件操作等

物料组件

物料简述

我们将如下图设计器页面的基本UI组件称之为物料，物料是页面搭建的原料，按照粒度可分为组件、区块和模板：

• 组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现；

• 区块：区块是一小段符合低代码协议的 schema，其内部会包含一个或多个组件，用户向设计器中拖入一个区块后可以随意修改其内部内容；

• 模板：模板和区块类似，也是一段符合低代码协议的 schema，不过其根节点的 componentName 需固定为 Page，它常常用于初始化一个页面；

使用物料

物料的定义需要遵守相应的物料协议，通常低代码平台对一个物料会有如下常见约束：形状、方向、大小、数据源、属性等等，通过物料协议的审核之后， 我们便可以将自己对应的物料注册到物料库之中，从而得以开始使用这个物料。当然这通常是一个最简单的物料的实现，对于一个相对复杂的物料，比如区块容器， 我们还需要支持对其他物料的嵌入交互等更加复杂的逻辑。

编排组件

从本质上来说，编排组件是一种更加高级的物料组件，与基本的表单、段落、文本等常见单一物料相比，编排组件往往是一个容器，通常来讲，一个编排组件往往如下图所示， 具有不同的区块，每一个区块都是一个单独的容器可以用于包含其他的物料组件，与普通的物料所更加不同的是，编排组件通常具有生命周期，而这其实与现在的SPA框架的组件生命周期是一致的。

画布

画布是整个低代码编辑器中最为核心的视觉元素，一个画布由物料组件与组件数据共同组成，而其实现则通常由渲染层与适配层共同组成，渲染层成可以理解为React的Virtual DOM一样， 负责将物料的schema数据渲染成实际的视觉元素。而其渲染的方式也要区分不同的情况，比如预览渲染和设计模式渲染，预览渲染只需要在画布上生成一个UI的预览效果即可，他们并不是实际的 React Component代码，而设计模式渲染则不同，其本质上便是一个实质的React页面，也因此他支持更加的功能例如：事件绑定、国际化、UI交互等等，当然设计模式渲染也需要更加的性能消耗， 因为其本质上即是实质的React页面组件

出码器

出码器介绍

所谓出码，即将低代码编排出的物料(schema)进行解析并转换成最终可执行的代码的过程。出码是为了更高效的运行和更灵活地定制渲染，通长来讲出码分为三种不同的形势：

• 浏览器出码：在浏览器即时出码，适用于小型即时需求，即刻出码即刻使用

• 服务端出码：通过服务端脚本，在服务器上自动出码，适用于自动构建并部署发布

• 自定义出码：在一个大型项目中，往往需求也更为复杂，我们也许需要支持客户端出码并自动发布也同样需要支持对应的服务端操作，此时便需要更为强大的自定义功能

出码原理

首先在介绍出码器出码的原理之前，我们需要先介绍另外一个东西数据源引擎。什么是数据源引擎？，每一个低代码引擎都需要一个用于保存物料、画布、用户操作数据的地方， 而这便是数据源引擎。出码器遵守数据源引擎协议，每当用户执行出码操作时，出码器会调用数据源引擎的控制器函数，读取里面的schema物料数据信息，在基于JSON等数据源进行操作并生成对应的代码。