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

前言

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

目前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,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架构图

RND的线程模型

RND采用了UI线程和JS线程的双线程模式,其中渲染命令和布局都是在UI线程中完成的,RN JS的代码则是执行在JS线程中。RNJS框架生成渲染命令后,通过注入的交互函数发送到UI线程中,UI线程收到命令进行解析,完成JS组件的创建、布局和渲染。

当在UI线程中存在复杂任务时,RND的渲染仍然能保证界面绘制的流畅度,这要归功于UI采用的异步渲染引擎——Lyra,Lyra执行的双线程渲染模式,UI线程会将paint消息发送到独立的render线程执行,避免UI线程上的耗时计算阻塞界面绘制,因此,RND有着非常出色的渲染能力。

RND线程模型

JS运行时的实现

在Windows平台上,RND采用V8作为JavaScript引擎。JS运行时是对JS运行环境的抽象描述:隔离了不同平台JS引擎的接口差异,为上层提供了统一的访问接口,并向JS引擎注入了必要的Native API以支持RN的运行。同时,JS运行时还对外暴露了ReactJS的事件监听接口和Native API注入框架。封装V8

RND对JS运行时的抽象和封装

考虑到内存与性能开销,在同一进程中,所有RootView实例共享V8的同一个Isolate对象,而每一个RootView独立拥有一个V8的Context,保证其运行环境的隔离。因共享Isolate的原因,所有的RootView共享同一个JS执行线程。共享线程也可以有效降低线程竞争。开发者也可以改变这一策略,根据实际资源使用情况来决定Isolate的数量。

Snapshot助力加速启动过程

V8还有一个非常有用的特性为RND所用——Snapshot运行模式:Snapshot是将V8运行期某一时刻的运行快照转储到磁盘文件中,当程序再次启动时可以直接从存储好的快照直接恢复到当时的运行状态,这一特性可以有效帮助RND提升应用的启动速度。

使用snapshot启动速度加快近300ms

整合Node运行时,引入Node生态

因为开源项目Node同样使用了V8引擎,这样我们做很少的工作就可以将Node引入到RND中了。RN开发者不但具有了本地文件、网络等基础Native访问能力,而且还可以将Node的开发包集成到开发环境中来。

RND同时支持RN和node的modules

一个典型的例子,在RND中Web Socket接口就是由Node来支持的。在Chrome、DevTools的调试实现中都用到了Web Socket。

Bridge实现

Bridge的实现大概是RN原理介绍相关的文章中读者最关心的部分了,与RN移动版本的实现不同,因RND基于C开发,而V8亦是以C向Native提供接口的,因此在实现Bridge时,RND不需要额外处理异构语言交互的问题。

交互实现

单接口、异步交互的模式是RN实现Bridge的最大特点。RND对Bridge部分作了一些改良和扩充,对于UI以外的处理,RND将其从messageQueue中“拆了出来”,提供了直接的API来完成,比如timer、本地缓存访问、网络请求等Native模块。这些接口在Native端基本都是异步接口,因此不会造成阻塞,但在执行逻辑处立刻调用会加速并发能力,以便定时器更加精确或网络请求更早将请求发送出去。

Bridge实现

Yoga布局

Lyra系统目前并不支持Flexbox布局规范,因此RND并没有使用Lyra的布局系统,而是与RN一样采用了Facebook的Yoga布局系统,Yoga支持Flexbox规范,是一款非常优秀的跨平台布局系统。相较于之前的版本,Yoga优化了Dirty算法,只对发生位置或大小变化的相关控件进行Dirty,大大提高了绘制效率。

RND应用界面布局

RootView内部的控件接受Yoga布局,其自身则与其他Lyraui控件接受Lyra的布局。

RND的资源管理与热更新

模块化资源管理

RND资源管理

每一个Module对应了一个资源配置(ResourceConfig),这个资源配置映射了一个资源配置管理对象,通过这个资源配置管理对象便可获取到当前要使用的资源类型和资源内容。

进行资源模块化,其实是Lyra ui本身的使用要求,因此,RND的资源模块化实际上是使用了Lyra ui的资源管理策略。

RND中,JS业务代码,图片文件都被视为资源,在发布版本中,都被打包到zip中,在开发模式下,是以文件形式存放在代码目录中的,为了统一组织不同模式下的资源加载,RND抽象了ResLoader对象,负责加载不同类型的资源,同时,ResLoader还会调用热更新模块进行资源zip包的升级。图片资源自动加载机制

图片加载与显示

RND UI组件的图片资源有3种来源:网络、本地缓存和zip资源包,存放在zip资源包的图片资源一般都是较少更新的、较固定的图片资源。大部分图片是动态更新的,JS通过URL的形式来设置图片资源属性,RND根据URL的格式来区别图片来自网络还是zip包,来自网络的图片URL是一个http的URL,而zip包中的图片则是一个文件名的形式。因此RND很容易区分这两种图片来源,当判断是来自网络时,RND会首先检查是否存在缓存文件,如果存在则直接读取缓存图片。

可灵活配置的热更新

RootView在初始化时ResLoader会通过ConfigManager获取资源更新对象,调用UpdateResource函数进行资源更新,当资源有更新时便会直接加载新的资源包执行,如果不存在更新则加载默认的资源包。

RootView资源热更新

RND支持两种资源更新策略,一种直接通过URL携带请求参数的方式请求升级资源包,另一种则是先拉取一个升级策略文件,再通过读取升级策略进行升级,可以通过ConfigManager由宿主程序指定。

用户也可以实现自己的资源更新策略,在配置对象中指定,RND会优先使用自定义更新策略来更新资源。

调试支持

工欲善其事必先利其器,在调试方面,我们投入了大量的精力来完善增强RND的工具链,一方面我们比RN有更丰富的调试工具;另一方面,我们创新性地整合了调试与目标应用的JS运行时,调试环境就是运行环境,所有与Native的调用都是真实调用,而不是委托给Web Socket实现的“伪调用”,这完美解决了在调试模式下Native接口同步调用的问题,也提高了调试的便利性,开发者可以在JS代码中同步跟踪Native接口调用。

多样化调试支持

除了Chrome外,RND还整合了Electron、VSCode等调试工具,开发者可以按照不同的需求或喜好可以选择不同的调试工具,RND推荐使用Electron或VSCode来调试,Electron完全支持Chrome所有的调试和性能分析功能,而VSCode则是JS开发者首选的IDE,在开发中进行调试、热更新都非常的方便。用户可以通过调试配置文件选择使用哪一种调试工具作为默认调试器。

RND调试工具链   Native接口同步调试支持

在Chrome调试模式下,RN JS并不是运行在自身的JS引擎中,而是被运行在Chrome的JS引擎中,对Native Api的调用也是通过Web Socket来代理实现的,因此,在这种场景下,如果想要执行同步Native Api的调用是无法实现的。在RND中,因RN JS需要同步获取宿主窗口位置大小等信息,Native提供了对应的同步接口,在调试模式下对这类同步接口的调试就无法实现了。

RND在Electron和VSCode调试模式中将JS运行时整合到了一起,让RN JS与宿主应用的Native部分运行在同一个进程中,这样就实现了Native API的同步调用,调试模式和运行模式的交互方式保持了一致。

调试效果图样

  • 通过DevTools查看页面布局:
  • 通过VSCode进行调试:
  • 通过Chrome进行调试:

小结

本文着重从Native框架的角度介绍了RND的技术选型和关键模块的实现原理,关于RN JS框架部分本文并未提及,后续会有专门的一篇文章《爱奇艺RND框架之JS Framework解析》来介绍,敬请关注。由于篇幅关系,RND的动画系统、性能分析系统等很多技术文中并未涉及,希望后续有时间能与大家一起分享。

RND在爱奇艺客户端的成功实践表明,RN同样适用于以运营内容为主的、迭代周期密集的互联网桌面应用,JS非常适合UI和业务逻辑的快速开发。随着各大JS引擎性能不断的优化,很多大厂都推出了基于JS语言的轻量级高性能App应用框架,可以预测在不久的将来,以内容运营为主的桌面产品上,JS很快会成为最受开发者欢迎的语言之一

Image placeholder
坐观云起
未设置
  77人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Android篇 | 爱奇艺App启动优化实践分享

导读性能优化一直都是各个APP推进中的重点、难点,爱奇艺App也不例外。在此之前,爱奇艺AppAndroid版的启动速度虽然一直处于同类App领先的水平,但优势距离其他同类的APP距离一直很小。面

Linux系统——架构浅析

导语:掐指一算自己从研究生开始投入到Linux的海洋也有几年的时间,即便如此依然对其各种功能模块一知半解。无数次看了Linux内核的技术文章后一头雾水,为了更系统地更有方法的学Linux,特此记录。历

干货丨爱奇艺CDN IPv6系统配置

1.背景  IPv6是“InternetProtocolVersion6”(互联网协议第6版)的缩写,是互联网工程任务组(IETF)设计的用于替代IPv4的下一代IP协议。IPv4地址资源紧缺严重制约

SACC2019:爱奇艺的大数据中台战略(附演讲实录)

  孙斌爱奇艺高级总监主要负责爱奇艺的大数据中台、商业智能、内容智能制作等业务。在互联网产品设计和研发方面有十多年经验,曾就职于微软、hulu、雅虎等公司。摘要:爱奇艺的业务已经从单一的视频业务发展为

“小应用”背后的“大改变” 爱奇艺赋能流媒体播放服务

热门视频里,“弹幕盖脸”几乎是必然事件,然而有一个地方看视频,你会发现密密麻麻的弹幕都绕开主角飘过,这个地方就是爱奇艺。对于大家观看视频时喜闻乐见的弹幕,爱奇艺提供了蒙版弹幕服务,可以让用户实现“弹幕

DTCC2019 爱奇艺实时数据传输服务

数据库间实时数据传输服务可简化业务系统的数据架构,使其专注于业务开发。DBIO是爱奇艺研发的数据库间实时数据传输服务,用于同异构数据库间实时复制与数据变更捕获,是业务系统数据共享的核心通道。作者:郭磊

爱奇艺的数据库选型大法,实用不纠结!

来源:rrd.me/fgGsG我们进行数据库选型的时候要考虑哪些问题?有哪些需求?待选用的数据库是否和需求对得上?是不是直接可以拿来用?需不需要一些额外的开发?这些都会在本文的分享中提及。一、数据库技

一站式入口服务|爱奇艺微服务平台 API 网关实战

写在前面在互联网业务微服务化改造过程中,按照以往的服务治理体系,各服务需要单独实现限流、鉴权、监控、日志等通用功能,构建入口时资源申请、工单批复、多系统配置等一系列流程对精力消耗极大,学习成本较高

包银消费CTO汤向军:消费金融大数据风控架构与实践

01风险在哪里1.1 信用风险根据银行业的风险理论,信用风险是指借款人因各种原因未能及时、足额偿还债权人或银行贷款而违约的可能性。信用风险的风控重点在于,甄别客户违约的原因究竟是还款能力,还是还款意愿

直击DTCC2019现场:数据库智能化运维探索与实践

5月10日,第十届中国数据库技术大会(DTCC2019)正在火热进行中。作为本届大会讨论的焦点之一,“数据库智能运维”专场人气爆棚,来自京东物流、腾讯、字节跳动、京东商城、便利峰的行业专家出席现场,他

美团下一代服务治理系统 OCTO2.0 的探索与实践

本文根据美团基础架构部服务治理团队工程师郭继东在2019QCon(全球软件开发大会)上的演讲内容整理而成,主要阐述美团大规模治理体系结合ServiceMesh演进的探索实践,希望对从事此领域的同学有所

会员服务在高可用架构的实战探索

概述很多互联网公司在发展过程中大多出现过多次机房网络故障的情形,如果发生故障,一般需要动用整个IT部门的人力进行流量切换和客诉处理。为了避免此类情形的发生,公司计划进行服务的高可用建设。会员部门持续跟

架构转型先行——金融业务场景下的新一代架构实践

  赵勇中国农业银行研发中心架构管理办公室主任工程师中国农业银行研发中心架构管理办公室主任工程师,十年以上金融行业信息化架构设计与管控经验。历经互联网金融、两地三中心、分布式核心银行等大型银行系统工程

中国银联跨中心,异构数据同步技术与实践

作者:翁海星 编辑:张晓艺摘要:Moray是中国银联为支持应用的异地多活、异构数据库的数据同步而设计的组件。本次将分享中国银联实现跨数据中心、高性能、可异构化的实时数据同步技术,以及Moray在中国银

中国银联跨中心&异构数据同步技术与实践

摘要:Moray是中国银联为支持应用的异地多活、异构数据库的数据同步而设计的组件。本次将分享中国银联实现跨数据中心、高性能、可异构化的实时数据同步技术,以及Moray在中国银联异地多活系统中的实践经验

数据结构与算法分析——开篇以及复杂度分析

开篇 你也许已经发现了,工作了几年,原以为已经是一只老鸟。但看到刚参加工作的同事,你发现,原来自己一直在原地踏步。跟新人相比,你的唯一优势就是对业务更熟悉而已,别的就没有什么优势了。 怎样才能够让自己

数据结构与算法分析——开篇以及复杂度分析

开篇你也许已经发现了,工作了几年,原以为已经是一只老鸟。但看到刚参加工作的同事,你发现,原来自己一直在原地踏步。跟新人相比,你的唯一优势就是对业务更熟悉而已,别的就没有什么优势了。怎样才能够让自己更上

数据结构与算法分析——链表

链表链表是一种常见的数据结构,是一组有序的数据,每个链表中的数据项称为元素。它跟数组很像,二者对比学习会更容易理解和记忆。数组是内存中连续的一块,不会间断。链表在内存中不一定是连续的一块。如果内存只剩

数据结构与算法分析——队列

定义队列,和栈类似,也是一种操作受限的线性表数据结构。与栈结构不同的是,可以对队列2端操作,要求数据从一端进(入队),从另一端出(出队)。队列遵循"先进先出"的原则,即最先进队列的数据元素,同样要最先

数据结构与算法分析——栈

定义栈是一种操作受限的线性表,只支持在一端进行插入和删除操作(入栈和出栈)。后进先出、先进后出是它最大的特点。当某个数据集合只在一端插入和删除数据,并满足先进后出的特性时,就可以选择栈这种数据结构。实

kernel的结构与命令行参数

kernel包结构在RHEL中rpm包是一种cpio格式的压缩文件,它由源文件和元数据(metadata)组成。而在rpm包中kernelrpm比较特殊,是一个只有元数据的包,在元数据中约束了以下的包

PHP接口的介绍与实现

PHP接口的介绍与实现 接口定义了实现某种服务的一般规范,声明了所需的函数和常量,但不指定如何实现。之所以不给出实现的细节,是因为不同的实体可能需要用不同的方式来实现公共的方法定义。关键是要建立必须实

单点登录系统原理与实现,图文并茂,附源码

本原文:整理自互联网一、单系统登录机制1、http无状态协议web应用采用browser/server架构,http作为通信协议。http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或

分布式时序数据库QTSDB的设计与实现

现有的开源时序数据库influxdb只支持单机运行,在面临大量数据写入时,会出现查询慢,机器负载高,单机容量的限制。为了解决这一问题,360基础架构团队在单机influxdb的基础上,开发了集群版——

百亿流量微服务网关的设计与实现

本文从百亿流量交易系统微服务网关(APIGateway)的现状和面临的问题出发,阐述微服务架构与API网关的关系,理顺流量网关与业务网关的脉络,分享API网关知识与经验。API网关概述“计算机科学领域