Links

组件系统

低代码搭建系统

低代码配置化系统

物料系统与组件分类

  • 业务场景搭建能力:可视化搭建、配置辅助编辑(JSON)、配置定向输出
  • 业务场景配置能力:商业规则(Biz Rules),场景化切割
  • 业务组件容器沉淀:端约束(Terminal Constraints),应用加载、数据采集、布局编排、组件通信
  • 业务组件物料沉淀:商业能力模型(Biz Model),电商域(会员,订单,物流,退款),CRM 域
  • 领域界面渲染引擎:表单域(Form),卡片域(Card),表格域(Table)
  • 通用组件物料沉淀:设计语言(Design Language),Ant Design,基础业务组件(Biz Components)
  • 通用视图底层框架:React,View,Angular
基于上面的业务视角的分类,我们可以在技术视角对组件层次再进行梳理:
  • 基础组件:
    • 基础组件定义了其 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 模块或者服务端缓存解决。