写点什么

终于来了!携程开源 RN 开发框架 - CRN

2020 年 2 月 15 日

终于来了!携程开源RN开发框架 - CRN

经过近两个月的准备,携程无线平台研发团队正式将内部的 React Native 开发框架 - CRN 实现开源。CRN 对原生的 React Native 框架进行了大量架构简化、性能和稳定性调优的工作,能大幅降低 RN 技术的应用成本。


背景

携程从 2016 年年中正式引入 React Native,至今已将近 3 年,现在逐步稳定,并成为内部首选的跨平台开发方案。


先简单回顾下 ReactNative 在携程的发展轨迹


  • 2016 年,RN 0.30.0 版本,试验期

  • 少数对性能和动态性都有要求的业务模块使用,其它大多选择流量小的业务流程做尝试;

  • 完成了打包 Bundle 拆分、框架预加载等核心性能瓶颈的优化;

  • 配套文档、发布系统建设;

  • 2017 年,RN 0.41.0 版本,大面积使用期

  • 携程旅行 App 各业务线都有接入使用,大量原先使用传统 Hybrid 技术开发的业务,切换到 CRN;

  • 为解决复杂业务的首屏渲染性能问题开发 LazyRequire 方案;

  • 配套的发布监控、异常监控、性能报表系统建设;

  • 2018 年,RN 0.51.0 版本,爆发期

  • 业务大规模接入,大多是主流程、全流程使用,现在大家使用的携程旅行 App 中有超过一半的页面都是 RN 开发的;

  • 集团内其他核心 App (智行、Trip.com、携程商旅等) 全部接入使用;

  • Android 平台的稳定性大幅提升;

  • 2019 年,RN 0.59.0 版本,稳定期

  • 刚升级完成,本次开源也是基于该版本;


为什么开源

  • 分享我们对 RN 框架的性能优化方案

  • 期待业内使用 RN 技术的同行通过开源社区与我们进行更深入的交流


开源内容

CRN 作为一个整体解决方案,涵盖了从开发框架、工具、文档、测试、发布到运维全研发生命周期的支持,与大量内部系统打通,并定制了适合携程研发组织结构的开发流程。


本次开源基于 ReactNative 0.59.0, react 16.8.3 版本, 开源的主要是性能优化部分, 也是规模化使用 RN 进行业务开发必须要做的优化。


  • CLI

  • 工程创建、调试和运行

  • 打包时拆分框架和业务代码

  • 打包时生成一套打包产物 (可同时运行在 iOS 和 Android 平台)

  • 打包时支持增量编译 (同一 JS 模块多次编译模块 ID 不变,便于差分更新)

  • LazyRequire, 按需加载

  • Runtime

  • 打包出的框架代码后台预加载

  • 业务代码缓存策略 (提升业务首屏二次打开速度)

  • 稳定性增强

  • 首屏渲染性能统计


适用场景

  • 纯 RN App

  • 因为启动就是 RN 业务,首页无法享受框架预加载带来的加载提速

  • 如果有多个业务包,CLI 的拆包可以减小包大小

  • 使用 CRN 开源的 Runtime(iOS/Android native 代码)可以增强 RN 的稳定性

  • 混合型 App

  • CRN 的优化是针对该场景,所有功能点都适合


改造优化

举例介绍其中两个重要的优化场景:


首屏加载性能

  • 运行 Demo 工程中的 Tester 模块 (为 RN 官方提供的测试模块)

  • 在 iPhone 7Plus、iPhone 6、Samsung S6 Edge+ 三款机型上测试

  • 分别采用 CRN 和标准 RN 两种模式加载


统计页面的首屏加载时间,对比图如下:



可见 CRN 优化后的页面首屏加载时间与优化前 RN 官方的方式相比在 iOS 上减少了 50%左右,Android 上减少了 60%左右,优化效果明显。


框架和业务代码拆分

以 RNDemo 工程为例(仅包含一个类似于 HelloWorld 的页面)


  • 官方命令打包出的 main.js 624KB

  • CRN 打包业务代码 js-modules 目录 2KB,common_ios.js 615KB

  • 如果大量业务模块使用 RN 开发,CRN 打包方案,只有一份框架代码 common_ios.js, 可以大幅减小安装包体积。


CRN 工程介绍

CRN 的开源项目地址:https://github.com/ctripcorp/crn


有分析过react-native仓库源码的同学应该会对项目工程结构感到很困惑,因为整个项目很庞大,涉及到 Native Runtime、Component、Tool、Tester 代码,还有不少的第三方依赖和组件管理工具的配置,结构也不是太清晰,所以官方现在进行了Lean Core的项目,目的就是对工程结构进行梳理,将非核心功能都移动到独立仓库。


React Native 涉及的技术栈比较广,包括 iOS/Android native 开发、React 组件开发、nodejs 开发、还有大量的 C++库,能同时能掌握这么多技术栈的工程师不多,CRN 对 RN 的 runtime,打包脚本都做了调整,为了能尽可能降低理解和接入成本,我们对 CRN 的开源工程做了大量简化,提供开源代码的同时,也将对应的 CLI 发布到了 npm 上,方便大家使用。


开源代码主要包括两部分


  • Runtime

  • 分为 iOS 和 Android 两个目录,内部包含 CRN 修改的 RN 代码

  • 默认带了 CRNDemo 工程,IDE 中可以直接运行

  • CLI

  • 和 ReactNative 的开源工程类似,开源的代码直接使用起来比较繁琐,所以提供了类似于 react-native 的 CLI 以简化使用

  • CLI 的使用参考 GitHub 中文档


如何上手

为了方便接入,首先安装 crn-cli, 执行 npm install -g crn-cli 即可


现有 App 如何接入?

  • Native Runtime 接入

  • 将 iOS/Android 目录下的 Runtime 代码替换 RN 官方代码,具体参考项目 README 文档

  • 启动逻辑中添加 webapp 目录代码物拷贝到工作目录,可参考 CRNDemo 工程源码

  • 启动时调用框架预加载代码

  • JS 代码接入

  • 在现有 JS 入口文件如index.js中添加一行模块导出代码,示例如下:

  • 使用crn-cli pack命令打包,并将打包产物拷贝到 Native 工程的 webapp 目录


全新 App 如何接入?

  • crn-cli init <project-name> 初始化工程,里面包含 iOS、Android、JS 代码

  • crn-cli run-ios , crn-cli run-android 运行 RN 工程,进行开发调试

  • crn-cli pack 打包,并将打包产物拷贝到 Native 工程的 webapp 目录


总结

CRN 是经过携程大规模生产验证的 RN 开发框架,我们通过对原生 RN 框架的改造,实现了更低的 RN 技术应用成本,同时解决了众多面对线上场景的工程技术问题。


未来我们将尽量保持开源版本与内部版本的一致,并开源更多工程和效率相关的模块与组件,期待同行在 GitHub 上向我们提出关于 RN 技术的想法和反馈意见。


作者介绍


赵辛贵,携程无线平台研发部开发总监。2013 年加入携程,主要负责 App 基础框架研发相关工作,曾参与 Native、Hybrid 和 React Native 框架设计、工程模块化、Android 插件化等项目。目前重点关注 React Native 技术在公司的推广和研发支持、无线框架和工程架构升级。


本文转载自公众号携程技术(ID:ctriptech)。


原文链接


https://mp.weixin.qq.com/s/yPgyqrggtYbrg4htEaw_wg


2020 年 2 月 15 日 17:45736

评论

发布
暂无评论
发现更多内容

干货分享丨玩转物联网IoTDA服务系列四-智能网关

华为云开发者社区

物联网 智能设备 应用场景 华为云 mqtt

Vue 学习笔记-3

多选参数

vue.js Vue vuejs

Vue 学习笔记-2

多选参数

vue.js Vue vuejs

报志愿|想学区块链,要上什么大学?报什么专业?

CECBC区块链专委会

高考 报考志愿 区块链专业 高校学院

Flink Weekly | 每周社区动态更新

Apache Flink

flink

Linux服务器存在某进程CPU过高如何追溯其问题根源?

Nick

Java Linux centos

Nginx 限流配置

Bruce Duan

Nginx限流

阿里巴巴大规模应用 Flink 的实战经验:常见问题诊断思路

Apache Flink

flink

上海首批金融科技“监管沙盒”应用名单出炉 区块链技术备受青睐

CECBC区块链专委会

金融科技 金融监管 创新与安全 智能多元化

Kafka两个高性价比的参数调优

大数据学徒

Java 大数据 kafka

如何消灭飞机的“黑色十分钟”,AI来帮忙

华为云开发者社区

华为 AI 智能时代 模型 华为云

ARTS 第 5 周

乌拉里

IO系列——用户空间与内核空间

Java联盟

io 零拷贝 用户空间 内核空间 zero copy

节约60%成本!虎牙直播云端大数据是怎么做到的?

小小的一朵云

API接口限流

Bruce Duan

分布式限流 单体限流 限流算法

一个好用的工作生活平衡方式

泰稳@极客邦科技

[POJ 1002] 487-3279 C++解题报告

一直AC一直爽

POJ ACM

Go: 通过代码学习 Map 的设计 — Part II

陈思敏捷

go golang map

胡继晔:发挥我国优势把依法治网落实到区块链管理中

CECBC区块链专委会

CECBC 胡继晔 依法治网 数字货币监管

主宰操作系统的经典算法

cxuan

后端 操作系统

正则表达式基础详解

懒猫

Java 正则表达式 前端 前端开发 正则

国产开源流媒体SRS4.0对视频监控GB28181的支持

潇湘落木

音视频 云直播 短视频 流媒体

CDN百科第七期 | 关于CDN的原理、术语和应用场景那些事

阿里云Edge Plus

CDN

英特尔中国研究院宋继强:芯片、系统、软件成为异构计算的三层级

最新动态

一文带你了解Zookeeper所有核心概念

小隐乐乐

zookeeper 分布式 分布式架构

Spring Boot + Vue前后端分离项目,Maven自动打包整合

xcbeyond

maven 前后端分离 springboot 部署

HTTPS详解

Bruce Duan

https 对称加密 非对称加密

敏捷软件开发宣言及十二原则

BigYoung

敏捷开发

推荐 16 款 IDEA 插件,让你的开发速度飞起来!

Bruce Duan

idea插件

架构师那些不能碰的禁忌

曲水流觞TechRill

架构师

IO系列——UNIX五种IO模型

Java联盟

io 多路复用 异步IO

4月17日 HarmonyOS 开发者日·上海站

4月17日 HarmonyOS 开发者日·上海站

终于来了!携程开源RN开发框架 - CRN-InfoQ