低代码平台设计之渲染器插件和运行时

上篇文章 谈到低代码平台设计的 - 道（战略设计），今天来谈一谈三个具体的功能模块设计，渲染器、插件和运行时

Schema

Schema 可以理解为是配置文件，是对一个业务实体（页面、组件）的描述。有层级结构，代表着组件间的嵌套关系。比如一个图片按钮组件的Schema可以是这样的：

{
        nodeType: ‘button’,
        children: [{
                nodeType: ‘image’,
                data: {
                        url: ‘http://www.baidu.com/logo.png’
                }
        }],
        event: {
                onClick: {
                        eventType: ‘link’,
                        target: ‘http://www.baidu.com’
                }
        }
}

Schema 可以理解为对当前组件的渲染状态的一种描述，Schema 是渲染层执行渲染操作的描述文件，渲染层和各类中间件、插件，可以根据schema 渲染出对应页面，并交由运行时执行。

Schema 就像是DNA，描述全貌，告诉各个构件大到整个应用、小到一个按钮的渲染状态。

Renderer 渲染器

渲染器是我们根据 Schema 渲染出对应平台组件和代码的工具，目前我们设计的渲染器主要有两个，Web渲染器、小程序渲染器。

渲染器即是进行最终页面渲染的载体，也是页面逻辑最终运行的位置。在渲染器，我们需要对各项自定义插件的某些部分提供支持，这就是插件的运行时。

Plugin 插件系统

我们的插件系统包括几个部分：插件注入器、插件CLI支持、中间件

插件是对编辑器功能的增强，帮助用户更方便的配置页面和组件，但目前插件不提供直接注入到运行时的功能。 业务组件是对运行时的功能增加，帮助运行时呈现更丰富功能的组件给用户，不涉及编辑器部分功能。

核心概念：

1. Contribute：插件为编辑器贡献的功能，在插件配置文件中描述，贡献的类型包括：schemas: 右侧属性基本信息配置栏、schemasTab: 右侧属性配置Tab页等
2. Feature：插件的注入处理组件或方法，在插件入口函数中通过register 注册器注册，有三种类型：component: 注册成为可以被插件使用到编辑器中的组件、hook: 插件生命周期钩子函数等
3. Middleware: 中间件是一个纯方法，当调用 context.injectMiddleware(pluginId, key, nodes?) 时，该中间件方法会被注入到运行时中，当组件渲染时，中间件会被调用。接收当前正在渲染的Node对象和已经被运行时处理好的组件接收的props，返回已经经过插件中间卷处理的props，该返回值会被作用与正在渲染的节点上。

使用插件还有另外一个好处，让各个功能模块的代码解耦合，每个功能模块都是独立的代码。理论上每个插件是一个代码库，为了方便，我们用 lerna 管理全部的官方插件，各个业务根据自身情况选择代码管理方式。

整个插件开发模式也非常简单，通过我们的CLI创建项目，修改代码，并发布。

插件发布时，CLI会自动使用Rollup 进行打包，发布到CDN上，并调用接口，通知平台又新的插件。发布完成后，平台管理员操作审核上线，用户可以实现在线安装使用。

在做完整个插件系统后，我们恍然大悟，所有的编辑器功能，包括复制、粘贴、上一层、下一层、字体大小修改…. 等等，都应该是插件。这样，整个低代码平台的核心代码将进一步轻量化，核心代码继续减少，模块与模块、功能与功能之间进一步解偶。

在整个渲染层，我们设计了一个渲染器。由于我们设计的页面需要跨平台，可以在PC浏览器、手机浏览器和各种小程序上运行。运行平台的不同代表调用接口和参数模式的不同。运行时的功能有点类似一个垫片，磨平各个平台间的差异，让我们的代码、页面、渲染器可以在各个平台 上运行。

在插件系统设计出来之后，我们就遇到了一些需求瓶颈。插件是作为编辑器功能拓展而设计出来的，但是有的时候，我们的插件是想要赋予给按钮一个功能，而这个给按钮的功能，需要在整个页面拿到真正的运行环境，比如微信浏览器中运行时，才执行的一段代码。而插件作为编辑器的一部分，是不会影响运营时如何的页面执行的。

比如我们有个插件，是元旦活动页面，用户购买后可以点击按钮抽奖。在这个抽奖按钮，需要用户在点击时，查询接口判断用户是否有过购买，如过有过购买，则可以抽奖，没有购买则弹出提示。

这个动作其实是运行时执行一段逻辑去操作的。

这里就用到了我们设计的另外一个部分，中间件。中间件是插件机制的一部分，用来帮助插件为运行时注入一段函数，帮助插件拓展运行时的代码。

在演化过程中做顶层设计

在我的关于机制设计的理念中，在演化过程中做顶层设计被我视为是最重要的一种方法论。它是由时间、资源、经验的有限性推导出来的一种理念。

它对应着我们需要不断对我们的认知进行更新，小步快跑快速迭代，并且不忘初心，初始的设计必然会有这样那样的问题，这是由我们自身的经验和我们对市场、业务的认识所决定的。但随着我们对业务场景愈加熟悉、经验愈加丰富，我们应该适时做一些顶层设计，以应对更大的挑战。

优秀的系统设计在于机制设计

但是在演化过程中的顶层设计经常会随着时间和迭代次数的推移而衰退，这时候我们要推到重来，结合我们之前的实践和演化经验重新设计，保证系统的精简。

20220104