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

[maisui99]

目标

希望能透过 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后也还有很多优化点持续进行：

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

心得

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

天猫前端团队招聘

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

[atom992]

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

[rockcoder23]

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

[small-tou]

rn的bundle是远程加载的么？

[wangjianbing925]

能开源下那些组件就好

[cssoul]

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

[dingyiming]

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

[IskenHuang]

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

[cssoul]

明白了，期待开源 🐒

2016-01-22 21:55 GMT+08:00 Isken Huang [email protected]:

@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
#27 (comment)
.

/****************************************************

From ：张军
旺旺ID：黑幕困兽
E-mail：[email protected]

*****************************************************/

[frankjunqi]

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

[IskenHuang]

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

[iugo]

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

[IskenHuang]

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

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

[ChenQingZhen]

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

[IskenHuang]

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

[zhanyouwei]

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

[IskenHuang]

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

[hellllll0world]

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

[IskenHuang]

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

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