深度分享：爱奇艺 RN 低代码引擎搭建、应用的实践经验_ArchSummit_李慧文



 写点什么

嘉宾 | 甘泉

React Native 是具有高动态化能力的跨平台开发框架，低代码是近几年非常热门的趋势，而爱奇艺早在 2018 年就尝试将二者结合，开发出了万花筒引擎和专题页低代码平台，用于快速搭建爱奇艺 App 中的各类内容展示型页面，赋能不会写代码的内容运营和编辑们，针对热门的综艺和影视剧内容，用很少的人力投入就能快速搭建出具有丰富排版和动画效果的专题页面，并直接投放上线。

在 2021 年 5 月北京 QCon 全球软件开发大会上，爱奇艺基线研发部高级经理甘泉分享了爱奇艺设计和应用万花筒引擎和低代码平台的实践经验、遇到的挑战以及解决思路。我们整理了他的演讲，以期解决您在 React Native 低代码系统架构设计时可能遭遇的某些问题。（下文以甘泉老师第一人称叙述）

爱奇艺专题页面包含丰富排版和动画效果。这类页面均由以下低代码方案实现：用零代码搭建页面、用低代码开发页面内常规组件实现常规动画、用专业代码开发页面内定制化组件实现个性动画。

一、业务背景

移动端常规页面开发流程包括：提出需求、需求审核、视觉设计、前后端开发、测试验证、修复 Bug、跟版上线七步，涉及到产品经理、设计师、工程师、QA 等角色。

专题页开发流程与一般页面在流程、人员、成本上、发布周期、向前兼容性上均存在差异。专题页开发只有提出需求、视觉设计、搭建页面、自测验证、投放上线五步。其中，需求是由编辑提出的。

在专题页开发中，开发流程需极度简化才能方便编辑操作，页面需花样丰富才能吸引用户，搭建要足够快捷才可保证内容时效性，增加新布局样式和特性需不依赖 App 发版才可便于更新。

为实现以上需求，我们对比了 H5、RN 和当时爱奇艺已有的自研的原生 DSL 方案的优缺点，综合成本、性能、动态性等多方面的考虑，决定自研一个结合 RN 和 DSL 的新方案：Kaleidoscope 引擎（万花筒引擎）。

二、Kaleidoscope DSL 设计思想

这个引擎之所以被命名为 Kaleidoscope（万花筒），是因为其灵感来自真正的万花筒。万花筒是在圆筒一端放入彩色碎片，圆筒中间放置三棱镜，从另一端的孔中即可观测到对称的美丽图像，结构简单、体积小巧，却千变万化。Kaleidoscope 采取了相通的设计思路。

Kaleidoscope 层次结构分为四层，App、Page、Item、Element。最外层为 App 层，一个 App 中包含一个 Page，Page 中包含一组 Item 组件（Item 可理解为一个长列表中的 Item），每个 Item 由多个 Element 构成。而 Element 就相当于万花筒中的彩色碎片。

Element 分为多种类型，容器型允许互相嵌套，可包含子元素，可实现用简单布局（如横纵布局）组合出复杂的布局；元件型为最小元素，无子元素，不可再分；复合型可实现特殊布局和交互。

Kaleidoscope 数据格式采用了 JSON 格式，体积小，易生产，很通用；样式布局描述系统采用了 Flexbox，RN 支持良好，布局能力强，学习成本低，其数据结构如下图所示：

图中左侧为一个 JSON 结构，其中 Page 对象最重要的属性为 Items 数组，单个 Item 由多个 contents 嵌套组成（图中右侧），再加上容器型 Element 中的 content，即可实现千变万化的布局。

DSL 贯穿了 Kaleidoscope 方案，和 RN 堪称天生一对：

JSON 结构和 RN 组件一一对应；
JSON Property 和 RN Prop 也一一对应；
RN 提倡组合大于继承，适用 DSL 场景。

通过 RN 组件的设计和封装，即可用一个简洁的架构实现分而治之。

三、整体方案的架构设计

Kaleidoscope 整体架构图分为前端、后端和低代码平台三部分。前端面向内容消费者，后端和低代码平台面向内容生产者以及部分开发人员。

前端架构中 Kaleidoscope 引擎处于下面架构图的第二层，主要负责数据的下载、缓存和解析，依赖于 QYRN 框架。QYRN 框架是爱奇艺以 RN 官方框架为基础封装的框架，它丰富了官方框架的组件库，扩展了 UI 组件和原生模块，实现了热更新机制、数据投递和 Bridge 实例复用。

后端架构如下所示。页面数据来自于编辑们搭建页面的配置信息和内容原数据的数据流（虚线下的流程）。两类数据一静一动，会在不同端的 Worker Service 上融合，返回给不同用户端。

低代码平台架构的核心为第三层 Portal，由两块组成：面向组件开发同学的组件开发平台和编辑使用的页面可视化搭建平台。页面可视化搭建平台实现完全零代码，组件开发平台只需要用少量代码就可以开发组件，通常给外包人员使用。

四、万花筒引擎的实现思路

RN 的动态性一直是其不容小觑的优势。爱奇艺原生的 DSL 引擎也具有一定的动态性，可迅速实现界面更新、UI 改版等。基于 RN 和 DSL 强强结合，万花筒引擎实现了引擎的高动态性。

同时，爱奇艺基于可嵌套容器实现了高布局灵活性。可嵌套容器为前述容器型 Element

，此处不赘述了。我会重点介绍爱奇艺是如何基于 JS Card 实现高业务适应性、基于层叠实现低数据冗余、基于依赖注入实现高扩展性的。

基于 JS Card 实现了高业务适应性

参考 HTML 中通过夹带<script>标签编写 JS 实现动态效果，为提高业务适应性，我们在 JSON 中也添加了 JS 脚本。针对无法用 JSON 描述的非通用需求场景，我们允许以 Card（列表项）为粒度直接用 RN 开发，打包成 JS 字符串之后和其他 JSON 数据一起下发，动态加载运行。Card 为前文中的 Item 被渲染后的带界面的占有一定高度的实体。

JS Card 工作分为六步：

开发 JS Card。开发 JS Card 和开发 RN 组件唯一差别是需要将组件类存入 global 对象。
打包 JS 字符串。打包时需要注意双引号转义和包体积大小；
发布 JS Card。在低代码平台的组件开发平台创建一个 JS Card 组件，进行发布；
接口返回页面数据。发布后，端上请求接口即可获取 JS 字符串，放入 DSL 配置对象的 base.script 属性中，允许一个页面中添加多个 JS Card；
解析执行 JS 注册。引擎解析数据后，使用 eval 函数执行 JS 字符串，将字符串中定义的组件的 class 加到上下文中，从 global 中获取对象并添加到 JS Card 注册表中进行管理；
渲染。如 Item 有 ScriptID 属性，则从 JS Card 注册表中找到对应组件进行渲染。

基于层叠实现低数据冗余

为了减少页面中的冗余信息，爱奇艺基于 CSS 的层叠样式表提出了层叠的概念，支持了信息复用和组合，针对样式数据提出了 Style 和 Theme，针对 pingback 数据提出了 Statistics 和 CommonStats。可在 Style 中引用 Theme，在 Statistics 引用 CommonStats，且支持按先后顺序覆盖合成。

举例来说，Style 可通过 ref 属性引用 Theme 中定义好的类（如下图左），引用了多个 Theme 可通过样式继承和覆盖机制合成具体的 Style（如下图右）。

基于依赖注入实现高扩展性

不同业务方前来对接，但是需求不同时，爱奇艺采用了剥离核心功能，支持业务方按需裁剪、扩展和定制的思路。我们采用依赖注入的方式实现和使用所有的 Page、Item 和 Element 组件，打破了组件之间的强依赖。业务方可自由组合复用已有的组件，自定义组件，实现过程如下图所示：

配置核心抽象类的具体依赖：这里核心抽象类可分为 5 种：Pages、Services、Items、Elements、Components；
创建业务配置类：向框架注入 5 种核心抽象类实例配置；
引入业务配置类：在代码入口注册 App 组件；
引用举例：在 App 组件中解耦引用注入的 listPage 组件。

五、低代码平台设计与实现

下图为爱奇艺编辑日常使用的页面搭建系统：

左侧为组件库，中间为预览区；右侧为配置区。组件均为 Card 粒度，鼠标拖动即可选中，在配置区即可配置 Card 的数据和样式。

该平台扩展需要使用下图中的组件开发平台添加组件、排版和样式。

制作组件需写一个描述该组件 UI 形式的 JSON 模板。该 JSON 只有内容占位符，具体内容需使用 Web IDE 针对组件编写一个 JS 函数来填充。该函数有四个输入：组件 JSON 模板内容、编辑搭建页面时绑定的数据源对应的内容数据和填写的标题等配置信息、手机屏幕分辨率等需要参考的扩展信息，返回一个输出：描述一个 Item 的 JSON 对象。这个 JS 函数跑在基于 Nashorn 的 JS 引擎上，外包稍加培训便可编写。