React Native實踐之攜程Moles架構

標籤：

編者：本文來自攜程架構研發部資深經理魏曉軍在第二期【攜程技術微分享】上的分享，以下為整理後的文字實錄。視頻回放可點擊這裡。關注攜程技術中心公號ctriptech，可獲知更多微分享課程資訊。 

因為支援用javascript開發原生應用，React Native一推出就受到不少公司熱捧，各家都躍躍欲試。但有一個痛點是，在移動端，我們是否有必要開發多套程式：iOS、Android和H5？本次將通過對Moles架構的分享，介紹攜程在React Native方面的實戰乾貨，希望給大家一些靈感和啟發。

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

1、Moles架構在React Native和我們主App的整合中起到了什麼作用？

2、Moles架構是如何打通Android、iOS、H5、SEO，讓我們一套代碼跑在多個平台上？

3、Moles架構的組成以及原理是怎樣的?

這些內容將通過以下幾個部分的講解來一一給大家進行解答：

• React Native的現狀
• Moles 架構的出現
• Moles 架構的組成
• Moles 架構的功能
• Moles 架構的原理簡析
• Moles 架構的使用
• Moles 架構的案例
• 開源計劃。

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

二、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上，如：

class HelloWorld extends Component{

  render(){
   return(

    <View>

     <Text>HelloWorld</Text>

    </View>
    )

  }

} 

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

class HelloWorld extends Component{

  render(){
     return(

    <Div>

     <Span>HelloWorld</Span>

    </Div>
     )

  }

}

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，需要先安裝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）

七、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

 

React Native實踐之攜程Moles架構