ionic ，react

okzhouyong 2017-05-23

展開全文

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

一、跨平臺特性

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

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

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

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

native ：？！

各玩各的,無法跨平臺。

二、開發(fā)方式

ionic ：html + angularjs + css

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

react-native ：js + css

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

native ：java + oc|swift

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

三、功能支持

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

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

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

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

native ：全部支持

完全能實現(xiàn)

四、性能對比

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

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

react-native ：接近原生性能

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

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

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

五、優(yōu)劣對比

ionic ：

優(yōu)勢：
1. ios 和 android 基本上可以共用代碼，純web思維，開發(fā)速度快，簡單方便，一次編碼，到處運行，如果熟悉web開發(fā)，則開發(fā)難度較低。
2. 文檔很全，系統(tǒng)級支持封裝較好，所有UI組件都是有html模擬，可以統(tǒng)一使用。
3. 可實現(xiàn)在線更新允許加載動態(tài)加載web js
劣勢：
1. 性能相對較差，內(nèi)存占用高，手寫插件難度較大。
2. web技術(shù)無法解決一切問題，對于比較耗性能的地方無法利用native的思維實現(xiàn)優(yōu)勢互補(bǔ)，如高體驗的交互，動畫等。

react-native ：

優(yōu)勢：

1、雖然不能做到一處編碼到處運行，但是基本上即使是兩套代碼，也是相同的jsx語法，使用js進(jìn)行開發(fā)。用戶體驗，高于html，開發(fā)效率較高 2、flexbox 布局據(jù)說比native的自適應(yīng)布局更加簡單高效
1. 可實現(xiàn)在線更新 2015.7.28 AppStore審核政策調(diào)整：允許運行于JavascriptCore的動態(tài)加載代碼
2. 更貼近原生開發(fā)
劣勢：

1、（引）對開發(fā)人員要求較高，不是懂點web技術(shù)就行的，當(dāng)官方封裝的控件、api無法滿足需求時就必然需要懂一些native的東西去擴(kuò)展，擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不如web，也遠(yuǎn)遠(yuǎn)不如直接寫Native code。 2、（引）官方說得很隱晦：learn once, write anywhere。人家可沒說run anywhere。事實上，從官方的api來看SliderIOS，SwitchIOS..等等這些控件，之后勢必會出現(xiàn)SliderAndroid，SwitchAndroid...，也就是很可能針對不同的平臺會需要寫多套代碼。 3、發(fā)展還不成熟，目前很多ui組件只有ios的實現(xiàn)，android的需要自己實現(xiàn)。
1. （引）從Native到Web，要做很多概念轉(zhuǎn)換，勢必造成雙方都要妥協(xié)。比如web要用一套CSS的閹割版，Native通過css-layout拿到最終樣式再轉(zhuǎn)換成native原生的表達(dá)方式（比如iOS的Constraint\origin\Center等屬性），再比如動畫。另外，若Android和iOS都要做相同的封裝，概念轉(zhuǎn)換就更復(fù)雜 5、文檔還不夠完整學(xué)習(xí)曲線偏高

native ：

優(yōu)勢：
1. 最好的體驗以及功能實現(xiàn)。
2. 完善成熟的開發(fā)文檔以及demo。
劣勢：
1. android開發(fā)學(xué)習(xí)曲線較高。
2. 各個平臺分開開發(fā) 很難有iOS,android雙平臺高手。

六、吐槽

ionic:

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

react-native:

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