ReactNative替代方案plato在腾讯课堂App中的实践

王华杰

腾讯    移动客户端开发工程师

2016年加入腾讯,曾就职于努比亚,主要从事移动客户端开发; 在腾讯负责腾讯课堂app相关开发工作,包括react-native, h5 bybird等。最近plato立项以来,主要从事plato相关开发工作,如plato运行环境、bridge,自研排版引擎以及新优化方案等。

徐杰

腾讯    高级工程师

2011年加入腾讯,曾就职于丁香园,同花顺,主要是做web开发工程师; 在腾讯前3年负责过的产品包括flash相关的,游戏平台充值相关的,各种内部支撑系统; 腾讯后4年主要负责QQ空间hybrid App类开发,H5,ReactNative(RN)等相关开发; 最近半年因为RN的license问题,我们在线教育和qq空间成立两个联合团队共14人左右投入到RN的替代方案开发,也就是plato(柏拉图)解决方案;顺利在腾讯课堂IOS和android上线,性能优于RN,和weex性能接近

演讲概要

问题背景:腾讯课堂,企鹅辅导,QQ空间,手机QQ等都有不少业务用RN进行承载,由于RN的BSD+Patents License问题,于是我们新实现了一套RN的替代方案;
方案选型:为了方便业务使用者一套代码可以运行在三端(android+ios客户端+普通浏览器+降级为H5的plato内置浏览器),前端和客户端分别协定了各自的vdom结构描述,jsbridge接口规范,可以方便业务开发更加专注业务逻辑;
技术细节:前端业务代码基于preact框架编写业务逻辑+jsx语法,通过babel转化为ES5语法,使用webpack打包为jsbundle文件;其中所有的组件会被解析为具有固定DSL描述格式的DOM结构体(JSON字符串),将该json字符串通知客户端,android使用v8引擎进行解析,IOS使用jsc进行解析,统一通过yago的C++替代版本进行定位排版渲染;事件注册相关的也在DSL进行描述,通过事件监听方式进行处理;目前支持常规的div,img,text,也支持listView,scrollView,refreshController复合组件,基于上述处理,可以有效的渲染出来RN的替代页面,比如腾讯课堂首页,列表页;
实施效果:我们通过使用plato解决方案替代RN后,总体性能比RN要高30%,能有效的降低白屏的时间;与weex相比实现方案对比后,总体性能数据接近,没有明显差异;
降级处理:为了防止不可知的问题导致展示页面异常,我们也提供了相应的降级策略,可以在原先的基础上,仅仅需要很少的改动,就可以运行于降级浏览器侧,用H5进行展示;(因为我们组件写法原先就默认使用的W3C标准进行开发,比如使用div,img等)
于是在QQ空间的游戏应用页面,QQ的群应用市场也在使用plato进行开发。

听众收益

1.从前端角度学习如何设计一套新的类RN解决方案;
2.在与客户端同学在进行开发和联调中碰到的各种细节和技术问题的解决方法;
3.大前端融合下, 如何更好的理解客户端的想法和实现思路。