攜程內部海量CRN專案解決方案

IT大咖說發表於2017-10-24

內容來源：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對H5、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上的H5、Hybrid和Node上的H5。