天猫前端浅谈 React Native 与双 11

Question

目标

希望能透过 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 方式量化的产生内容。当然我们也不满足于当前的状态，还是有相当多的优化点可以进行，让更多业务切入、保持开源、活络的社群，以及最重要的是要能够为业务产生更大价值。