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

  • 时间:2022-05-18 03:49  来源:未知   作者:admin   点击:

  React Native 是具有高动态化能力的跨平台开发框架,低代码是近几年非常热门的趋势,而爱奇艺早在 2018 年就尝试将二者结合,开发出了万花筒引擎和专题页低代码平台,用于快速搭建爱奇艺 App 中的各类内容展示型页面,赋能不会写代码的内容运营和编辑们,针对热门的综艺和影视剧内容,用很少的人力投入就能快速搭建出具有丰富排版和动画效果的专题页面,并直接投放上线 月北京 QCon 全球软件开发大会上,爱奇艺基线研发部高级经理甘泉分享了爱奇艺设计和应用万花筒引擎和低代码平台的实践经验、遇到的挑战以及解决思路。我们整理了他的演讲,以期解决您在 React Native 低代码系统架构设计时可能遭遇的某些问题。(下文以甘泉老师第一人称叙述)

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

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

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

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

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

  四、万花筒引擎的实现思路RN 的动态性一直是其不容小觑的优势。爱奇艺原生的 DSL 引擎也具有一定的动态性,可迅速实现界面更新、UI 改版等。

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

  基于 JS Card 实现了高业务适应性参考 HTML 中通过夹带标签编写 JS 实现动态效果,

  针对无法用 JSON 描述的非通用需求场景,我们允许以 Card(列表项)为粒度直接用 RN 开发,打包成 JS 字符串之后和其他 JSON 数据一起下发,动态加载运行。Card 为前文中的 Item 被渲染后的带界面的占有一定高度的实体。JS Card 工作分为六步:

  开发 JS Card。开发 JS Card 和开发 RN 组件唯一差别是需要将组件类存入 global 对象。

  发布 JS Card。在低代码平台的组件开发平台创建一个 JS Card 组件,进行发布;

  接口返回页面数据。发布后,端上请求接口即可获取 JS 字符串,放入 DSL 配置对象的 base. 属性中,允许一个页面中添加多个 JS Card;

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

  渲染。如 Item 有 ID 属性,则从 JS Card 注册表中找到对应组件进行渲染。

  基于层叠实现低数据冗余为了减少页面中的冗余信息,爱奇艺基于 CSS 的层叠样式表提出了层叠的概念,

  的思路。我们采用依赖注入的方式实现和使用所有的 Page、Item 和 Element 组件,打破了组件之间的强依赖。业务方可自由组合复用已有的组件,自定义组件,实现过程如下图所示:

  ,鼠标拖动即可选中,在配置区即可配置 Card 的数据和样式。该平台扩展需要使用下图中的组件开发平台添加组件、排版和样式。

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

  万花筒引擎的性能优化实践我们在引擎上实现了懒加载(Inline Requires),当需使用模块时再加载其信息,提升了首屏加载性能。在 Android 端使用了 Hermes 引擎,性能优于 JSC。

  ,减少了 Bundle 体积和首屏加载耗时。爱奇艺众多业务共享一个引擎,使用自研打包工具可将包含 RN 基础功能的代码剥离出去(大约 684KB),打出只有业务代码的 Bundle。精简 NPM 依赖库,可拆出不常用的组件,解除不必要的依赖。

  七、开发、测试、调试、上线相关工具生态建设在日常开发中,我们开发了一些工具,解决 DevOps 中的各种问题。

  注册制是爱奇艺统一的参数化路由机制,如下图所示,在页面中设置专题页参数,用爱奇艺 App 扫描生成的二维码,即可打开对应的专题页。

  JS Card 质量监控业务方开发的 JS Card 代码问题不好定位。我们实现了 JS Card 运行时异常的捕获和投递,建设了统一的 JS Card 打包服务。利用该打包服务,可获取所有 source map 文件,可在爱奇艺的 APM 系统中还原崩溃栈中被混淆的 JS 代码符号,效果如下所示:

  组件生态内容上我们建设了模板中心和组件市场。编辑搭建页面时,广东汇卡43亿洗钱案判了!14人判刑10个月到10年不等,挑选模板中心中较合适的模板稍加修改即可。

  八、上线效果和经验总结Kaleidoscope 方案先后在爱奇艺、随刻、爱奇艺票务、爱奇艺小说共 4 款 App 上落地,在 GPhone、iPhone、iPad 三端总 UV 峰值过亿,主要应用于首页顶导航特色专题、一般专题、播单、会员权益等 4 个场景,这些场景各有特点:

  在首页顶导航特色专题页上,实现了两个 RN 专题页之间切换效果;导航栏背景色可随着切换页面而变化,为用户带来沉浸式体验;

  在会员顶导航专题页上,大量定制化 JS Card 组件实现了众多个性化需求,例如:吸顶导航组件,可以滚动页面到指定的 Item;

  在播单上,实现了播放器根据页面滚动位置自动开播,一个视频播放完毕后自动滚动到下一个视频自动开播等高级交互特性;

  在一般专题上,无需引擎迭代,即可快速搭建、上线 月正式全量上线,Kaleidoscope 稳定运行至今 2 年半左右,在 GPhone、iPhone、iPad 三端总共上线 天爱奇艺 Phone 端上线 个页面,平均搭建时长 19.25 分钟。

  RN+DSL+JS Card 方案满足了各类需求,且几乎不需要跟版;得益于 RN 跨平台特点和简洁灵活的架构设计,万花筒引擎开发和维护成本极低;引擎每次变更都经过代码评审,保证了线上持久稳定运行。

  JS Card 是一把双刃剑,由于开发权外放,要注意性能,并进行治理;DSL 和引擎不断迭代会带来一些前后端兼容性问题,需要引入较为复杂的版本管理机制;另外,新老框架过渡替换也会带来的一系列问题,我们通过多轮灰度进行规避。

  声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。