Moles框架，攜程基于React Native的跨平臺開發
本文為攜程技術中心的投稿。攜程關于React Native的大招來了！之前我們分享個過攜程曾發布過一個讓React Native兼容H5的框架 ReactMix ，而這個Moles更加徹底，貫徹一套代碼到處運行，來看看它是如何實現的。
因為支持用javascript開發原生應用，ReactNative一推出就受到不少公司熱捧，各家都躍躍欲試。但有一個痛點是，在移動端，我們是否有必要開發多套程序：iOS、Android和H5？本次將通過對Moles框架的分享，介紹攜程在React Native方面的實戰干貨，希望給大家一些靈感和啟發。
本次分享的內容包括三個方面：
- Moles框架在ReactNative和我們主App的集成中起到了什么作用？
- Moles框架是如何打通Android、iOS、H5、SEO，讓我們一套代碼跑在多個平臺上？
- Moles框架的組成以及原理是怎樣的?
這些內容將通過以下幾個部分的講解來一一給大家進行解答：
-
Moles 框架的出現
-
Moles 框架的組成
-
Moles 框架的功能
-
Moles 框架的原理簡析
-
Moles 框架的使用
-
Moles 框架的案例
-
開源計劃。
一、React Native的現狀
React Native是2015年3月份非死book開源的一個Native上的一個框架。那么為什么它現在會這么火呢。
我們先來看看它有什么優點。
首先，對于做前端的我來說，最吸引的就是可以用javascript來開發Native應用了。之前javascript只可以開發瀏覽器上的一些功能，隨著Node.js的出現，又讓javascript走向了服務端，現在React Native的出現又讓javascript走向了Native端。如果要用現在一個時髦的詞來形容javascript的話，我覺得“全棧”真的不為過。
其次，React Native是非死book將ReactJS的思想移植到Native端。所以React Native就擁有了RectJS的很多特性，如：組件化思想、Virtual Dom技術以及JSX與Flexbox組合完成的布局等等，同時React Native又引入了熱更新機制、CssLayout機制，讓開發人員尤其是Native開發人員眼前一亮。
有優點也有缺點，我們再來看看它的不足。
我們知道React Native先出了iOS版本，然后出了Android版本。兩個版本之間存在很多的差異性，甚至有好多組件都會帶有平臺的后綴，這使得開發人員必須要為這兩個平臺寫不同的代碼。
此外，對于公司來說，在移動上的投入，不僅有Native還會有H5，而在H5上React Native并沒有考慮。從MVC框架的角度來看，React Native只做了View這一層，那么Controller、Model、Router還需要做。從App的完整性來看，只學會React Native并不能開發一個健全的App。它的更新策略、Hybrid API的提供，配套的UI組件、監控機制等等這些都沒有。
二、Moles 框架的出現
伴隨著React Native項目的開發，逐漸的Moles框架就形成了。
mole [m??l] 小鼴鼠，是種鑿洞能力非常強的嚙齒類動物。把框架稱為之為Moles，也是寄希望我們的框架能像mole一樣，能夠打洞，能夠打通Android、iOS、H5、SEO這幾個平臺。當然一個mole的能力是有限的，所以我們取其復數形式Moles。
如果說當前移動端的三大痛點是：性能、動態性、多端適配的話。那么我認為React Native解決了性能、動態性，而我們Moles則解決了多端適配的問題。
Moles的目標是要盡可能的做到在H5端開發的內容可以直接運行在Native上，在Native端開發的內容也可以直接運行在H5上。
三、Moles 框架的組成
該框架主要由三部分組成
moles-web
該部分主要是為H5服務，是將React Native在Android、iOS中沒有差異化的Components、APIs提取出來，單獨封裝成一個Library供H5端來使用。這樣做的好處是，這個Library只在H5上會是使用到，在Native是不需要的，以減少框架在Native的體積。
moles-cui
該部分主要是是將React Native在Android、iOS中有差異化的Components、APIs提取出來，并且添加一些公司定制化的組件進去，包括：UI組件、監控組件、采集組件、路由組件等等。moles-cui可以說是Moles框架的核心部分，它不但Native開發需要使用，在H5上的開發也需要使用。
moles-cli
該部分主要包括Moles項目的初始化、編譯、打包等功能。
下面是moles-web與moles-cui的一個關系圖
四、Moles 框架的功能
Moles框架的功能可以用下圖來說明：
主要涵蓋的對不同平臺的適配、對底層API的調用以及對APP中性能和錯誤的監控等等。
那么Moles在攜程主App中所處的位置如何呢？
如上圖所示它就是BU開發人員和React Native、Ctrip React Native的一個橋梁。讓開發人員更專注于自己的業務邏輯，而不必為React Native的更新問題、不同平臺的兼容性問題等等而煩惱。
五、Moles 框架的原理簡析
由于Moles涉及的內容眾多，如：路由的設計、頁面生命周期的設計、打包的設計等等。這里我們僅以組件的設計為例，來簡析其實現原理。
要做到Native和H5代碼共享，通常想到的做法有兩種：
1、Native組件運行在H5上，如：
2、H5組件運行在Native上，如：
Moles中組件的設計采用了做法1的思路，就是將Native上支持的View、Text、Navigator等組件運行在H5上。要實現Native組件運行在H5上，需要解決兩個難點：1、組件化 2、組件的生命周期。
我們剛開始的時候就講到，React Native上的組件化思想是非死book將ReactJS的思想用在Native上。這就為我們能在H5上實現Native的組件奠定了基礎。所以我們完全可以借助ReactJS來開發這些組件，但是在實際的開發中，發現ReactJS的體量實在是太大了，所以我們最后采用了攜程開源的react-lite框架。
六、Moles 框架的使用
為了減少大家的學習成本，Moles框架在設計方面盡量采用大家比較熟悉的語法和命令。要使用Moles，需要先安裝moles-cli。
下面是第一次使用moles-cli的簡單流程：
安裝moles-cli
$ sudo cnpm install @ctrip/moles-cli -g
初始化Moles項目
$ moles init ProjectName
安裝項目依賴
$ cd ProjectName
$ cnpm install
moles-cli初始化后的目錄結構和react-native-cli初始化出來的結構幾乎一樣，唯一不同的是多了一個web目錄，該目錄主要是為H5服務。
下面來看下簡單的代碼使用情況
上面的代碼若在Native端會調用React Natie提供的react-native模塊，在H5端會調用moles-web模塊
上面的代碼為moles-cui的使用，不論在Native端還是H5端，都需要通過引入'moles-cui'模塊來使用。
以運行iOS項目為例
$ moles run-ios
打包、拆包項目
$ moles packer
--input/path/to/project
--entry index.ios.js
--output/path/to/build
--bundle bu.bundle
--common true
參數說明：
input:項目目錄（默認為當前目錄）
entry:入口文件名稱（默認為 index.js）
output:輸出目錄（默認為 ./build 目錄）
bundle:默認輸出文件名稱與入口文件同名，也可指定文件名
common:是否打common包（默認為false）
七、Moles 框架的案例
目前Moles框架已在攜程的主App上投入生產，有興趣的同學可以安裝攜程App 6.17，進入”我的攜程“頻道，其中的站內信頁面就是基于Moles框架開發的。現在還有攻略、游輪等頻道也在陸陸續續的接入中。相信在不久的將來，大家會在攜程的各大頻道上看到Moles的身影。我們也希望Moles能成為攜程乃至業內基于React Native開發項目的首選框架。
下面是基于Moles開發的效果圖：
我攜頻道
攻略頻道
八、開源計劃
之前分享的時候，就有不少同學咨詢開源的事情。這里簡述下，Moles未來將是一個開源的框架。是一個為開發React Native項目提供解決方案的開源框架。我們會將Moles框架的相關產品逐步的開源給大家。
目前已將Moles框架的打包工具moles-packer開源在了github上。
關于moles-packer的一些介紹：
moles-packer 是由攜程框架團隊研發的，與攜程Moles框架配套使用的React Native 打包和拆包工具，同時支持原生的 React Native 項目。
當前版本:0.1.3
github地址:https://github.com/ctripcorp/moles-packer
npm地址:https://www.npmjs.com/package/moles-packer
來自：http://www.infoq.com/cn/articles/ctrip-moles