低代码搭建系统

物料系统与组件分类

• 业务场景搭建能力：可视化搭建、配置辅助编辑（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 模块或者服务端缓存解决。