目标

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