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

2019-04-12 admin

作者简介

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

经过近两个月的准备,携程无线平台研发团队正式将内部的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

改造优化

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

首屏加载性能

  • 运行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的开源项目地址:github.com/ctripcorp/c…

有分析过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工程源码

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

    //iOS - CRNBridgeManager.h- (void)prepareBridgeIfNeed;//Android - CRNInstanceManager.javapublic static void prepareReactInstanceIfNeed()
    
  • JS代码接入

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

    AppRegistry.registerComponent(appName, () => App);module.exports = App; //添加一行模块导出代码即可
    
  • 使用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技术的想法和反馈意见。

【推荐阅读】

[转载]原文链接:https://mp.weixin.qq.com/s/yPgyqrggtYbrg4htEaw_wg

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-61553.html

文章标题:终于来了!携程开源RN开发框架 - CRN

相关文章
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
H5即将迎来黄金时代 轻应用再成行业焦点
鎽樿�侊細浠庣伀閫熻交搴旂敤鑾峰緱鎶曡祫绛変腑涓嶉毦鐪嬪嚭锛孒TML5鍗冲皢杩庢潵榛勯噾鏃朵唬銆傝秺鏉ヨ秺澶氱殑浼佷笟鎴栧垱涓氳€呭紑濮嬫秹瓒矵5锛岃�╄交搴旂敤鍐嶆�℃垚涓鸿�屼笟鐨勭劍鐐癸紝鎺ヤ笅鏉ュ皢鏈夋洿澶欻5寮曟搸浠ュ強鏇村�欻5...
2015-11-12
回到顶部