移動(dòng)端開(kāi)發(fā)如何選型？這里介紹一下我眼中的ionic,react-native,native 三種移動(dòng)端開(kāi)發(fā)選型對(duì)比。歡迎大家補(bǔ)充指正！

一、 跨平臺(tái)特性

ionic : write once, run anywhere ( 一次開(kāi)發(fā)，隨處運(yùn)行)

不涉及到系統(tǒng)級(jí)的開(kāi)發(fā)的話(huà)， 確實(shí)是一次開(kāi)發(fā) 處處運(yùn)行，如果涉及到系統(tǒng)級(jí)API調(diào)用以及項(xiàng)目配置（如 ios plist文件）則需要自己手動(dòng)編寫(xiě)cordova插件的方式達(dá)到效果（如：注冊(cè)文件的打開(kāi)方式），當(dāng)然，網(wǎng)上也有可能找到可以安裝的現(xiàn)成插件。

react-native ：Learn once, write anywhere ( 一次學(xué)習(xí)，隨處開(kāi)發(fā))

不涉及到與native混編的話(huà)， 統(tǒng)一js 進(jìn)行開(kāi)發(fā) 使用jsx 語(yǔ)法 確實(shí)能做到各端開(kāi)發(fā)，但是需要針對(duì)iOS 和 android 開(kāi)發(fā)兩套代碼。

native ：？！

各玩各的,無(wú)法跨平臺(tái)。

二、開(kāi)發(fā)方式

ionic ：html + angularjs + css

使用 html + angularjs 與網(wǎng)頁(yè)開(kāi)發(fā)類(lèi)似，系統(tǒng)級(jí)的調(diào)用由cordova插件解決，封裝得相當(dāng)好，簡(jiǎn)單易用，特殊情況的自己動(dòng)手編寫(xiě)插件比較難，一般沒(méi)有需要手動(dòng)編寫(xiě)代碼插件的情況，網(wǎng)上有比較多的插件可供下載安裝，可用flexbox布局。

react-native ：js + css

普通UI全程js開(kāi)發(fā)，部分情況下需要使用與native混合的方式，沒(méi)有統(tǒng)一的UI組件，ios組件較多，android組件較少，各自編寫(xiě)js文件的情況較多，簡(jiǎn)單空間和邏輯層可共用，基本上iOS和android是兩套代碼，可用flexbox布局。

native ：java + oc|swift

iOS android 不同語(yǔ)言開(kāi)發(fā) 以及適配。

三、功能支持

ionic ：編寫(xiě)cordova插件，則能達(dá)到全部支持

UI交互 由Web實(shí)現(xiàn)，系統(tǒng)級(jí)的交互 由 cordova實(shí)現(xiàn)，目前 文件上傳下載，url跳轉(zhuǎn)以及文件打開(kāi)方式 均已做驗(yàn)證可實(shí)現(xiàn)，cordova對(duì)系統(tǒng)級(jí)調(diào)用的支持比較好，涵蓋了大部分系統(tǒng)功能，如攝像頭，設(shè)備信息，電池，網(wǎng)絡(luò)等，不排除潛在不支持的問(wèn)題。

react-native ：與native 混編 可達(dá)到全部支持

android高級(jí)組件可能需要自己實(shí)現(xiàn)，系統(tǒng)級(jí)的功能可通過(guò)安裝第三方插件或者與native混編的方式實(shí)現(xiàn) ，基本上功能能完全實(shí)現(xiàn)

native ：全部支持

完全能實(shí)現(xiàn)

四、性能對(duì)比

ionic ：雖然性能一直是html5在移動(dòng)端的最大問(wèn)題，但是ionic已經(jīng)做得非常出色了，在ios上基本上無(wú)法區(qū)分是否是原生app

不添加crosswalk插件 體驗(yàn)較差，添加 crosswalk 插件以后 體驗(yàn)較好，但是app打包偏大。程序運(yùn)行內(nèi)存占用較大（網(wǎng)絡(luò)數(shù)據(jù)對(duì)比同款產(chǎn)品，內(nèi)存占用100+M）

react-native ：接近原生性能

js 到 native 需要經(jīng)過(guò)兩層橋接，性能與原生差別不大（網(wǎng)絡(luò)數(shù)據(jù)對(duì)比同款產(chǎn)品，內(nèi)存占用50 M）

native：開(kāi)發(fā)者水平很重要

性能最好 （網(wǎng)絡(luò)數(shù)據(jù)對(duì)比同款產(chǎn)品，內(nèi)存占用30 +M）

五、優(yōu)劣對(duì)比

ionic ：

• 優(yōu)勢(shì)：

  1. ios 和 android 基本上可以共用代碼，純web思維，開(kāi)發(fā)速度快，簡(jiǎn)單方便，一次編碼，到處運(yùn)行，如果熟悉web開(kāi)發(fā)，則開(kāi)發(fā)難度較低。
  2. 文檔很全，系統(tǒng)級(jí)支持封裝較好，所有UI組件都是有html模擬，可以統(tǒng)一使用。
  3. 可實(shí)現(xiàn)在線(xiàn)更新 允許加載動(dòng)態(tài)加載web js

• 劣勢(shì)：

  1. 性能相對(duì)較差，內(nèi)存占用高，手寫(xiě)插件難度較大。
  2. web技術(shù)無(wú)法解決一切問(wèn)題，對(duì)于比較耗性能的地方無(wú)法利用native的思維實(shí)現(xiàn)優(yōu)勢(shì)互補(bǔ)，如高體驗(yàn)的交互，動(dòng)畫(huà)等。

react-native ：

• 優(yōu)勢(shì)：

  1、雖然不能做到一處編碼到處運(yùn)行，但是基本上即使是兩套代碼，也是相同的jsx語(yǔ)法，使用js進(jìn)行開(kāi)發(fā)。用戶(hù)體驗(yàn)，高于html，開(kāi)發(fā)效率較高 2、flexbox 布局 據(jù)說(shuō)比native的自適應(yīng)布局更加簡(jiǎn)單高效

  1. 可實(shí)現(xiàn)在線(xiàn)更新 2015.7.28 AppStore審核政策調(diào)整：允許運(yùn)行于JavascriptCore的動(dòng)態(tài)加載代碼
  2. 更貼近原生開(kāi)發(fā)

• 劣勢(shì)：

  1、（引）對(duì)開(kāi)發(fā)人員要求較高，不是懂點(diǎn)web技術(shù)就行的，當(dāng)官方封裝的控件、api無(wú)法滿(mǎn)足需求時(shí) 就必然需要懂一些native的東西去擴(kuò)展，擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不如web，也遠(yuǎn)遠(yuǎn)不如直接寫(xiě)Native code。 2、（引）官方說(shuō)得很隱晦：learn once, write anywhere。人家可沒(méi)說(shuō)run anywhere。事實(shí)上，從官方的api來(lái)看SliderIOS，SwitchIOS..等等這些控件，之后勢(shì)必會(huì)出現(xiàn)SliderAndroid，SwitchAndroid...，也就是很可能針對(duì)不同的平臺(tái)會(huì)需要寫(xiě)多套代碼。 3、發(fā)展還不成熟，目前很多ui組件只有ios的實(shí)現(xiàn)，android的需要自己實(shí)現(xiàn)。

  1. （引）從Native到Web，要做很多概念轉(zhuǎn)換，勢(shì)必造成雙方都要妥協(xié)。比如web要用一套CSS的閹割版，Native通過(guò)css-layout拿到最終樣式再轉(zhuǎn)換成native原生的表達(dá)方式（比如iOS的Constraint\origin\Center等屬性），再比如動(dòng)畫(huà)。另外，若Android和iOS都要做相同的封裝，概念轉(zhuǎn)換就更復(fù)雜 5、文檔還不夠完整 學(xué)習(xí)曲線(xiàn)偏高

native ：

• 優(yōu)勢(shì)：

  1. 最好的體驗(yàn)以及功能實(shí)現(xiàn)。
  2. 完善成熟的開(kāi)發(fā)文檔以及demo。

• 劣勢(shì)：

  1. android開(kāi)發(fā)學(xué)習(xí)曲線(xiàn)較高。
  2. 各個(gè)平臺(tái)分開(kāi)開(kāi)發(fā) 很難有iOS,android雙平臺(tái)高手。

六、吐槽

ionic:

• 性能上比預(yù)期的要好，
• app包比較大，畢竟crosswalk 不是白加的。
• 環(huán)境搭建比較坑 項(xiàng)目新建以及安裝android平臺(tái)，build插件 都依賴(lài)網(wǎng)絡(luò)下載，網(wǎng)絡(luò)不好要等哭
• requirejs模塊化，angularjs 學(xué)習(xí)曲線(xiàn)較高
• ionic組件很好用 側(cè)滑菜單，tabs組件現(xiàn)成的。
• api調(diào)用輕松加愉快。
• 自己寫(xiě)插件要功底。
• 很期待ionic + anglarjs 2.0 專(zhuān)門(mén)針對(duì)移動(dòng)端的正式上線(xiàn)，不過(guò)angular2.0的新語(yǔ)法得弄哭一大波人
• 其實(shí)，ionic 還能做web應(yīng)用，以后網(wǎng)站也可以自己做！
• 在線(xiàn)更新app 想不愛(ài)你都難。
• livereload 模式，相當(dāng)好用

react-native:

• 環(huán)境搭建被坑了兩天，
• 可直接使用node_modules，很爽
• 官方demo jsx語(yǔ)法很茫然 html js css 全都在一個(gè)文件里面。
• 文件上傳下載 網(wǎng)上有插件，但是下載下來(lái)一看，功能不完整，沒(méi)有展示進(jìn)度信息，怎么辦？自己寫(xiě)與原生混編。
• 依賴(lài)facebook的框架，控件接口沒(méi)有原生的豐富，只提供了一些基本接口，估計(jì)還在不停的更新完善。
• 擴(kuò)展性不好，需要和原生混編 iOS，android都懂的話(huà)那我還不如直接分開(kāi)開(kāi)發(fā)了，還不用依賴(lài)facebook的框架,網(wǎng)上還有一大批開(kāi)源好用的第三方庫(kù)在等著我們。
• react-native自帶的調(diào)試插件把我驚呆了，很不錯(cuò)，很專(zhuān)業(yè)
• 同樣的livereload ，在線(xiàn)更新沒(méi)研究，應(yīng)該也支持吧。
• 非web 非native 夾在中間很難受 ！
• 學(xué)習(xí)還是要成本的！

native:

• 布局適配也是體力活
• 同時(shí)精通android 和 iOS 的是 【真·大牛】！

文中很多觀點(diǎn)來(lái)源于開(kāi)發(fā)大牛寫(xiě)的文章，配合我自己的實(shí)驗(yàn)感悟讀后深感贊同，于是直接引用過(guò)來(lái) 參考鏈接：

鬼道在知乎上的回復(fù)分析

鬼道對(duì)react-native的探索