React Native 實踐之攜程 Moles 框架

編者：本文來自攜程框架研發部高級經理魏曉軍在第二期【攜程技術微分享】上的分享，如下爲整理後的文字實錄。視頻回放可點擊這裏。關注攜程技術中心微信公號ctriptech，可獲知更多微分享課程信息。

由於支持用javascript開發原生應用，React Native一推出就受到很多公司熱捧，各家都躍躍欲試。但有一個痛點是，在移動端，咱們是否有必要開發多套程序：iOS、Android和H5？本次將經過對Moles框架的分享，介紹攜程在React Native方面的實戰乾貨，但願給你們一些靈感和啓發。

本次分享的內容包括三個方面：

1. Moles框架在React Native和咱們主App的集成中起到了什麼做用？

2. Moles框架是如何打通Android、iOS、H五、SEO，讓咱們一套代碼跑在多個平臺上？

3. Moles框架的組成以及原理是怎樣的?

這些內容將經過如下幾個部分的講解來一一給你們進行解答：

• React Native的現狀

• Moles 框架的出現

• Moles 框架的組成

• Moles 框架的功能

• Moles 框架的原理簡析

• Moles 框架的使用

• Moles 框架的案例

• 開源計劃

1、React Native的現狀

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組件、監控機制等等這些都沒有。

2、Moles 框架的出現

伴隨着React Native項目的開發，逐漸的Moles框架就造成了。

mole [məʊl] 小鼴鼠，是種鑿洞能力很是強的齧齒類動物。把框架稱爲之爲Moles，也是寄但願咱們的框架能像mole同樣，可以打洞，可以打通Android、iOS、H五、SEO這幾個平臺。固然一個mole的能力是有限的，因此咱們取其複數形式Moles。

若是說當前移動端的三大痛點是：性能、動態性、多端適配的話。那麼我認爲React Native解決了性能、動態性，而咱們Moles則解決了多端適配的問題。

Moles的目標是要儘量的作到在H5端開發的內容能夠直接運行在Native上，在Native端開發的內容也能夠直接運行在H5上。

3、Moles 框架的組成

該框架主要由三部分組成

1. moles-web

該部分主要是爲H5服務，是將React Native在Android、iOS中沒有差別化的Components、APIs提取出來，單獨封裝成一個Library供H5端來使用。這樣作的好處是，這個Library只在H5上會是使用到，在Native是不須要的，以減小框架在Native的體積。

2. moles-cui

該部分主要是是將React Native在Android、iOS中有差別化的Components、APIs提取出來，而且添加一些公司定製化的組件進去，包括：UI組件、監控組件、採集組件、路由組件等等。moles-cui能夠說是Moles框架的核心部分，它不但Native開發須要使用，在H5上的開發也須要使用。

3. moles-cli

該部分主要包括Moles項目的初始化、編譯、打包等功能。

下面是moles-web與moles-cui的一個關係圖

4、Moles 框架的功能

Moles框架的功能能夠用下圖來講明

主要涵蓋的對不一樣平臺的適配、對底層API的調用以及對APP中性能和錯誤的監控等等。

那麼Moles在攜程主App中所處的位置如何呢？

如上圖所示它就是BU開發人員和React Native、Ctrip React Native 的一個橋樑。讓開發人員更專一於本身的業務邏輯，而沒必要爲React Native的更新問題、不一樣平臺的兼容性問題等等而煩惱。

5、Moles 框架的原理簡析

因爲Moles涉及的內容衆多，如：路由的設計、頁面生命週期的設計、打包的設計等等。這裏咱們僅以組件的設計爲例，來簡析其實現原理。

要作到Native和H5代碼共享，一般想到的作法有兩種：

一、Native組件運行在H5上，如：

class HelloWorld extends Component{
  render(){
   return(
    <View>
      <Text>HelloWorld</Text>
    </View>
    )
  }
}

二、H5組件運行在Native上，如：

class HelloWorld extends Component{
  render(){
     return(
    <Div>
      <Span>HelloWorld</Span>
    </Div>
     )
  }
}

Moles中組件的設計採用了作法1的思路，就是將Native上支持的View、Text、Navigator等組件運行在H5上。要實現Native組件運行在H5上，須要解決兩個難點：一、組件化 二、組件的生命週期。

咱們剛開始的時候就講到，React Native上的組件化思想是Facebook將ReactJS的思想用在Native上。這就爲咱們能在H5上實現Native的組件奠基了基礎。因此咱們徹底能夠藉助ReactJS來開發這些組件，可是在實際的開發中，發現ReactJS的體量實在是太大了，因此咱們最後採用了攜程開源的react-lite框架。

6、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服務。

下面來看下簡單的代碼使用狀況

import React,{
  View
} from 'react-native'

上面的代碼若在Native端會調用React Natie提供的react-native模塊，在H5端會調用moles-web模塊

import{
  Application,
  Page
}from 'moles-cui'

上面的代碼爲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）

7、Moles 框架的案例

目前Moles框架已在攜程的主App上投入生產，有興趣的同窗能夠安裝攜程App 6.17，進入」個人攜程「頻道，其中的站內信頁面就是基於Moles框架開發的。如今還有攻略、遊輪等頻道也在陸陸續續的接入中。相信在不久的未來，你們會在攜程的各大頻道上看到Moles的身影。咱們也但願Moles能成爲攜程乃至業內基於React Native開發項目的首選框架。

下面是基於Moles開發的效果圖：

我攜頻道

攻略頻道

8、開源計劃

以前分享的時候，就有很多同窗諮詢開源的事情。這裏簡述下，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