低代码搭建

低代码搭建

低代码开发就是开发人员可以通过编写少量代码就可以快速生成应用程序的一种方法。我们有时把“低代码”作为名词用,这时候我们把它看作一个像 Python 语言和 C# 语言一样的一种“东西”。我们有时也把“低代码”作为动词用,这时候它表达的是它字面上代表的一种应用程序开发方式,因为用这种方式开发应用程序时,你需要手写的代码比通常的开发方式要少。使用低代码开发平台类似于使用 IDE,因为它包含了一套可以供开发人员直接使用的功能,和一套供开发人员使用的工具。然而,它实际上能提供的远远超过一个传统的 IDE。简单来说,低代码开发就是将已有代码的可视化模块拖放到工作流中以创建应用程序的过程。由于它可以完全取代传统的手工编码应用程序的开发方法,技术娴熟的开发人员可以更智能、更高效地工作,而不会被重复的编码束缚住。相反,他们可以将精力集中于创建应用程序的 10% 部分,并使其具有与众不同的功能。

低代码配置化系统

低代码搭建系统的基础是搭建编辑器,使用可视化的方式实现页面搭建,支持组件 UI 编排、属性编辑、事件绑定、数据绑定,最终产出符合搭建基础协议规范的数据。其往往包含以下模块:

  • 属性面板:低代码编辑器内部用于组件、区块、页面的属性编辑、事件绑定、数据绑定的操作面板。

  • 画布面板:低代码编辑器内部用于 UI 编排的操作面板。

  • 大纲面板:低代码编辑器内部用于页面组件树展示的面板。

  • 渲染引擎:对低代码编辑器产出的符合搭建基础协议规范的最终数据进行解析并渲染出页面的引擎。

  • Schema2Code:支持将符合搭建基础协议规范的数据转化为面向小程序等多端可渲染代码的工具或者是系统

在业务中台化的背景下,低代码搭建会允许我们在搭建基础协议规范约束下,完成低代码编辑器内核的标准统一以及低代码搭建中台能力的输出,帮助业务方快速孵化本业务域中后台研发系统。在物料规范的约束下,完成业务组件、区块、模板等各类物料的标准统一,各类中后台研发系统生产的物料可借助物料中心进行跨系统流通,通过丰富物料生态的共享提升中后台研发系统的效率。

优劣分析

低代码开发的好处主要有以下四点:

  • 速度:使用低代码开发,你可以同时为多个平台构建应用程序,并且在几天甚至在几小时以内就可以向项目相关人员提交工作示例。

  • 更多的资源:如果你在一个大型项目上工作,使用低代码开发,你就不必再等待具有专业技能的开发人员完成另一个冗长的项目,这意味着项目可以更高效、以更低廉的成本完成。

  • 低风险/高投资回报率:使用低代码开发,意味着强大的安全流程,数据集成和跨平台支持已经内置,并且可以轻松定制,这通常意味着更低的风险,并且可以将更多的时间集中在业务逻辑的实现上。

  • 快速部署:项目上线总是会让人神经紧张。而使用低代码开发,部署前的影响评估可以确保你的应用程序按预期工作。如果有任何异常发生,只需要一次单击,你就可以回滚你所做的所有改变。

物料系统与组件分类

  • 业务场景搭建能力:可视化搭建、配置辅助编辑(JSON)、配置定向输出

  • 业务场景配置能力:商业规则(Biz Rules),场景化切割

  • 业务组件容器沉淀:端约束(Terminal Constraints),应用加载、数据采集、布局编排、组件通信

  • 业务组件物料沉淀:商业能力模型(Biz Model),电商域(会员,订单,物流,退款),CRM 域

  • 领域界面渲染引擎:表单域(Form),卡片域(Card),表格域(Table)

  • 通用组件物料沉淀:设计语言(Design Language),Ant Design,基础业务组件(Biz Components)

  • 通用视图底层框架:React,View,Angular

基于上面的业务视角的分类,我们可以在技术视角对组件层次再进行梳理:

  • 基础组件(Basic Components):前端领域通用的基础组件,阿里经济体前端委员会官方指定的基础组件库是 Fusion Next/AntD

  • 图表组件(Chart Components):前端领域通用的图表组件,有代表性的图表组件库有 BizCharts

  • 业务组件(Business Components):业务领域内基于基础组件之上定义的组件,可能会包含特定业务域的交互或者是业务数据,对外仅暴露可配置的属性,且必须发布到公域如阿里 NPM ;在同一个业务域内可以流通,但不需要确保可以跨业务域复用

  • 低代码业务组件(Low-Code-Business Component):通过低代码编辑器搭建而来,有别于源码开发的业务组件,属于业务组件中的一种类型,遵循业务组件的定义;同时低代码业务组件还可以通过低代码编辑器继续多次编辑

  • 布局组件(Layout Components):前端领域通用的用于实现基础组件、图表组件、业务组件之间各类布局关系的组件,如三栏布局组件

  • 区块(Block):通过低代码搭建的方式,将一系列业务组件、布局组件进行嵌套组合而成,不对外提供可配置的属性。可通过 区块容器组件 的包裹,实现区块内部具备有完整的样式、事件、生命周期管理、状态管理、数据流转机制。能独立存在和运行,可通过复制 schema 实现跨页面、跨应用的快速复用,保障功能和数据的正常;

  • 页面(Page):由组件 + 区块组合而成。由 页面容器组件 包裹,可描述页面级的状态管理 和 公共函数

  • 模板(Template):特定垂直业务领域内的业务组件、区块可组合为单个页面,或者是再配合路由组合为多个页面集,统称为模板

  • 基础组件:

    • 基础组件定义了其 HTML 布局方式,与数据绑定规范,典型的譬如不包含指令/自定义元素的 Vue.js 模板。

    • 基础组件会提供渲染函数,执行数据到界面绑定的真实渲染操作。

    • 基础组件是系统的原子单元,由系统预置,不可再进行切分,也不可进行嵌套。

  • 组件样式:

    • 组件样式定义了组件统一的样式规范。

    • 仅有基础组件可以接收样式对象,根据统一的渲染规则渲染为样式组件。

  • 布局组件:

    • 组件布局会包含多个特殊的布局组件,允许某个业务组件为自身及其子组件进行布局。

  • 业务组件

    • 业务组件即可以有部分预置,也允许用户界面化自定义(Widget)。

    • 业务组件是对于样式组件、布局组件与数据的集合,最简单的业务组件譬如 Text 基础组件加上文本内容数据。

    • 业务组件会关心数据的获取方式,并且负责为自身的子基础组件渲染数据;业务组件会根据指定的子基础组件的 Key 值,将自身所具有的数据根据 Key 值提取,传递给子基础组件的渲染函数。

    • 业务组件仅提供无参渲染函数,换言之,某个业务组件的数据,应该由服务端直接指定,或者指定其获取方式。

  • 嵌套结构:描述了业务组件的嵌套层次。

    • 业务组件可以包含多个基础组件或者业务组件作为其子组件,使用布局组件描述组件间布局方式。

    • 业务组件具有唯一 ID,扁平化存放,允许根据 ID 进行动态索引,允许进行自身局部刷新;react-jsonschema-form 就是典型的业务组件。

    • 业务组件会将数据按照子基础组件 Key 值切分传递给自身的子基础组件,并且调用子基础组件的渲染函数,得到渲染后的界面。

    • 业务组件会将自身的子业务组件当做黑盒看待,业务组件仅会存放子业务组件的 ID,并且直接调用子业务组件的无参渲染函数,得到渲染后的界面。

    • 以 BList 业务组件为例,如果业务场景是每行结构皆相同的列表,那么 BList 会包含某个 List 基础组件,调用其渲染函数获得界面;如果业务场景是复杂的,每行不一致的业务组件,那么 BList 会包含多个子业务组件,并且调用每个业务组件的无参渲染函数,得到渲染后的界面。

    • 以 BDataGrid 业务组件为例,如果业务场景是每列皆为基础组件,那么直接由 BDataGrid 获取数据,并且根据每列的 Key 值,调用对应基础组件的渲染函数;如果业务场景是某些列为业务组件,那么会根据根据指定的业务组件 ID 调用对应业务组件的无参渲染函数,该业务组件的数据规则由服务端指定。

    • 该嵌套方式可能产生 N+1 Query 问题,由 API 模块或者服务端缓存解决。