前言
大家好，我是多肉攻城狮，这一次，我们来聊一聊前端低代码平台的构建。近些年来，随着Saas行业的高速发展，低代码的概念也逐渐流行了起来，而低代码产品也越来越多的出现在我们的身边，像国外的Mendix，国内的宜搭、苍穹、简道云等等。而我司自研的低代码应用构建平台也已服务了十余B端生产项目，基于这种新型的开发方式，图形化的拖拉拽配置界面，并兼容了自定义的组件、代码扩展，确实在B端后台管理类网站建设中很大程度上的提升了效率。多肉攻城狮也想通过这篇文章与大家对于前端低代码平台的构建进行交流，分享。
低代码
说到低代码，首先我们需要了解一下什么是低代码。
低代码（Low-Code Development，LCD），开发者主要通过图形化用户界面和配置来创建应用软件，而不是像传统模式那样主要依靠手写代码。低代码开发模式的开发者，通常不需要具备非常专业的编码技能，或者不需要某一专门领域的编码技能，而是可以通过平台的功能和约束来实现专业代码的产出。
实际上，一个可用的低代码平台的搭建并非难事。首先，我们需要明确，低代码平台解决的最大问题是复用，复用也是目前前端开发中的一个重要课题，特别是当前的主流前端js框架，例如 vue ， react 等，都是组件化的开发方式，又如形形色色ui组件库的出现，像 ant-design ， element 等都是来解决重复造轮子的问题。
vue组件化开发示意图，图片截取自vue官方网站
简易版的低代码平台
我们在前端开发脚手架中，通常会创建一些通用的组件，然后在各个需要这个组件的地方进行引用，来提升开发效率。在脚手架中引用一些ui组件库也是出于这样的目的。后来，为了防止重复的造轮子，我们通常会对一些成熟的ui组件库中组件根据我们的业务需要进行二次封装，形成一个具有更多功能的区块，例如B端系统中最为常见的列表数据增删改查界面就是这样一个区块。
图片截取自Ant Design Pro of Vue
我们可以通过一个json数据来描述这个区块，数据大概是下图所示的样子，包含了这个区块的编码，中文名称，以及可传入到这个区块中的属性及初始属性值，例如这个表格包含的列信息、按钮信息等等。而这个json也是低代码平台搭建中最为核心的部分，它在后续介绍的可视化拖拉拽页面设计中扮演极其重要的角色，它是页面设计和页面渲染间串联的纽带。
当我们展示类似的界面时，只需要在页面文件中引用这个搜索表格模板组件，再把对应的描述json信息传递到组件内就可以了。但是这样似乎还是采用了编码的方式去解决复用问题，距离我们的低代码还有些距离。
这时，我们可以将这些可动态控制的组件属性通过在线表单进行填写，存储到数据库中。前端工程中，我们可以进行判断，将使用这个区块模板的页面路由所对应的组件都指向我们封装好的列表增删改查模板。这样，进入到这个页面，我们只需要将之前存储到数据库的区块描述信息通过api接口获取到，再传递到组件内部，将json数据中我们设置的模板属性值赋值到组成模板的各个组件上就可以完成这个模板的渲染了。这也是我们在实现可视化拖拉拽低代码平台之前所使用的方式。这种方式虽然形式上非常简单，却解决了我们组件复用的问题，并且在调整组件属性时只需要通过在线的表单配置，无需打包、发版。这个界面渲染的流程便是低代码平台的核心逻辑：通过组件元数据拼装成一个页面的描述信息，然后通过渲染器组件将描述信息转化页面dom元素。
我们上面实现的流程是不是除了图形化的配置外，基本可以通过在平台上界面的配置实现一个搜索表格页面的开发了，并且不需要专业的编码技能。
当然，上面的过程中所使用到的模板实际是我们预设好的，只是通过我们传递进去固定属性的不同属性值进行一些差异化的渲染，一些按钮等自定义功能的扩展也只能通过插槽等形式去实现。但当我们想要实现其它模板的界面时，就显得无能为力了，因为组成模板的组件是我们提前预设好的，并不是通过组件像搭积木一样灵活搭建的。
后记
我们知道当前的一些低代码平台是通过页面设计器通过拖拉拽的形式进行页面配置的，例如上文介绍到的宜搭等。在后面的文章中，我们也将重点围绕图形化界面进行讨论。例如拖拽的实现，属性值调整后画布中的组件如何联动，页面的描述json是如何生成，又是如何渲染为组件的等等。感兴趣的小伙伴点一波关注吧！我们下篇文章见。
