爱奇艺RND框架技术探索——架构与实现

前言

RND，全称React Node Desktop，起源于RN在爱奇艺PC端的实现，采用React JS framework +Node.js runtime + native UI engine架构，目标是成为最轻量的JS开发桌面应用的跨平台方案。之前我们还分享了一篇关于RND的Native API注入技术的文章，大家可以参考。

目前RND已经在爱奇艺PC客户端大量应用，在最新的爱奇艺客户端中，除了播放视窗和窗口边框等部分采用C++开发外，其余频道页均是基于RND框架采用Java Script开发的，RND无缝地将Native部分与Java Script开发的UI模块融合到一起，用户从体验上无法感知哪部分是C++开发，哪部分是Java Script开发的。RND的应用有效降低了开发难度和成本，提高了开发效率，同时也为产品迭代提供了更加多样化的解决方案。

下面是RND在爱奇艺客户端上应用的几个场景：

• 基于RND的频道页：

• 融合Native播放器的RND页面：

• 播放器侧边栏信息区：

本文接下来将从技术选型、线程模型、JS运行时、Bridge、资源管理、调试支持等几个方面对RND的实现作一个简单的梳理，以期能够让大家对RND在Windows上的实现方案有一个较全面的了解。

技术选型与架构设计

RN最核心的部件当然是JavaScript引擎，毋庸置疑V8是RND的首选。对于UI部分的实现，在移动端，无论是安卓还是iOS，RN对接的都是原生的UI组件，熟悉Windows客户端的开发者都知道，由于一些众所周知的原因，现在基于Windows的互联网产品的UI几乎不会选择原生的UI控件，很多大厂都开发了自己的UI库。爱奇艺也有自己的UI渲染引擎——，Lyra是一套十分优秀的异步渲染引擎，目前支持Windows和MAC OS两个平台，RND所有的UI渲染都是以Lyra作为基础，并且RND还整合了Yoga布局系统来实现UI Component的flex布局计算。

在Native能力方面，因RND集成了Node运行时，这使得基于RND的JS开发者拥有了Node强大的Native基础能力，开发者可以按需引入Node模块来扩展应用的Native能力；本地缓存方面，RND采用了高性能的本地存储系统LevelDB，LevelDB是一款性能十分优秀的Nosql数据库，支持key/value形式的数据存储；在调试方面，RND除了支持Chrome外，还支持VSCode、Electron调试，方便开发者按自己的需求进行调试。

RND架构图