导读

在哈啰的APP中，流动、大促、周年庆等都须要咱们可能领有更快捷的响应速度、更高效的人力来缩短试错周期，而且流量区域经营位为了可能做到千人千面，又迫切的须要有一种能够依据不同的人群达到展现不同成果的目标。UI 可定制化、疾速迭代、高性能体验始终以来都是挪动端开发畛域的外围诉求，随着哈啰业务的一直拓展，越来越多的业务线对上述三点提出了更高的要求，但因为挪动端 App 发版的人造限度，无奈很好满足业务方的诉求。

基于以上一些业务痛点，咱们联合 Native 黄金流量业务区域对于性能极高的要求，输入了一套 Native 部分动态化计划 Wukong（悟空），截止到目前，已在App外部多个业务模块中失去验证。

Wukong 是什么

悟空动静卡片 (Wukong) 最后是为哈啰投放零碎定制的 Native 高性能渲染引擎，是一套残缺的跨端原生部分卡片动静展现的技术解决方案，以业务赋能为核心，致力于解决UI定制化、逻辑动态化、缩短试错周期、晋升人效等相干问题，使得业务能够基于 Wukong 做到一次开发，随时上线，多端复用的成果。

技术劣势

Wukong 在规范UI组件、JS 动静能力、款式反对等方面提供多种性能加持，同时反对自定义组件、自定义 JS Bridge的能力以满足更简单、更加定制化的业务场景。

  • 反对 UI & 逻辑 动静公布，进步研发&经营效率
  • 原生页面内嵌动态化视图的接入形式，接入成本低
  • Android / iOS 双端侧体现统一，反对实时预览，所见即所得
  • UI渲染纯 Native 实现，体积小、性能好、内存少

零碎介绍

Wukong 遵循了 CSS3 中提出的 Flexbox 布局标准，旨在磨平多平台在布局零碎上的差别，为了达到一套模板双端统一的成果，对 Android 和 iOS 端组件款式的体现也进行了尽可能的对立，在开发方式上咱们抉择 XML 作为视图 DSL 的语言格局，同时定义了一整套的 xsd 标准来束缚 XML 的编写，辅助开发编写过程中提前躲避一些语法问题的同时也能更加容易进行入门应用。

如上图所示，在开发的过程中次要解决的是业务层相干的逻辑，模版的下载、缓存、校验，在 Wukong 外部有一套默认的实现，但并不是必须的，接入方齐全能够依据本人的业务场景来进行笼罩重写，对于模版产物的治理是一个绝对隐衷的操作，为了达到最大化的灵便度，须要由业务接入方来扩大。

其中 SDK 外部咱们设计了协定层，在初始化的时候来对接各种可插拔的能力，比方：自定义组件、自定义Bridge，同时将 SDK 外部的一些根底能力如：网络、埋点、路由、地位信息、设施信息等进行接口形象，使得业务接入时能够不便的代替为自定义的通用根底能力。

实现原理

如果用比拟通俗易懂的形式来介绍 Wukong 的大抵实现原理，能够简略的了解为依照肯定的束缚标准编写的款式形容映射为 Native 的布局，从而达到款式逻辑动态化的成果。

通过 SDK 加载的流程如上图所示：

首先须要输出一个产物的链接地址和业务数据源，SDK 外部会通过模版治理模块来下载保留在服务端的模版，同时会对相干数据进行缓存（包含磁盘缓存和内存缓存），在拿到产物之后，通过解析器的解决会被映射为 VM（ViewModel） 对象，VM对象中蕴含了所有原始信息以及须要解析的 JS 表达式，为了将 VM 和 具体的View进行解耦，在 VM 和 View 之间还减少了一层 VNode 虚构节点层，此时在生成 VNode tree 的时候，JS引擎会参加工作执行并获取 JS 表达式的后果，最终再将生成的 VNode tree 通过 Render 渲染为 Native 的 View tree。以上流程为首次加载的过程，当二次加载的时候，会优先应用缓存模版（包含磁盘缓存和内存缓存），同时，VNode tree 中通过 diff 计算差别来进行部分的更新，以达到性能的最大化。

其中有两个较为重要的环节：布局零碎和JS引擎。对于布局零碎来说，从能力、性能等多方面的比照考量，同时思考到两端布局一致性以及升高开发者的学习老本，决定抉择应用实现了 FlexBox 标准的三方库 Yoga作为咱们的布局引擎，Yoga 作为一个通用的布局零碎，来代替 iOS 上的 AutoLayout 和 Android 的 FlexBoxLayout，以此来保障既能领有前端亲和性，也能达到多端体现一致性。因为 iOS 自身曾经反对 JavaScriptCore，而 Android 则须要同时兼顾性能以及对于包体积的影响，所以采纳 QuickJS 作为 SDK 底层的 JS 引擎。

研发工具

为了不便开发者疾速的入门、开发、调试，同时保障模板的正确性和一致性， Wukong 为开发者提供了多个开发提效配套工具。在开发过程中采纳的是工程化的治理形式，每一个工程都会蕴含一个 build 目录，用来寄存生成的产物，通过脚本工具，能够初始化工程、解析工程、开启实时预览 Server，在一个工程中同时能够蕴含多个子工程，以便于在不同的动静卡片模版中疾速实时的切换。

开发工具采纳 VSCode，通过 xsd 和 lib.wukong.ts 的束缚，更加便捷的做到代码补全和联想性能，配合实时预览工具，大大的晋升整体的研发效率和研发体验。实时预览能够做到边开发边看成果的能力，在达到所见即所得的同时，其中的相干日志调试信息，也会同步的输入到控制台中，以便于研发人员跟踪排查问题。

研发流程

基于以上工具，咱们将整个的研发流程尽可能的做到简单化、标准化：首先通过脚本来创立规范的我的项目工程或子工程，以避免代码治理上的凌乱。在 VSCode 中编写模版代码，通过束缚工具来达到代码解析前的合规化校验。应用脚本工具在工程中启动 Server，同时控制台中会输入以后链接到 Server的设施 log 日志信息。客户端通过预览工具连贯 Server 达到实时预览的能力。批改相干代码后，再次通过脚本从新解析指定工程或子工程，预览工具会同步更新为最新的款式。最初一步就是将 build 目录中生成的产物配置到本人的治理后盾，从而达到在线公布的能力。

公布流程

在失常的 APP 迭代节奏中，须要 Android / iOS 各一名研发人员参加其中，同时还须要通过联调、测试、验收、接口公布、APP公布、数据回收等一系列的流程，周期过长，同时如果公布之后线上发现问题，还有可能会提早到下个版本的公布周期，响应速度慢，无奈很好的承接经营业务诉求。通过部分动态化能力，首先对于客户端来说相比之下仅须要一名研发参加需要模版的开发，缩小了研发人力，其次也无需期待APP的公布周期，验收实现之后，能够在线实时更新，在保障原生用户体验的根底上不依赖发版、高效撑持业务需要，大大缩短业务研发和数据回收的工夫周期，新性能也可在任意线上版本中失效，产品验证和推广更高效。

总结和瞻望

Wukong 从创立之初到当初历经一年多的开发保护工夫，两头遇到过各种不同的需要和技术问题，在团队搭档的集思广益之下才逐步成型，再次示意由衷的感激。目前 SDK 在哈啰APP首页、钱包、集体核心、搜寻等业务中宽泛应用，业务研发整体提效 50%，尤其对于投放零碎，在高流量经营区域位流动研发提效达 80%，随着 Wukong 应用场景的逐步增多，在技术上咱们会不断丰富能力，继续优化整体性能，进一步升高学习和应用老本，提供更欠缺的配套设施，同时也心愿各畛域的专家，可能提出贵重的倡议共建共创，帮助咱们通力打造一个更加稳固、易用且残缺的部分动态化能力技术生态。

相干链接：

  • GitHub: https://github.com/hellof2e/Wukong
  • Wukong DOC：https://hellobike.yuque.com/org-wiki-nlsyth/hec0gc/mput57lpnz...
  • layout：https://yogalayout.com/
  • quickjs：https://bellard.org/quickjs/