天猫双11前端分享系列（三）：浅谈 React Native与双11

maisui99 commented 8 years ago

目标

希望能透过 react-native 的动态性，将 react native 的优势带入客户端，如手淘、手猫，让使用客户端浏览体验更佳，并且保持动态性，快速协助响应业务。斑马(页面搭建平台) 是一套让非技术人员也能自行搭建页面的 CMS 系统，基于Node实现，由天猫自主开发，此系统支持 PC/Mobile 页面，React Native 整入后，让页面搭建上同步产出 PC/Mobile/Native 版本。

模块构建

以应用为单位，以頁面为单位

React Native 原设定为应用级别，让整个应用都使用 React Native，但对于手淘、手猫这类应用已经有大量业务跑在线上，无法进行一次性的迁移，在 @一渡、@隐风等人的努力下，将原先以应用为单位细化以页面为单位，让使用上更佳灵活，让部分页面使用，不需要侵入整个系统。

React Native 模块化與斑马结合

模块经由服务端 wormhole 透过 xtemplate 模版语言，将页面上使用到的模块、打底数据、页面基本设置模块合并后让终端载入，客户端 React Native 容器载入后即可渲染页面。一般页面在使用 8~12 个模块含打抵数据文件大小 gzip 后约 80kb，透过 CDN 加载在 3G/4G/WIFI 下都可达到1秒内渲染完成。

React Native 在开发完成到上线这段期间必须要经过打包过程，在与 @正霖一同努力后将打包工具做了几层细化。

将基础模块、业务模块分开打包
- 基础模块：一般非 minify 前大约 5 万行代码，现已透过 package app 预载入客户端中。
- 业务代码：一般约数千行，每次根据不同页面重新加载
模块分开打包。
- 模块打包同时只打包模块自身业务代码，并将模块依赖关系产出，在服务端 wormhole 进行相同模块去重，让页面文件大小最佳化。
- 提供更多接口让其他应用整合
- 目前提供命令行工具以及 js 端提供 promise 接口，让后续其他特殊应用想要使用同时更加便利。
页面基本设置模块编译工具
- 由于页面基本设置模块也是 React Native 的部份代码，因此也是需要打包，并在打包同时插入 xtemplate 语法，让服务端 wormhole 识别哪些模块必须要插入，模块合并于代码中的哪个区块。
  不同角色各自发挥价值

模块开发者专注在高质量模块开发，数据投放交由数据后端系统，运营根据需求选择模块、填入数据，量化产出页面，让各种频道、营销活动快速搭建。同时产出 PC/Mobile web/Native 页面，让不同平台都能拥有最佳使用体验。

错误处理、监控、性能、埋点

目前天猫这边在React的应用中处理了包括容器初始化的监控，接入了与客户端Native一致的业务埋点系统和错误监控系统，可查看每一条 JS 错误完整的 stack 以及 RN 容器错误的详细信息，并且相同的错误会被归类在一起，方便统计错误占比。其中 JS 错误分为严重、不严重两种，其中严重错误可能会影响 UI 崩坏或页面渲染异常，通过报警加上错误信息可以更快速的排错

基础组件支持

目前基础组件设计都是以 web 模式靠拢，如 web 的 A 标签，RN 上也有完全相同的组件，在参数、行为上也是完全间容。

目前天猫自己开发了包括：

通用逻辑组件，包括埋点等监控
LazyloadView，ScrollView/ListView 增加 onScrollEnd, 懒加载图片、懒加载组件、通知組件已被載入功能
Button，如同 web 使用的 A 标签，包含跳转、埋点、优惠券功能，懒加载内容功能
LoadingView，加载中占位用 loading
Image，圖片組件，整合 CrossImage 於其中
Grid，布局组件 ...
双11期间结果

双11期间ReactNative上线共 30 天，从数据上看来，多数状况下首屏性能是优于 web，尤其在 web 端缓存未命中状况下。另外在 UI 操作体验上，React Native 基本都能达到 60 fps 的流畅体验。

就双11后也还有很多优化点持续进行：

内存问题：就双11所使用的 0.8.0 版本看来仍然不够理想，无法在正确的时间点适当的释放内存。
js 加载重复模块：目前已在进行优化，考量使用类似前端 loader 的方式将 js 异步载入，以便在客户端缓存相同模块
android 支持：由于 React Native 0.14 开始有对于 android 较完善支持，目前也在针对这块与 ios 的 api 落差抹平。
心得

就双11的这次 React Native ，让我们看到了 React Native 不再只是能够针对应用、页面级别的开发，也可以如 CMS 方式量化的产生内容。当然我们也不满足于当前的状态，还是有相当多的优化点可以进行，让更多业务切入、保持开源、活络的社群，以及最重要的是要能够为业务产生更大价值。

天猫前端团队招聘

如果你看了这篇文章，对加入天猫前端团队有意向的，可以发简历到join-tmallfe@list.alibaba-inc.com，招聘要求见：https://job.alibaba.com/zhaopin/position_detail.htm?positionId=3504

atom992 commented 8 years ago

Weex 和 React Native在阿里是共存，还是逐步替代？

rockcoder23 commented 8 years ago

目前只看到了方案，希望能更多抛出实现原理等干货呢~

small-tou commented 8 years ago

rn的bundle是远程加载的么？

wangjianbing925 commented 8 years ago

能开源下那些组件就好

cssoul commented 8 years ago

希望能分享下组件实现原理，如何处理React Native转换React.js

dingyiming commented 8 years ago

Facebook家的react看来是不得不学了。。。

IskenHuang commented 8 years ago

@atom992 Weex 與 React Native 是同步進行的，為了不同的場景而生 @xinyu198736 是遠程加載沒錯，經過業務基礎拆分後，每個頁面含打底數據大約 80k @wangjianbing925 這些組件暫時還蠻辦法開源出來，有機會抽離業務代碼後會考慮的 @cssoul 其實並不是將 React Native 轉換為 Reactjs ，而是由組件級別做對應，將共同部分抽象出來，先前所嘗試以映射方式轉換會造成大量的 hack，並且損失了 web 原本豐富的功能

cssoul commented 8 years ago

明白了，期待开源 🐒

2016-01-22 21:55 GMT+08:00 Isken Huang notifications@github.com:

@atom992 https://github.com/atom992 Weex 與 React Native 是同步進行的，為了不同的場景而生 @xinyu198736 https://github.com/xinyu198736 是遠程加載沒錯，經過業務基礎拆分後，每個頁面含打底數據大約 80k @wangjianbing925 https://github.com/wangjianbing925 這些組件暫時還蠻辦法開源出來，有機會抽離業務代碼後會考慮的 @cssoul https://github.com/cssoul 其實並不是將 React Native 轉換為 Reactjs ，而是由組件級別做對應，將共同部分抽象出來，先前所嘗試以映射方式轉換會造成大量的 hack，並且損失了 web 原本豐富的功能

— Reply to this email directly or view it on GitHub https://github.com/tmallfe/tmallfe.github.io/issues/27#issuecomment-173926884 .

/****

From ：张军旺旺ID：黑幕困兽 E-mail：hbjszj@gmail.com

*****/

frankjunqi commented 8 years ago

天猫的哪些页面是rn写的呢？我想体验下。

IskenHuang commented 8 years ago

@frankjunqi 目前線上已經沒有頁面了

iugo commented 8 years ago

以前看鬼道的分享, 说最高目标是能使用 React Native 重构所有业务, 不知道天猫在使用过后觉得 React Native 是否真有如此大前景让你们投入其中?

IskenHuang commented 8 years ago

@iugo 目前會持續投入這是肯定的。

應該是這樣來理解，目前 Native 開發最大問題就是發版更新率問題，尤其在 iOS 上還必須走蘋果審核這關，Native 最大好處就是預先編譯好並且放在本地執行損失了靈活性，而 React Native 這類方案是取一個 Native 體驗、web 靈活性的中間值，天貓對於這類 "動態 Native" 方案會持續投入，React Native 是個相當優秀的方案也有足夠大的社群，但我們也不排除使用其他方案達到我們的目標，讓業務可以快速響應，並且給用戶最好的體驗。

ChenQingZhen commented 8 years ago

手机淘宝和手机天猫都是用React Native做的吗？

IskenHuang commented 8 years ago

@ChenQingZhen React Native 確實是一套很優秀的方案，但目前已經全部改投入 Weex （http://alibaba.github.io/weex/），另外天貓、手淘都是個很巨大的 app，承載大量的業務邏輯，沒辦法在短時間內就整個改造完整，目前是採用逐步替換的方式進行。

zhanyouwei commented 7 years ago

@IskenHuang 就是说RN方案已经不会再更新了吗？全部改用Weex实现了吗？

IskenHuang commented 7 years ago

@zhanyouwei 以 2016 雙 11 來說已經全面 Weex 化，RN 應該說不是不再更新，而是會以一種新的方式來使用 Reactjs

hellllll0world commented 6 years ago

RN 在异常处理这块有点坑，虽然 JS 层的异常可以全局捕获，但是代码不能继续往下执行，如果不捕获就直接崩溃，关于这个，有什么好的建议不

IskenHuang commented 6 years ago

@onceyoung 目前在 Weex 上也有類似問題，我們用的方式是這兩種方式規避：

全局捕獲但是把這錯吞掉不阻塞 js 運行，然後錯誤 js 上報。
代碼上更加模塊化的方式拆分，在每個模塊中把環境盡可能獨立減少對其他模塊的影響，這樣可以避免掉某些模塊出了問題影響到更大的範圍

tmallfe / tmallfe.github.io