爱奇艺RN低代码引擎：千变万化、快速搭建的万花筒

爱奇艺RN低代码引擎：千变万化、快速搭建的万花筒

访客| 甘泉

编辑| 李惠文

React是一个具有高动态能力的跨平台开发框架。 低代码是近年来非常流行的趋势。 爱奇艺早在2018年就尝试将两者结合起来，开发了万花筒引擎和专题页低代码平台。 ，用于快速构建爱奇艺App中的各种内容展示页面，赋能不会写代码的内容运营者和编辑，只需很少的人力投入即可快速构建热门综艺和影视剧内容，打造布局丰富、内容丰富的特色页面动画效果直接放到网上。

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

爱奇艺专题页面包含丰富的布局和动画效果。 此类页面通过以下低代码方案实现：零代码构建页面，使用低代码开发页面中的常规组件实现常规动画，使用专业代码开发页面中的自定义组件实现个性化动画。

1、业务背景

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

特殊页面和通用页面的开发流程在流程、人员、成本、发布周期、向前兼容性等方面都存在差异。 开发一个特色页面只有五个步骤：提出需求、视觉设计、构建页面、自测验证、上线。 其中，要求是编辑提出的。

在特殊页面的开发中，开发流程需要极其简化以方便编辑操作，页面需要丰富多样以吸引用户，构建需要足够快以保证内容的时效性，以及新的布局需要独立于App发布添加样式和功能才方便。 更新。

为了实现上述需求，我们比较了H5、RN和爱奇艺当时现有的自研原生DSL解决方案的优缺点。 考虑到成本、性能、动态性等方面，我们决定开发一种结合RN和DSL的自研解决方案。 新程序：（万花筒引擎）。

22.DSL设计思想

该引擎之所以被命名为（万花筒），是因为它的灵感来自于真实的万花筒。 万花筒是通过在圆柱体的一端放置彩色碎片，并在圆柱体的中间放置棱镜制成的。 从另一端的孔中可以观察到美丽的对称图像。 它结构简单，体积小，但千变万化。 采用了类似的设计思路。

层次结构分为四层，App、Page、Item。 最外层是App层。 一个App包含一个Page，Page又包含一组Item组件（Item可以理解为一长串的item），每个Item又由多个item组成。 就像万花筒里的彩色碎片一样。

它分为多种类型。 容器类型允许相互嵌套，并且可以包含子元素，允许简单的布局（例如水平和垂直布局）组合成复杂的布局； 组件类型是最小元素，没有子元素，不能再细分； 复合类型支持特殊的布局和交互。

数据格式采用JSON格式，体积小，易于制作，通用性很强； 样式布局描述系统使用它，RN支持好，布局能力强，学习成本低。 其数据结构如下图所示：

图左边是一个JSON结构，其中Page对象最重要的属性是Items数组。 单个Item由多个嵌套组成（如图右侧）。 与容器类型的布局一起，可以实现千变万化的布局。

DSL贯穿整个解决方案，与RN是天然的搭配：

通过RN组件的设计和封装，可以用简单的架构来实现分而治之。

3、整体解决方案的架构设计

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

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

后端架构如下图所示。 页面数据来自于编辑者构建页面时使用的配置信息和原始内容数据的数据流（虚线下的过程）。 两类数据静态时和移动时，都会在不同的端进行合并，返回给不同的用户。

低代码平台架构的核心是第三层，由两部分组成：面向组件开发学生的组件开发平台和面向编辑人员的页面可视化平台。 页面可视化构建平台完全实现零代码，而组件开发平台只需要少量代码即可开发组件，通常由外包商使用。

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

RN的动态性一直是其不可低估的优势。 爱奇艺原生的DSL引擎也具有一定的动态性，可以快速实现界面更新、UI修改等。基于RN和DSL的强强结合，引擎实现了引擎的高动态性。

同时，爱奇艺基于可嵌套容器实现了高度的布局灵活性。 可嵌套容器即为前述的容器类型，此处不再详细描述。 我重点讲一下爱奇艺如何实现基于JS Card的高业务适应性、基于级联的低数据冗余、基于依赖注入的高扩展性。

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

参考HTML编写JS，夹带标签，实现动态效果。 为了提高业务适应性，我们还在JSON中添加了JS脚本。 对于JSON无法描述的非通用需求场景，我们允许直接用RN以Card（列表项）的粒度进行开发，将其封装成JS字符串，然后与其他JSON数据一起传递，并动态加载和加载运行。 Card是一个具有界面的实体，在上一篇中的Item渲染后占据一定的高度。

JS Card 的工作原理分为六个步骤：

开发JS卡。 开发 JS Card 和开发 RN 组件唯一的区别是组件类需要存储在对象中。

打包 JS 字符串。 打包时需要注意双引号转义和打包大小；

发布JS卡。 在低代码平台的组件开发平台上创建JS Card组件并发布；

接口返回页面数据。 发布后，可以通过请求接口获取JS字符串并放入base中。 DSL配置对象的属性，允许在一个页面中添加多个JS卡；

解析并执行JS注册。 引擎解析数据后，使用eval函数执行JS字符串，将字符串中定义的组件的类添加到上下文中，从中获取对象并将其添加到JS Card注册表中进行管理；

使成为。 如果Item有属性，就会从JS Card注册表中找到对应的组件进行渲染。

基于级联的低数据冗余

为了减少页面上的冗余信息，爱奇艺基于CSS层叠样式表提出了层叠的概念，支持信息的复用和组合。 它为样式数据提出Style 和Theme，为数据提出 和 。 Style中可以引用主题，支持按顺序覆盖和合成。

例如，Style可以通过ref属性引用Theme中定义的类（如下图左侧所示），而多个可以通过样式继承和覆盖机制来引用多个Theme合成特定的Style（如下图所示）就在下图中）。

基于依赖注入的高可扩展性

当不同的业务方来对接但有不同的需求时，爱奇艺采取剥离核心功能，支持业务方按需剪裁、扩展和定制的思路。 我们使用依赖注入来实现和使用所有Pages、Items和组件，打破了组件之间的强依赖关系。 业务方可以自由组合和复用现有组件，并定制组件。 实现流程如下图所示：

配置核心抽象类的具体依赖：这里的核心抽象类可以分为5种：Pages、Items、、；

创建业务配置类：将5个核心抽象类实例配置注入到框架中；

引入业务配置类：在代码入口注册App组件；

参考示例：解耦App组件中的引用注入组件。

55.低代码平台设计与实现

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

左侧是组件库，中间是预览区，右侧是配置区。 组件都是Card粒度的，可以通过鼠标拖动来选择。 卡片数据和样式可以在配置区域进行配置。

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

要制作组件，您需要编写一个描述组件的 UI 形式的 JSON 模板。 这个JSON只有内容占位符，具体内容需要使用Web IDE为组件编写JS函数来填写。 该函数有四个输入：组件JSON模板内容、编辑构建页面时绑定的数据源对应的内容数据以及填写的标题、手机屏幕分辨率等需要引用的扩展信息等配置信息，并返回一个输出：描述 Item 的 A JSON 对象。 该JS功能运行在基于. 经过一点培训就可以通过外包来编写。

该平台向多家企业开放。 业务应用激活后，您可以使用爱奇艺现有的组件来构建后端数据源的页面，也可以使用低代码平台来开发组件。

66.性能优化

万花筒引擎性能优化实践

我们在引擎上实现了延迟加载（），在需要的时候再加载模块信息，提高了首屏加载性能。 末端采用发动机，性能比JSC好。

对于引擎瘦身，我们实施了分包和简化的依赖关系，减少了大小和首屏加载时间。 爱奇艺的很多业务共享一个引擎。 使用自研的打包工具，可以将包含RN基本功能的代码剥离出来（约684KB），只生成业务代码。 精简NPM依赖库，去掉不常用的组件，去掉不必要的依赖。

JS Card方面，我们在分包之后再次将业务进行了分包，使用自主开发的JS Card专用打包工具进行打包，并在打包时消除了JS Card中引擎中已经包含的依赖库。 经过层层分包，爱奇艺已经上线的JS Card如下图所示，尺寸明显缩小。

77、开发、测试、调试、线上相关工具生态建设

在日常开发中，我们开发了一些工具来解决各种问题。

前端开发和测试工具

我们开发了一个基于注册的二维码生成器，用于生成跳转到 RN 主题页面的二维码。 扫码后可以预览。 启动RN的JS远程调试工具后，可以调试引擎或JS Card。 注册系统是爱奇艺统一的参数化路由机制。 如下图所示，在页面设置主题页参数，使用爱奇艺App扫描生成的二维码即可打开对应主题页。

JS卡质量控制

业务方开发的JS Card代码问题很难定位。 我们实现了JS Card运行时异常的捕获和传递，并构建了统一的JS Card打包服务。 使用此打包服务，您可以获取爱奇艺APM系统中的所有地图文件并恢复崩溃堆栈中被混淆的JS代码符号。 效果如下：

最后捕获的原始JS崩溃堆栈（图片左侧），没有详细信息。 恢复后（图中右侧），路径文件名详细，方便问题诊断。

组件生态

内容方面，我们搭建了模板中心和组件市场。 编辑和构建页面时，只需在模板中心选择一个更合适的模板并稍加修改即可。

在组件市场，企业可以贡献自己的组件，复用现有组件，共同构建组件生态。

88.上线效果及经验总结

该解决方案已在爱奇艺、随客、爱奇艺票务、爱奇艺小说4款应用上落地。 爱奇艺、iPad、爱奇艺三个终端UV峰值合计突破1亿。 主要应用于首页顶部导航专题、一般专题、播单、会员权限等4种场景。 每个场景都有自己的特点：

于2018年12月正式全面上线，至今已稳定运行约2年半。 、、iPad共上线1297个主题页面，平均每天1.4个页面。 近30天，爱奇艺手机上线了63个页面。 ，平均施工时间为19.25分钟。

在这个过程中，RN+DSL+JS Card方案满足了多种需求，且后续需求很少； 得益于RN的跨平台特性和简单灵活的架构设计，万花筒引擎的开发和维护成本极低； 引擎的每次变更都经过代码审查，确保持久稳定的在线运行。

同时我们发现JS卡是一把双刃剑。 由于有外部发展权，必须注重绩效和治理； DSL和引擎的不断迭代会带来一些前端和后端的兼容性问题，需要引入更复杂的版本管理机制。 ; 另外，新旧框架的过渡替换也会带来一系列问题，我们通过多轮灰度来避免这些问题。

嘉宾介绍

甜蜜的春天

2016年底加入爱奇艺，一直从事RN框架开发、RN框架、小程序框架、容器优化和开发团队管理工作。 目前担任App中端团队负责人。 在跨平台开发框架优化和应用方面有丰富的经验，也有一定的app中台建设经验。

推荐活动

今年6月的北京架构师峰会上，还策划了低代码平台设计专题，邀请了便利蜂、途虎汽车等公司的专家分享各自的实践。 如果您有兴趣，可以点击底部阅读原文查看专题内容。