本文将主要分享我对低代码平台的理解，从多个角度和问题来看待低代码平台的设计。我觉得低代码平台的核心在于模型设计，包括控制模型、组件模型、画布模型等等。希望看完这篇文章，你能够知道：低代码平台核心的底层逻辑是什么？为什么常见的低代码平台包括“控制区”、“布局区”和“属性编辑区”？低代码平台的控件、组件和画布的性质是什么？如何让低代码平台支持跨平台？如何让低代码平台支持自定义数据源？让我们开始吧。一、你见过的低代码平台近年来，国内出现了各种低代码产品，在降低成本、提高效率、提高质量方面发挥着重要作用。低代码平台的业务场景越来越广泛：自定义表单、页面创建、活动详情页、工作流场景、数据报表、大屏数据报表、数据表格、白板笔记等。也有很多成熟的低代码产品布局：阿里易贷、腾讯云贷、百度爱贷、清流、JeecgBoot、马良等。下图腾讯开源的tmagic平台是我们最常见的低代码平台布局方式：（这张图来自：tmagic)包含三个核心模块：控件区：显示平台支持的控件，用户可以将控件拖放到布局区，显示控件对应的UI组件样式；布局区：用于承载控件对应的UI组件，用户可以对各个UI组件进行布局，直观的查看页面效果；属性编辑区：用于显示控件的支持情况，可以针对每个控件对应的UI组件，更灵活的定制每个控件的配置内容。那么，为什么产品会采用这种布局呢？2、换个角度思考低代码平台设计我们在解决问题的时候，经常会用到两种方法：自上而下的方法：从目标出发，拆解提炼问题，找到解决方案；自下而上的方法：总结各种零散的信息，得到正确的方法和结论。我们尝试用自上而下的方式来思考低代码平台的设计：通常在团队决定是否开发低代码平台之前，会经过头脑风暴、灵感讨论、业务需求分析，然后确定开发低代码平台的原始需求。假设这样一个场景：掘金社区的首页布局比较简单。当需要添加或调整某些模块时，需要更改项目代码、打包、测试和发布。如果此时有首页设计平台，运营商可以自由调整页面布局，也可以针对不同的节日、活动调整不同的首页布局。基于这样的场景，我们采用自上而下的方法，从目标出发，将问题拆解细化，寻找解决方案。1.确定目标。我们的目标是能够灵活布局社区首页：2.拆解细化问题。如果要实现掘金首页的灵活布局，需要将首页中的模块提取到各个独立的控件中：如果每个控件都需要能够灵活配置，而我们也需要能够任意配置部分控件：3、寻找解决方案根据前两步的分析，我们可以确定一个粗略的解决方案：需要实现一个支持自由拖放布局的设计平台；该平台支持将不同的控件拖放到页面中；每个控件支持不同的自定义配置；设计器支持导出页面结构，渲染器支持渲染页面内容。所以我们有以下解决方案：这就是为什么常见的低代码平台都有“控制区”、“布局区”和“属性编辑区”的原因。通常交互逻辑是这样的：从“控件区”拖拽一个控件到“布局区”，将控件渲染成相应的组件；选择组件，在“属性配置区”显示该组件支持配置的所有属性；修改“属性配置区”，更新“布局区”中组件的样式。这是最简单的过程。3.思考更通用的低代码模型低代码平台创建的页面本质上不一定是单个页面，也可以是由多个页面组成的Web应用。因此，我们可以将上面的例子抽象成一个更通用的例子。低代码平台模型：该模型定义了低代码平台创建的页面结构，最终渲染由相应的渲染器渲染。这有点像VNode树。（图片来源：https://v3.cn.vuejs.org/）对于Vue来说，核心问题是“如何创建VNode”和“如何渲染VNode”。接下来我们通过TypeScript接口形式定义如下结构：可以发现，单页应用和多页应用的关系是，通过给单页应用添加路径配置，多个单页应用应用程序可以组合成一个多页面应用程序。此时我们有一个更通用的低代码模型，并使用TypeScript接口定义每一层的结构。可见，低代码平台的核心在于模型设计，定义各个部分的模型。4.控制区的控件没那么简单1.什么是控件？控件的本质是一个标准的JSONSchema对象，用于描述最终渲染的组件。在低代码平台中，将控件拖动到布局区域，会显示相应的组件样式。以“用户信息控件”为例：constUserInfo={name:'UserInformationControl',type:'UserInfoComponent',//指定渲染的组件名称config:[{label:'Avatar',type:'input',value:'https://a.com',},{label:'nickname',type:'input',value:'pingan8787'}]}通常我们会在控件对象中定义一个类型（或者其他名称),用于指定控件呈现的组件的名称。例如，在Vue中，可以使用type值以的形式动态渲染组件。控件就像组件的手册。它只是描述组件，描述它长什么样，有什么行为，配置等信息。2.控件的优点是什么？控件被定义为标准的JSON对象，还有其他优点如：可以实现控件的跨平台适配，可以在不同的平台/组件库上渲染不同的组件。目标平台只需要根据模型渲染不同的组件即可。3、控件如何实现远程组件的动态加载？一种常见的解决方案是为每个控件指定远程组件的地址（比如设置path属性），当控件开始被拖动时，发送一个获取远程组件的请求：constUserInfo={name:'UserInformationControl',type:'UserInfoComponent',//指定渲染组件名称路径:'https://a.com/UserInfoComponent.js',//远程组件地址config:[{label:'Avatar',type:'input',value:'https://a.com',},{label:'nickname',type:'input',value:'pingan8787'}]}以Vue为例，当远程Vue组件被获取后，就可以通过Vue提供的动态组件进行注册和使用。完整流程如下：开始拖拽“控制区”控件，向服务器发起获取远程组件的请求；获取远程组件后，将其注册到项目中；释放控件，将组件内容渲染到“画布区域”。当然，考虑到编辑器的性能优化，避免每次拖拽都发送获取组件文件的请求，我们可以这样优化：使用请求缓存，如果是重复请求，读取最后一个从缓存中请求结果；对于常用的基础组件提前发送请求并保存在本地；将请求的组件缓存到本地，下次请求同一个组件时读取缓存的结果；etc.5.canvas区的canvas没那么简单1.什么是canvas？画布的本质也是一个标准的JSON对象，是我们用来渲染页面的数据源，通常包含了整个页面的结构和配置信息。将控件拖入画布并更新组件配置时，画布会更新。我们简单的根据掘金首页（不考虑多页情况）构造一个模型：constJuejin={title:'掘金首页',favicon:'./favicon.icon',components:[{name:'用户信息Control',type:'UserInfoComponent',config:[{label:'Avatar',type:'input',value:'https://a.com',},{label:'昵称',type:'input',value:'pingan8787'}]}]}在上面的模型中，画布中的每个组件都被定义并存储在components数组下。每个组件都包含自己的名称、类型、配置等信息，在渲染器中进行渲染，您可以：根据类型在配置区渲染组件；根据标签在配置区渲染表单的标签文本；根据值在配置区渲染表单的值。2.画布也有丰富的配置。对于canvas模型来说，最重要的就是组件列表，也就是前面的components数组。对于每个组件来说，最重要的信息包括：事件模型信息：包含了组件绑定的一些事件（如事件名称等）；动画模型信息：包含绑定到该组件的一些动画效果（如旋转、放大等）；UI样式模型信息：包含绑定到该组件的一些UI样式（如背景色、字体大小等）；数据/数据源模型信息：包含绑定到该组件的一些数据源相关的配置（如数据源接口地址等）。以“事件模型信息”为例，当页面配置了一个按钮后，该按钮往往可以做以下事情：打开一个链接；打开一个弹出框；打开APP；刷新页面;发送请求；等等。此时，按钮可以触发很多动作。如果每一个事件处理逻辑都写在组件中，会导致组件极其臃肿，耦合在组件中，导致可维护性很差。为了降低组件与事件处理逻辑的耦合度，我们可以在组件与事件处理逻辑之间加一层，即事件总线：实现通用的组件派发事件到事件总线上，不同的业务场景监听事件，并执行具体的事件处理逻辑。通过事件总线，将调度事件和监控事件相互解耦。解耦完成后，还可以实现跨平台的功能。对于同一个事件的派发，只需要在不同的平台监听该事件，实现不同的处理逻辑即可。能。6、数据源设计所谓“数据源”，是指低代码平台中的数据来源。通常，数据源根据业务需要可以分为两种：静态数据源：数据绑定在页面配置中，在最终效果页面中，直接使用页面配置中的数据，不需要获取数据通过界面；动态数据源：一般在配置中保存数据源的接口，不绑定数据。当到达最终效果页面时，客户端需要发送请求获取数据。1.静态数据源的流程在低代码设计平台中，平台首先请求数据，用户选择指定的数据保存在页面配置中。例如，当我们已经有一个横幅列表界面，我们需要选择其中一个添加到布局区域：步骤如下：用户在“控制区域”中选择“轮播控件”并拖动进入“布局区”；在“布局区”中点击“轮播控件”组件，打开“属性配置区”；在“属性配置区”选择“选择横幅”，平台向服务器发送请求获取横幅列表；打开“选择横幅框”以显示横幅列表。用户选择所需的横幅图像；单击“确定”关闭“选择横幅”对话框，在“布局区域”的“轮播控件”组件中插入数据，完成选择。在“选择横幅”弹出框中，用户选择指定的数据并保存到页面配置中。访问最终生成的效果页面时，会直接显示选中的banner图片。2.动态数据源的流程与静态数据源相比，动态数据源更加灵活。用户指定数据源界面后，当界面数据发生变化时，最终效果页可以动态改变显示的内容。例如，当我们已经有一个banner列表界面，我们可以在管理后台添加不同的banner，最终效果页面可以显示新的banner，用户只需要在设计时指定banner列表界面即可：步骤为如下：》选择“轮播控件”，拖入“布局区”；点击“布局区”中的“轮播控件”组件，打开“属性配置区”；选择“配置横幅”属性配置区”，配置“接口地址”和“转换规则”；选择完成后，单击“确定”关闭“选择横幅”弹框，保存配置的“接口地址”和“转换规则”"页面配置中的"数据，配置完成。当用户访问最终效果页面时，页面会首先调用配置的"接口地址"获取远程banner列表；接口返回的数据将转换为所有数据通过“转换规则”的组件格式。这样最终的效果页每次都能显示最新的数据，做到完全动态化。3、添加数据源适配器当需要解耦两个高耦合的逻辑时，可以通过添加适配器方法来解耦。因此，也可以在数据源端为“UI组件”和“界面数据”添加一个适配器。用于去耦。理想的状态应该是：UI组件只暴露组件支持的配置和方法，而不关注什么业务使用组件；接口数据不需要关注数据被哪个组件使用。因此，我们添加了“静态数据源”和“动态数据源”的数据适配器。“选择横幅”弹出框组件统一参数。同样，在步骤6中，将弹出组件返回的数据结构通过“数据适配器2”转换为“横幅组件”所需参数的数据结构。当动态数据源在第6步时，界面返回的数据会通过“数据适配器”将界面数据转换为“横幅组件”的统一参数数据结构。其实综上所述，通过各种数据适配器将各种来源的数据结构转换成组件的参数模型就可以了。好处也很明显：更换数据源时，只需要按照组件参数模型连接接口即可实现各种数据适配器，无需改变原有逻辑；更换UI组件库时，只需按照组件参数模型连接UI组件，即可实现各种A数据适配器，无需改变原有逻辑。4.总结数据源设计根据前面的方案，我们有了数据源的主要方向。主要核心是：通过定义组件接口模型和适配器模型，我们可以方便地开发任何组件和适配器，根据定义的模型，其他开发者也可以方便地进行开发。7.总结低代码平台的作用是降低成本，提高效率，提高质量。核心在于模型设计，降低各个功能点的耦合度，让平台支持跨平台。本文采用自上而下的方式介绍低代码平台的设计思路，从目标出发，拆解提炼问题，寻找解决方案。后面将自己对低代码平台的几个核心模块的理解一一分析，重点是核心模块的模型设计和配置。这篇文章是我在几个低代码平台之后的理解和总结。希望对您有所帮助。低代码平台的未来是无限的。这是我第一次写低代码相关的文章。如有错误欢迎指正~~
