攜程內部海量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，這樣框架的問題才能暴露出來。

我今天的分享就到這裏，感謝聆聽！