【AICon 全球人工智能与大模型开发与应用大会】改变 AI 时代下写代码的模式 >>> 了解详情
写点什么

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

  • 2020-02-15
  • 本文字数:2549 字

    阅读完需:约 8 分钟

终于来了!携程开源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-02-15 17:451670

评论

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

阿里巴巴中国站按关键字搜索商品 API 的调用频率限制是多少?

技术冰糖葫芦

API 开发

华为亮相OpenInfra Days China 2023,分享开源基础设施的实践和技术展望

彭飞

数据挖掘与低代码开发应用:加速业务创新的黄金组合

快乐非自愿限量之名

数据挖掘 低代码 数据应用

“粤”见昇腾AI,昇腾AI开发者创享日·广州站即将开启

彭飞

Spring Boot 项目代码混淆实战:保护代码安全,防止泄露

开源 | Spark Commiter 深度解读:Apache Spark Native Engine

网易数帆

大数据 spark 开源 Gluten

2023Q4 私有化版本发布,和鲸 ModelWhale 持续赋能大科研、高校教改的 AI for Science

ModelWhale

人工智能 云计算 数据分析 超算 私有化部署

理解意图,加速迈向L4高度自智网络

鲸品堂

意图识别 自智网络 12 月 PK 榜

Java医院绩效考核系统源码支持二次开发

源码星辰

Java

Netty源码学习7——netty是如何发送数据的

不在线第一只蜗牛

学习 源码 Netty

11 | 排序(上):为什么插入排序比冒泡排序更受欢迎

鲁米

实现实景自动直播的详细教程!

青否数字人

低代码如何降低门槛、快速交付、实现可持续IT架构?

树上有只程序猿

软件开发 低代码平台 JNPF

Ulysses for Mac(Markdown文本编辑软件) 33中文激活版

mac

文本编辑器 苹果mac Windows软件 Ulysses

IT外包服务广泛应用于哪些行业?

Ogcloud

外包 IT 外包公司 外包项目 IT 运维

人工智能与供应链行业融合:开启智能化供应链的新时代

不在线第一只蜗牛

人工智能 供应链 智能化

又添三位“信伙伴”,亚信安慧AntDB数据库与南京一鸣、广东鸿数、北京数见完成兼容互认

亚信AntDB数据库

数据库 AntDB AntDB数据库

分享一个LCD驱动框架

不在线第一只蜗牛

教程 开发框架 lcd

深入解析Linux进程管理机制

EquatorCoco

Linux 运维

释放潜能:IT外包服务对业务增长的强大推动

Ogcloud

外包 IT 外包公司 外包项目 IT 运维

数字人在微信视频号开播教程!

青否数字人

数字人

想转行学计算机,但现在听说互联网裁员太严重?

代码生成器研究

Microsoft Word LTSC 2021 for mac v16.79.2永久激活版

mac

word 苹果mac Windows软件 文字处理软件

安全测试工具Burpsuit和OWASP ZAP使用入门指南

快乐非自愿限量之名

测试工具 安全测试 入门指南

大数据 - MapReduce:从原理到实战的全面指南

快乐非自愿限量之名

数据库 大数据 工作原理

从HumanEval到CoderEval: 你的代码生成模型真的work吗?

华为云开发者联盟

人工智能 华为云 华为云开发者联盟 代码生成大模型

如何转行互联网?

代码生成器研究

程序员世界破破烂烂,低代码总在缝缝补补

伤感汤姆布利柏

Java Vue 前端 低代码

数字人直播实时互动的操作方法!

青否数字人

数字人

智能联动第三方告警中心,完美实现故障响应全闭环

观测云

人工智能 监控 智能告警

JNPF低代码开发平台高效赋能开发者

互联网工科生

开发者工具 低代码开发 JNPF

终于来了!携程开源RN开发框架 - CRN_技术管理_赵辛贵_InfoQ精选文章