专栏首页IT大咖说沪江:React Native三端融合应用实践

沪江: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),作者:陈达孚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小米弹性调度平台Ocean——从PaaS到DCOS

    IT大咖说
  • vSAN常见错误故障排错

    内容来源:2018 年 8 月 7 日,VMware大中华区原厂高级技术讲师史峻在“VMware直播分享 第二期”进行《vSAN常见错误故障排错》演讲分享。IT...

    IT大咖说
  • vSAN架构解析与6.7功能介绍

    内容来源:2018 年 7 月 17 日,VMware大中华区原厂高级技术讲师史峻在“VMware直播分享 第二期”进行《vSAN架构解析与6.7功能介绍》演讲...

    IT大咖说
  • 4、React组件之性能优化

    优化并不嫌早。因为,对性能影响最关键的部分,往往涉及解决方案核心,决定整体的架构, 将来要改变的时候牵扯更大。

    keyWords
  • 「技术架构」EA874:技术架构的原则和标准

    原则经常是正式EA工作的一部分。它们在个人决策和广泛适用且独立于具体决策的基本业务目标之间提供了更强的联系。原则是组织为激发最佳行为而选择的准则或最佳实践。它们...

    首席架构师智库
  • 开发 | 星际争霸2人工智能研究环境 SC2LE 初体验

    1 前言 昨天,也就是2017年8月10号,DeepMind联合暴雪发布了星际争霸2人工智能研究环境SC2LE,从而使人工智能的研究进入到一个全新的阶段。这次...

    AI科技评论
  • 来了来了!趋势预测算法大PK!

    趋势预测在很多应用场景中都会起到至关重要的作用,比如淘宝商家会考虑库存量应该保持在多少才能够满足客户需求,商场希望得知假期会迎来多大的客流量以安排系列活动,机场...

    AI科技大本营
  • React Native 截屏组件

    截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕显示的页面内容。如果是ScrollView,那么未显示的部分是不会被截取的。

    forrest23
  • 塔荐 | 比特币突破8000美元,我们找到了用DL预测虚拟货币价格的方法

    前 言 截至 11 月 22 日,比特币的价格再创历史新高(约 1 比特币兑 8120 美元),在惊讶于虚拟货币「不可战胜」的同时,我们或许能可以从这一波热潮...

    灯塔大数据
  • React学习(2)——状态、事件与动态渲染 原

        上一篇文章最后说明了组件传入的参数必须是只读的,但是在丰富的前端应用中,页面样式是时时刻刻会发生变化的。在前面的章节中介绍了一个时钟的例子,通过重复调用...

    随风溜达的向日葵

扫码关注云+社区

领取腾讯云代金券