Part 1 | 移動端開發(fā)方案

目前移動端開發(fā)方案可謂百家齊鳴，以至于很難使用單一條件對所有移動端開發(fā)方案進行劃分，在此我分成三大類來引導(dǎo)各位了解主要的開發(fā)方式。

1. Web開發(fā)

簡介：基于 Web 相關(guān)技術(shù)來實現(xiàn)界面及功能

a. 基于瀏覽器
簡介：功能由服務(wù)器提供，界面的顯示基于瀏覽器，如有道云筆記 web 版，google docs。
優(yōu)點：“write once，run anywhere”，適配多個移動平臺，同時功能的升級改版過程對用戶而言透明。
缺點：Android 端 WebView 的性能不佳，功能受限，大量原生功能無法實現(xiàn)，操作體驗較差。

b. 基于應(yīng)用
簡介：套一層原生的殼，主要功能實現(xiàn)基于 WebView。
優(yōu)點：可以通過開發(fā)框架調(diào)用移動端 native api，可以實現(xiàn) WebView 不支持的功能。
缺點：性能依舊低下，原生功能的支持依賴于開發(fā)框架。
開發(fā)平臺示例：Phonegap。

2. 非 Web 開發(fā)

a. 原生
簡介：基于標(biāo)準(zhǔn)的 Android SDK 進行開發(fā)。
優(yōu)點：可以輕松調(diào)用 SDK 提供的所有軟硬件功能，性能佳。
缺點：開發(fā)速度慢，應(yīng)用升級繁瑣，往往需要對不同平臺提供不同版本。

b. 編譯
簡介：直接將某個語言編譯為移動平臺下的二進制文件，常見的如 C++，因為 Android，IOS 都提供了對 C++ 的支持，所有界面無關(guān)的功能理論上完全可以使用 C++ 實現(xiàn)的。
優(yōu)點：可以重用實現(xiàn)復(fù)雜的代碼，同時編譯后的代碼反編譯困難。
缺點：如果這個工具本身有 Bug 或性能問題，定位和修改成本很高，如果要支持 ARMv8 和 x86 的話會增大編譯后應(yīng)用體積。
開發(fā)平臺示例：RoboVM，Xamarin（IOS），Apportable，Silver，Go，Xojo。

c. 虛擬機
簡介：首先我們了解一下這里的虛擬機代表什么，提到虛擬機我們腦海出現(xiàn)的往往是系統(tǒng)虛擬機或者 JVM，但這里的虛擬機自然沒有那么強大，主要功能是提供目標(biāo)語言的即時編譯引擎或即時解釋引擎。
優(yōu)點：支持熱更新，擁有對應(yīng)語言經(jīng)驗的開發(fā)者可快速上手移動開發(fā)。
缺點：大多數(shù)虛擬機提供的原生功能受限，而功能不受限的虛擬機如 NativeScript，編譯生成的文件體積過大，同時如果移動端系統(tǒng)升級，要支持新特性需要等新的開發(fā)版本。
開發(fā)平臺示例：Xamarin（Android），LuaView，Titanium/Hyperloop，NativeScript。

3. 混合式

簡介：上述開發(fā)方案往往是可以協(xié)同的，比如原生+Web，原生+編譯，虛擬機+原生，原生+Web+虛擬機+編譯，我稱這些多種開發(fā)方式并存的開發(fā)方案為混合式。
優(yōu)點：相互彌補對方的缺點，比如發(fā)版后頻繁修改的模塊可以使用 WebView 實現(xiàn)，大大降低發(fā)版頻次，而性能要求高的可使用原生實現(xiàn)，提高用戶體驗，保密性高的可以使用編譯，增加反編譯難度。
缺點：未在根本上解決問題，應(yīng)用的性能，開發(fā)速度，平臺兼容性等問題依舊是一道難以逾越的難關(guān)。

Part 2 | 開發(fā)方案評估

我個人評估目前決定 Android 端軟件開發(fā)方案選型的主要指標(biāo)是以下五項：
功能實現(xiàn)
用戶體驗
開發(fā)速度
平臺兼容性
快速更新的能力

Part 3 | React Native

目前三大類開發(fā)方式在這些方面各有所長。
我個人觀點純 Web 開發(fā)是未來的方向，可惜在當(dāng)下，它還在勝利的道路上艱難前行著，我懷疑就算再過五年，它依舊不能走到道路的終點。
介紹這么多，那么現(xiàn)在也到了今天的重點：React Native。

React Native 是什么？在 Facebook 的 React Native 主頁上如是寫到：「LEARN ONCE, WRITE ANYWHERE: BUILD MOBILE APPS WITH REACT」

這里的「LEARN ONCE」代表著 Facebook 的 React 前端體系。「WRITE ANYWHERE」并非「run anywhere」，雖然在 Android 與 IOS 采用相同的開發(fā)語法，但兩個不同的平臺還是存在不同，對于部分模塊還是需要兩套代碼，不過如果熟練掌握 React 的開發(fā)的方式，那么 Android 和 IOS 的開發(fā)就很容易上手。
我們來看一段來自 React 示例代碼：

var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is another comment</Comment>
</div>
);
}
});

var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});

React 的界面是通過調(diào)用 Class 的 render 方法將模板語言轉(zhuǎn)化為 html 標(biāo)簽，進而通過瀏覽器對 html 標(biāo)簽的解釋實現(xiàn)顯示的目的。

從上述代碼中我們可以很輕松的看出來，React 的代碼編寫如同堆積木一般，不同的類是不同的模塊，通過組合實現(xiàn)功能需求。

歸根到底 React Native 究竟屬于哪種開發(fā)方式，擁有什么樣的優(yōu)勢和缺點呢。

看到它支持的開發(fā)語言是JS，大家很容易認為它是 Web 開發(fā)，與 WebView 相關(guān)，事實上它并不基于 WebView，它提供了一套JS的解釋器，將 Android SDK 隱藏起來，是基于虛擬機的開發(fā)方式。

那么它又有什么優(yōu)勢呢：

1. JS 是開發(fā)語言，但解釋后的界面由 Android 原生視圖構(gòu)成，解釋完成后用戶實際操作體驗接近原生。

2. 使用 JS 作為開發(fā)語言，大大提高應(yīng)用開發(fā)速度，同時使前端開發(fā)可以輕松接入開發(fā)。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
</View>
);
}
}

const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});

AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);

這一段代碼很輕松的實現(xiàn)了一個含有四個 TextView 的容器，而放到原生代碼，我們首先要新建一個 Activity，然后在清單文件中注冊 Activity，接著新建一個 xml 編寫界面代碼，或者使用 java 代碼自生成界面代碼，而使用 React Native 的話，上述的操作都不需要，只需要寫下這段代碼，并保存到項目中的 index.android.js 即可。

同時我們將這段代碼和前文中的 React 代碼作對比，我們可以看到語法是完全相同的，唯一的區(qū)別是 React 代碼基于 html 標(biāo)簽，而 React Native 代碼基于新的一套更貼近移動端開發(fā)的標(biāo)簽。

3. 相比于其他虛擬機，它提供了 Android 原生良好的接口，對于 React Native 不支持但原生支持的功能，開發(fā)者可以輕松的添加進自己的應(yīng)用。

4. 輕松的版本更新，當(dāng)對應(yīng)用做好配置，新的應(yīng)用打包上傳到服務(wù)器后，用戶應(yīng)用就可以下載并在下次啟動時更新。

5. 開源，開發(fā)者可以輕松的下載下來并對特定功能進行改寫和優(yōu)化。

6. 輕松的調(diào)試，JS 層代碼的修改只需要在應(yīng)用界面 Reload 一次應(yīng)用代碼即可，想比于原生繁瑣的更新輕松許多。

那么它又有什么缺點呢：

1. 極大增加安裝包體積，僅顯示一個界面的應(yīng)用編譯出來的 apk 大小已經(jīng)為7.5MB。（基于 React Native 0.33）

2. JS 層將開發(fā)者和原生分割開了，極大增加了開發(fā)者直接進行線程調(diào)度，內(nèi)存控制類似操作的難度，提高優(yōu)化應(yīng)用性能的難度。

3. 依舊不是正式穩(wěn)定版，開發(fā)過程中會出現(xiàn)一些奇怪的異常，同時不同版本之間差異較大，仍然處于快速迭代期并沒有良好的向前兼容。

備注：本文參考資料 聊聊移動端跨平臺開發(fā)的各種技術(shù)

本文作者：鄭童宇，GrowingIO Android 工程師，原敲敲科技 Android 軟件負責(zé)人。