携程内部海量CRN项目解决方案

内容来源：2017年4月8日，携程框架研发部高级研发经理魏晓军在“第二届中国前端开发者大会”进行《CRN-WEB（Ctrip React Native Framework For Web）》演讲分享。IT大咖说做为独家视频合做方，经主办方和讲者审阅受权发布。

阅读字数：1375 | 3分钟阅读

嘉宾演讲视频连接： t.cn/RWx2BLo

摘要

随着公司内部CRN项目的日益增多，愈来愈多的业务部门开始意识到，是否能够将CRN的项目直接运行在浏览器上，以避免去他们在H5和SEO上的额外开发。甚至有的Web开发人员在想，是否可以在他们熟悉的浏览器上去开发CRN的项目，以便他们能更好、更快速的完成CRN项目。此次就是基于上述的场景，分享下咱们内部的解决方案——CRN-WEB，但愿可以帮助到你们。

什么是CRN-WEB

背景

最先是React Native实现了用一种方式开发APP。因为种种缘由和限制，咱们公司基于RN和以往的API开发了CRN。CRN最简单的功能就是打通了Android和iOS，开发人员只要写一套代码就能在Android和iOS上运行。CRN还对iOS的控制、开发效率的提升以及Hybrid性能的问题都有所帮助。

CRN项目的大规模出现，使得BU对H五、SEO的需求更加迫切，开发的CRN代码是否能在浏览器上运行呢？

其实不止咱们有这样的需求，在国外有一个React-Native-Web的项目，国内淘宝也作了一个React-Web。可见国内一些公司对这方面的需求仍是比较大的。

CRN-WEB的出现

Hybrid团队最初的梦想只是让RN的代码运行在浏览器上，这样就不用再去额外开发一套H5的代码。

简介

因而CRN-WEB就是产生了。它的底层是基于ReactJS，兼容RN和CRN组件及接口的H5框架。CRN-WEB完成了RN的最后一千米，弥补了RN在H5上的短板。支持RN和CRN的项目类型。

特色

CRN-WEB能够快速生成已有或者即将开发的CRN项目的H5版本。它和CRN、RN的API保持一致，代码能够直接运行在CRN或H5环境中。开发体验友好，支持元素审查、源码改动动态刷新，运行时debug远程真机调试。CRN-WEB支持浏览器、微信等多个平台。

CRN-WEB的架构设计

功能组成

从大方向来讲，功能组件包括了RN的组件和API。但要真正实现还须要样式、事件和生命周期等等。

要作本身的基于RN开发的Web框架，必定会用到本身公司的组件，好比Auth、Pay、UBT、ABTesting和Model。

还有能够拿来直接用的第三方插件React-Native-Web-Scrollable-Mixin。

CRN还有一些扩展的业务本身及API。应用层最外层的一个组件是用来封装APP里的路由，管理路由配置与Native交互，绑定Native暴露的变量与方法。对页面的封装功能是进行页面切换，PV自动埋点，页面生命周期自动管理。ViewPort能够理解为Web上的视口，页面展现的内容应该使用ViewPort包起来，根据导航栏的隐藏与否自动调整页面大小，优化页面切换卡顿问题。

运行环境有.Net上的H五、Hybrid和Node上的H5。

代码展现

如何使用CRN-WEB

开发环境工具

特色：

基于node.js，快速搭建开发环境。

使用简单，功能强大，支持源码调试。

源码修改，自动热更新。

几乎无修改的快速生成React-Native的H5版本。

生产环境工具

特色：

一、同时生成node.js项目、.net项目、hybrid项目。

二、自动提取BU用到的框架模块，使得框架代码能够根据BU的实际使用状况动态生成import｛Navigator，Platform｝from’react-native’;

成果就是攻略了FlightKnowAll页面（从giz250k优化到gzip131k）。

三、将原有的同步加载模式转为异步加载模式，使得BU的每一个页面均可以实现按需加载。

CRN-WEB的现状及发展

组件数量

目前咱们的框架总共提供了150多个component和API。其中咱们本身扩展的CRN component大概有50个，涉及到react-native的API有30多个，react-native component有40个，module的其它功能组件有30个左右。

市场

以携程为例，目前咱们的CRN项目大约有90多个，Hybrid项目有100多个，react-native项目有30多个。这些项目是彻底能够转到CRN WEB上去作的，都是咱们的潜在用户。

将来

接下来咱们要作的事就是功能完善以及性能优化，完善浏览器端的兼容性问题。

咱们正在和去哪儿团队合做开发YRN-WEB。咱们两家维护同一套底层，每家的业务代码加上这个底层就能够运行在各自的APP里去。

还有想作的就是开发一些更快捷的工具，更多地推广CRN WEB，这样框架的问题才能暴露出来。

我今天的分享就到这里，感谢聆听！