作者简介
赵辛贵,携程无线平台研发部开发总监。2013年加入携程,主要负责App基础框架研发相关工作,曾参与Native、Hybrid和React Native框架设计、工程模块化、Android插件化等项目。目前重点关注React Native技术在公司的推广和研发支持、无线框架和工程架构升级。
经过近两个月的准备,携程无线平台研发团队正式将内部的React Native开发框架 - CRN 实现开源。CRN对原生的React Native框架进行了大量架构简化、性能和稳定性调优的工作,能大幅降低RN技术的应用成本。
携程从2016年年中正式引入React Native,至今已将近3年,现在逐步稳定,并成为内部首选的跨平台开发方案。
先简单回顾下ReactNative在携程的发展轨迹
CRN作为一个整体解决方案,涵盖了从开发框架、工具、文档、测试、发布到运维全研发生命周期的支持,与大量内部系统打通,并定制了适合携程研发组织结构的开发流程。
本次开源基于ReactNative 0.59.0, react 16.8.3版本, 开源的主要是性能优化部分, 也是规模化使用RN进行业务开发必须要做的优化。
举例介绍其中两个重要的优化场景:
统计页面的首屏加载时间,对比图如下:
可见CRN优化后的页面首屏加载时间与优化前RN官方的方式相比在iOS上减少了50%左右,Android上减少了60%左右,优化效果明显。
以RNDemo工程为例(仅包含一个类似于HelloWorld的页面)
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上,方便大家使用。
开源代码主要包括两部分
为了方便接入,首先安装crn-cli, 执行 npm install -g crn-cli
即可
index.js
中添加一行模块导出代码,示例如下:
AppRegistry.registerComponent(appName, () => App); module.exports = App; //添加一行模块导出代码即可crn-cli pack
命令打包,并将打包产物拷贝到Native工程的webapp目录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技术的想法和反馈意见。