因為支援用javascript開發原生應用，react native一推出就受到不少公司熱捧，各家都躍躍欲試。但有一個痛點是，在移動端，我們是否有必要開發多套程式：ios、android和h5？本次将通過對moles架構的分享，介紹攜程在react native方面的實戰幹貨，希望給大家一些靈感和啟發。
本次分享的内容包括三個方面：
moles架構在react native和我們主app的內建中起到了什麼作用？
moles架構是如何打通android、ios、h5、seo，讓我們一套代碼跑在多個平台上
moles架構的組成以及原理是怎樣的?
這些内容将通過以下幾個部分的講解來一一給大家進行解答：
react native的現狀
moles 架構的出現
moles 架構的組成
moles 架構的功能
moles 架構的原理簡析
moles 架構的使用
moles 架構的案例
開源計劃。
react native是2015年3月份facebook開源的一個native上的一個架構。那麼為什麼它現在會這麼火呢。
我們先來看看它有什麼優點：
首先，對于做前端的我來說，最吸引的就是可以用javascript來開發native應用了。之前javascript隻可以開發浏覽器上的一些功能，随着node.js的出現，又讓javascript走向了服務端，現在react native的出現又讓javascript走向了native端。如果要用現在一個時髦的詞來形容javascript的話，我覺得“全棧”真的不為過。
其次，react native是facebook将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元件、監控機制等等這些都沒有。
伴随着react native項目的開發，逐漸的moles架構就形成了。
mole [məʊl] 小鼹鼠，是種鑿洞能力非常強的齧齒類動物。把架構稱為之為moles，也是寄希望我們的架構能像mole一樣，能夠打洞，能夠打通android、ios、h5、seo這幾個平台。當然一個mole的能力是有限的，是以我們取其複數形式moles。
如果說目前移動端的三大痛點是：性能、動态性、多端适配的話。那麼我認為react native解決了性能、動态性，而我們moles則解決了多端适配的問題。
moles的目标是要盡可能的做到在h5端開發的内容可以直接運作在native上，在native端開發的内容也可以直接運作在h5上。
該架構主要由三部分組成：
- 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架構的功能可以用下圖來說明：
主要涵蓋的對不同平台的适配、對底層api的調用以及對app中性能和錯誤的監控等等。
那麼moles在攜程主app中所處的位置如何呢？
如上圖所示它就是bu開發人員和react native、ctrip react native 的一個橋梁。讓開發人員更專注于自己的業務邏輯，而不必為react native的更新問題、不同平台的相容性問題等等而煩惱。
由于moles涉及的内容衆多，如：路由的設計、頁面生命周期的設計、打包的設計等等。這裡我們僅以元件的設計為例，來簡析其實作原理。
要做到native和h5代碼共享，通常想到的做法有兩種：
1） native元件運作在h5上，如：
2）h5元件運作在native上，如：
moles中元件的設計采用了做法1的思路，就是将native上支援的view、text、navigator等元件運作在h5上。要實作native元件運作在h5上，需要解決兩個難點：1. 元件化 2. 元件的生命周期。
我們剛開始的時候就講到，react native上的元件化思想是facebook将reactjs的思想用在native上。這就為我們能在h5上實作native的元件奠定了基礎。是以我們完全可以借助reactjs來開發這些元件，但是在實際的開發中，發現reactjs的體量實在是太大了，是以我們最後采用了攜程開源的react-lite架構。
為了減少大家的學習成本，moles架構在設計方面盡量采用大家比較熟悉的文法和指令。要使用moles，需要先安裝moles-cli。
下面是第一次使用moles-cli的簡單流程：
安裝moles-cli
初始化moles項目
安裝項目依賴
moles-cli初始化後的目錄結構和react-native-cli初始化出來的結構幾乎一樣，唯一不同的是多了一個web目錄，該目錄主要是為h5服務。
下面來看下簡單的代碼使用情況
上面的代碼若在native端會調用react natie提供的react-native子產品，在h5端會調用moles-web子產品
上面的代碼為moles-cui的使用，不論在native端還是h5端，都需要通過引入’moles-cui’子產品來使用。
以運作ios項目為例：
打包、拆包項目
目前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