沪江:React Native三端融合应用实践

摘要

ReactNative给前端提供了一套两端共用代码和快速实现热更新的框架,但在实际落地中,需要进行大量的保障工作和优化工作来让业务能够平稳上线,另一方面,部分页面有着三端实现的需求,需要一套方案能够快速让React Native代码在web端实现复用,本次分享基于沪江大前端团队在React Native在三端融合过程中的横向工作中获得的经验和总结。

视频内容

为什么选择React Native?

React Native的优势

ReactNative天生就提供了两端共享的一套业务代码。

具有接近原生的性能。

社区活跃,很多团队都选择React Native作为解决方案。

React Native的劣势

Learnonce write anywhere。

部分组件性能不好。

会产生一些早期开发成本和融合开发成本。

沪江应用现状

沪江应用现在大部分是三端独立完成的,整体的复用率很低。

通过Web容器接入在线页面来实现多端复用的需求。

问题-原生

原生最大的优势就是它的体验非常好。

它的缺点也很明显,一旦有需求要频繁发版,android和iOS需要维护两套代码,整体代码的复用率会很低。

问题-在线页面

业务方需要写大量兼容代码进行判断。比如在hybrid里需要调用容器暴露的方法,在H5里要调用原生的方法。

体验性相较于原生来说要差很多。

使用在线页面经常会有运营方劫持CDN的问题,遇到网络问题展示不出代码,令大家非常头疼。

三端融合

三端融合就是希望一套代码可以三端复用。但从我们的角度来讲,并不是所有页面都需要做三端融合,我们会通过一些限定来控制页面的复杂度。

思路与方案

我们考虑使用React Web组件,底层配合React。

第二种方案是直接用Bable从React Native代码直接编译到React的代码。

还有一种方案就是我们提供一套完整的Web框架,去完成从React Native代码到浏览器上的展现,都通过一套框架去实现。

React Web组件+React

如果使用React Web组件+React,初次开发的成本比较低。

ReactWeb的组件非常复杂,在开发每一个组件和API的时候成本还是比较高的,也会造成组件代码冗余。

API不确定,隐藏的风险就是如果React做了调整,整套框架都要做相应的调整。

底层的优化会很复杂。React是很难控制的,有些业务场景中需要优化,我们只是在React Web这一层做优化,但这一层的优化未必能很好地映射到下一层。

Bable编译+React

这个方案其实是一个有些莽撞的想法,它的业务复杂度会非常高,因为无法控制业务方写的代码。

它最大的优势就在于业务方后期可以做过转化之后再进行下一次的调整。但目前来看这个方案的成本还是过高。

Web组件+定制化框架

最后我们选择了Web组件+定制化框架。

我们把React Native代码视作一套DSL语言,中间放了一层我们自己的React框架,保证提供部分组件三端的兼容性,也会使用部分社区三端组件进行一些改造来达到我们的业务需求。

这个方案摆脱了组件和框架依赖关系中的不确定性。

有很多本来要在组件中完成的功能可以放到框架层去做,减少了组件中的冗余代码。

React内部调用可能只用了一个providesModule进行模块之间的调用,但Web组件是无法通过这种方式直接调用框架里这些能力的。我们可以把这些API从底层抛出来,在Web组件+定制化框架这套方案里直接引入这些API。

我们还需要做的功能就是确保组件的兼容性,要让组件在Native端和Web端都能使用。

API还会扩展到hybrid的方案中。可以在API层面做hybrid的判断,提供出在Web中更丰富的一些API能力,然后根据实际开发中的情况进行调整。

常用组件及API

在我们的业务中把React Native当作一个体验更好的H5页面来处理。

大多数开发React Native代码的人原来都是做Web开发的,Web思路下的开发大量组件和API并不会使用。对于不会使用的这些组件和API,我们会写一个空方法然后做一个提示。

什么是需要在Web组件中做的?

处理React Native组件中的props,转换到相应的Web实现,或者初步处理交给框架二次处理。

处理React Native的API,调用Web API,降级方案中调用hybrid API。

什么是需要在框架中做的?

在框架层面我们使用的还是React,React框架中有组件生命周期、setState与更新队列、事件系统和Vitrual DOM这几项。

我们对框架做了一些精简,去除掉一些不稳定的API、React提供但React Native不提供的API、propType、事件合成以及对旧语法和旧浏览器的支持,简化了部分事务系统和调度系统。

框架中要添加的功能是props(style)处理、部分公共的API和React Native框架API。

整合的优势就在于减少了API的频繁引入,优化整个组件的编写成本,包体积变得更小。减少重复的props检查,提高了运行的效能。集成Webpack2,帮助业务方减少一些他们对一些不必要代码的引入。

React Native的上线保证

开发上线RN

横向团队在RN开发中的职责就是需要提供一个完整的技术架构方案,以及对落地之后技术的保证。

开发环境

我们为开发环境提供了一套测试容器。

Web开发通过发测试包迅速查看在APP中的运行情况。

提供了对应用代码进行热更新的能力。

保障

当错误率到达一定的数值会触发监控报警,然后发邮件提示业务方,业务方就可以通过配置中心选择。

功能性组件开发

Login、BI、Share、APP、RouterManger。

性能优化

我们认为性能优化最好的方法是扬长避短,目前我们主要做的是预加载和针对性的优化,还有RN自身的优化。

未来

未来在我们自定义的组件层中,还需要更多组件的支持。我们会考虑在React上做一些能力的封装,还会在实际业务上进行更多的调整。

我今天的分享就到这里,感谢聆听!

原文发布于微信公众号 - IT大咖说(itdakashuo)

原文发表时间:2017-09-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯开源的专栏

【开源公告】VasSonic轻量级的高性能的Hybrid框架正式开源

VasSonic轻量级的高性能的Hybrid框架VasSonic取名于索尼动画形象音速小子,是腾讯QQ会员 VAS团队研发的一个轻量级的高性能的Hybrid框架...

58610
来自专栏编程微刊

通用的layui框架系统管理后台模板

公司又要开始做新的项目了,这次的项目又是后台管理系统,老板说,之前的后台管理系统都是差不多的,这一次我们换个框架吧,然后抄了一下竞争公司的模板,给我发来了一张原...

1.1K20
来自专栏非著名程序员

Vue 大法好

? Vue 大法好, Vue 作为前端开发语言,真的是覆盖全面,前端,移动端,桌面端,端端渗透。而且越来越多的项目都采用 Vue 开发,现在连微信小程序都有了...

591120
来自专栏不想当开发的产品不是好测试

nmon在secureCRT下显示乱码问题

# 背景 下载安装了nmon,结果发现显示有问题,如下 ? # 解决 猜测应该是字体编码问题,查阅了解后,是因为CRT设置问题,需要修改下配置,(之前试用xsh...

37460
来自专栏腾讯云技术沙龙

卢萌凯:玩转SCF与COS的结合应用

大家好。我是腾讯云中间件及无服务器云函数架构师。我今天介绍分四部分:第一,对象存储COS简介。第二,比较实用的一部分,SCF与COS结合使用的应用场景。第三,比...

56670
来自专栏Python爬虫与算法进阶

为什么不推荐Selenium写爬虫

最近在群里经常会看到有些朋友说,使用Selenium去采集网站,我看到其实内心是很难受的,哎!为什么要用Selenium呢? 我想说下自己的看法,欢迎各位大佬批...

42760
来自专栏DannyHoo的专栏

iOS开发没有开发者账号照样可以进行真机测试

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1.2K20
来自专栏编程微刊

微信小程序从零开始开发步骤(八)引入框架WeUI

53440
来自专栏smy

js图片前端预览之 filereader 和 window.URL.createObjectURL

1 //preview img : filereader方式 2 document.getElementById('imgFile').onchan...

40270
来自专栏ytkah

android微信聊天记录导出到电脑【微信安卓版技巧】

  微信,对它又爱又恨!爱的是微信能替代很多手机通话短信,恨的是有些较早前的手机不能友好支持,比如ytkah之前用的i8000,挺上手的,就是没办法装微信,当时...

1.2K50

扫码关注云+社区

领取腾讯云代金券