注册 / 登录

从React Native到HTML Native

分会场:  架构演进/工程实践/大前端

分享时间: 2017年11月9日 - 12日

案例来源 :

案例讲师

雷志兴

百度 手机百度架构师

雷志兴,英文名 Berg,2007 年加入百度前端团队,走过百度从 20 名前端到千余名前端的历程。Berg 关注前端基础技术和工程化,早年负责过百度前端基础库,后于 2011 年发起 FIS 项目(http://fis.baidu.com)并推广到 20 多个百度业务;最近两年主要工作是在工程中实践跨端解决方案。他也曾在百度世界、Velocity、QCon、Hangjs、阿里技术嘉年华、TOP100Summit等会议中发表过主题演讲。 在工作之余,Berg 热爱骑行,曾骑车从青藏线、滇藏线两次抵达拉萨,环西西里岛、北海道、新西兰南岛、台湾岛,从海岸公路穿过越南,环骑柬埔寨吴哥窟等。

扫描二维码分享案例

 

案例简述

 

React Native和Webview的处境已转变。前者由于其最初设计的目的是构建APP整体,却在大型APP中位置尴尬。与此同时,Webview以及基于HTML5的生态(如各种「号」、小程序),正在平台级APP中占据重要位置。
API层靠拢HTML5。对外暴露更适合前端程序员理解的API的同时,放弃vDOM和DOM diff轻装上阵。这不仅让开发成本大幅降低,还让Native UI的渲染速度显著提升。
Webview不再是一个UI控件,而是框架的核心组成部分。业务开发者便可以根据工作量、业务形态,能相对自由的决定界面是由Webview渲染还是由Native UI渲染,以达到开发效率和体验的更好平衡。由于我们已统一API层,开发者做调整的成本很低。

 

案例目标

 

更新中...

 

成功(或教训)要点

 

1.API层靠拢HTML5
2.Webview不再是一个UI控件,而是框架的核心组成部分。
3.在容器框架层针对大型APP场景做设计。
4. 隔离渲染和逻辑层,性能优化会有更大想象空间。

 

案例ROI分析

 

1.API层靠拢HTML5后,对外暴露更适合前端程序员理解的API的同时,放弃vDOM和DOM diff轻装上阵。这不仅让开发成本大幅降低,还让Native UI的渲染速度显著提升。
2.Webview不再是一个UI控件,而是框架的核心组成部分。业务开发者便可以根据工作量、业务形态,能相对自由的决定界面是由Webview渲染还是由Native UI渲染,以达到开发效率和体验的更好平衡。由于我们已统一API层,开发者做调整的成本很低。
3.在容器框架层针对大型APP场景做设计。APP的主体仍然由Native Code实现,JS to Native作为一个动态化方案,应该以极为轻量的形式存在。
4.隔离渲染和逻辑层,性能优化会有更大想象空间。React Native的渲染层完全由JS控制,带来了巨大的灵活性,但也在性能上也有很大桎梏。隔离渲染层后,我们能保留灵活性的同时,不断提升性能。

 

案例启示

 

更新中...