浅谈低代码平台

一、什么是低代码开发平台

低代码开发平台是一种软件开发工具，旨在帮助开发人员以更快、更简单的方式构建应用程序。它提供了一种可视化的开发环境和一系列可重用的组件，使开发人员能够通过拖放、配置和少量的编码来创建应用程序。

低代码开发平台的主要思想是通过抽象化和自动化的方式，减少传统软件开发中的手工编码工作量。它提供了可视化的界面和工具，使开发人员能够快速构建应用程序的用户界面、定义业务逻辑和集成外部服务。

使用低代码开发平台，开发人员可以通过简单的操作完成复杂的任务，而无需深入了解底层的编程语言和技术。这使得开发过程更加高效，减少了开发时间和资源成本。

低代码开发平台适用于各种应用程序开发场景，包括内部企业应用、移动应用、工作流程管理系统等。它们提供了丰富的功能和集成选项，使开发人员能够快速构建出符合业务需求的应用程序。

总而言之，低代码开发平台是一种工具，通过可视化的方式帮助开发人员快速构建应用程序，减少手工编码的工作量，提高开发效率。

二、lowCode | noCode | proCode 的区别

了解了什么是低代码平台后，我们来区分下什么是 lowCode、noCode 和 proCode 这三种类型对应着不同的开发方法或理念。

lowCode（低代码）是一种开发方法，旨在通过使用可视化界面和少量手写代码来加速应用程序的开发过程。它使用可视化工具和组件库来简化开发流程，并减少手动编写代码的需求。
noCode（无代码）是一种更加极端的开发方法，它完全摒弃了手写代码的需求。它使用可视化工具和自动生成的代码来创建应用程序，使非技术人员也能参与开发过程。
proCode（专业代码）是一种传统的开发方法，它强调使用编程语言和开发工具来手动编写高质量的代码。这种方法通常需要开发人员具备深入的编程知识和技能。

这些开发方法各有优劣，并适用于不同的开发场景和需求。lowCode 和 noCode 可以加快开发速度和降低技术门槛，但可能受限于可视化工具的功能和灵活性。而 proCode 则提供了更大的自由度和控制力，但需要更多的编程知识和时间投入，既然我们将的低代码开发平台，自然后续我们就讲如何开发一个简单的低代码开发平台。

三、低代码页面设计器雏形

一个简单的应用是由多个页面组成的，而在低代码设计器中主要也是在对页面进行设计，传统的页面设计器我们可以划分为左、中、右3个区域，分别是组件区(也可以叫物料区，后续都是叫物料区)，画布区，属性编辑区，当我们从左侧拉一个组件(或物料)进画布区时，画布区渲染对应的组件，同时当点击选择画布区的组件时，右侧属性编辑区可以编辑组件的属性。

核心流程是：

1、选择物料区组件拖拽进画布区 2、点击选择画布区中的组件修改属性 3、属性编辑区编辑选中的节点，并同步修改组件属性组件能生效

接下来就是对这个核心流程做任务拆解。

![[baseLayout.png]]

3.1 物料区

我们上面将一个页面设计期拆分为三个区域，现在我们就来分别设计下三个区域的内容，首先是物料区，一个简单的物料有我们看得到的和看不到的属性组成，看得到的属性有物料的图标和名称，看不到的属性有对应画布中真实组件，使用TypeScript中接口来描述就如下所示。

ts 复制代码

interface Material {

    icon: string; // 图标

    id: string; // 唯一值

    label: string; // 名称

    type: string; // 对应的真实组件

}

定义好接口描述后就需要考虑如何来创建对应的物料模型对象了，可以采用本地静态 json 配置方式也可以使用 cli 方式，在这里我们使用本地 json 配置方式创建物料，创建完物料模型对象后下一步的就是如何去解析物料模型对象了，以 Vue 框架为例(这里我们使用 vue 框架搭建整个项目)，左侧可以使用 v-for 循环遍历整个物料模型对象数组(物料多个采用数组方式存储)渲染出物料名称和物料图标。

3.2 画布区

左侧画布区设计完后接下来就是中间的画布区，也是我们设计的重点了，这里参考浏览器解析HTML文档结构，使用自顶向下的设计方法，先设计页面再设计页面内容，一个基本的页面包含页面标题、样式以及页面内容，页面内容可以是由富文本或者页面节点组成，具体使用哪种方式取决于设计者，这里我们是采用的是后者，在 HTML 中是节点叫 Node，Vue 中是叫 VNode，这里我们就定义为 ENode。

ts 复制代码

interface PageModel {

    readonly id: string;

    title: string;

    style: Record<string, unknown>;

    content: ENode[] | string; // 可以是节点 也可以是富文本内容

}

后续就需要考虑页面节点 ENode 模型要如何设计？以 HTML 文档为例，它是由DOM节点组成，然后生成渲染成树结构，因此我们的页面节点肯定也是树结构，DOM 节点是由类型区分的，如 p 元素img 元素等以及不同的 DOM 接口属性也不一致，如 img 元素有 src 属性，p 标签就没有。因此在设计页面节点模型时需要有对应的属性来表示他们的类型，以及模型属性，那么一个简单的页面接口模型就出来了，采用TypeScript 接口描述如下。

ts 复制代码

interface ENode {

    readonly id: string; // 唯一性

    type: string;  // 对应的节点类型

    props: Record<string, unknown>; // 节点属性

    children?: ENode[]; // 子节点

}

模型定义完后下一步就是如何创建模型了，可以使用 json 方式也可以使用拖拽方式生成，低代码常见的方式是使用拖拽的方式生成页面内容，基于物料区的物料模型对象，内置静态 NodeCreate 工厂创建节点，并往 PageModel content 中追加节点。模型对象生成完后接下来就是模型解析了，解析方式有2种

1、简单方式，通过 v-if 、 v-else-if 、 v-else 解析模型 type 并渲染对应组件

vue 复制代码

<ComponentA v-if='type === "compA" '></CompoentA>

<ComponentB v-else-if='type === "compB" '></CompoentB>

2、高级方式，通过动态组件渲染根据 type 属性渲染对应的组件

vue 复制代码

<component :is="type" v-bind="props"></component>

为了后续灵活好拓展这里建议是使用动态组件方式解析模型，解析完后一个简单的画布区就算设计完了，总结一下上面的流程我们首先是需要思考如何设计模型，然后再是考虑如何创建模型对象，最后就是如何去解析模型对象，这个流程会贯穿我们整个低代码的设计，也是低代码设计的核心思想，即模型驱动的设计思想。

3.3 属性编辑区

当从左侧拖拽一个物料进布局区，右侧属性面板渲染编辑组件的属性，根据属性配置动态渲染表单，组件属性编辑的属性配置如何定义？哪里来？模型长什么样？

1、定义模型结构

因此需要提前定义组件能编辑的属性配置，并需要定义使用什么类型的表单控件来编辑对象，如input , number 等。使用当前拖拽的组件类型找到对应的属性编辑配置，模型定义可以根据页面展示的需要，定义可见与不可见的属性。最基础的需有如下三种。

label 属性用于定义用户当前属性编辑的是什么。
setter 属性用于定义使用什么表单控件来编辑组件属性。
default 属性用于定义属性默认值，如图片 width, height 没有默认值导致组件不可见。

ts 复制代码

interface PropsConfig {

    default: unknown; // 默认值

    setter: string; // 使用什么表单控件来编辑属性

    label: string; // 编辑的属性名称

}

2、创建模型对象

模型定义完后接下来就是创建对应的模型对象了，创建模型对象这里简单使用 json 配置方式

3、解析模型对象

模型对象有了后接下里就是解析模型对象了。上面定义的三种属性中，最重要的是 setter 属性，用于定义编辑属性。因此后续重点是开发对应的 setter ，setter 类型是 string 类型，需要更具 setter 值来动态渲染对应的表单控件，即动态表单技术。使用 v-if 的话会导致拓展性不强，不能实现动态编译。动态渲染完对应的表单控件后，需要同步双向绑定(v-model)至对应的组件属性上，完成页面更新。

流程拆分如下：

首先深克隆属性配置，一份用于传入真实组件的 props 中，另一个份用于传入属性编辑区完成属性与配置的双向绑定，由于对象是引用关系，修改同一份属性会同步修改，最后完成页面更新渲染。

那如何知道组件与对应的属性配置关联关系？因此需要有一个组件配置的映射表，且该组件属性配置需要提前加载，如： PropsConfigMap 模型

key: 物料的 type
value: 当前对应的组件属性编辑配置。

ts 复制代码

interface PropsConfigMap {

    [Material.type]: Record<string, PropsConfig>;

}

总结

首先我们通过一个简单的流程从左侧拖拽一个组件进入画布区，然后选择画布区的组件，编辑对应的组件属性完成属性的配置修改，然后将上述流程进行拆分做不同的设计，最后引出低代码开发是采用模型驱动的核心设计思想，即定义模型 、创建模型对象 、解析模型对象三步骤，至此一个简单的页面设计器就设计出来了，而后续功能的完善都是基于上述的流程去做拓展。

"本文正在参加阿里低代码引擎征文活动"