Ionic
、React-Native
、native
開發移動app那個好 ? 移動端開發如何選型?這里介紹一下我眼中的Ionic
、React-Native
、Native
三種移動端開發選型對比:
一、 跨平臺特性
** ionic :** write once, run anywhere ( 一次開發,隨處運行,學習成本低 會html css js就可以學會)
不涉及到系統級的開發的話, 確實是一次開發 處處運行,如果涉及到系統級API調用以及項目配置(如 ios plist文件)則需要自己手動編寫cordova插件的方式達到效果(如:注冊文件的打開方式),當然,網上也有可能找到可以安裝的現成插件。** 會html css js就可以學會 學習成本低**
**react-native **:Learn once, write anywhere ( 一次學習,隨處開發)
不涉及到與native混編的話, 統一js 進行開發 使用jsx 語法 確實能做到各端開發,但是需要針對iOS 和 android 開發兩套代碼。
** native :**使用原生java objective-c 開發, 各玩各的,無法跨平臺。
二、開發方式
** ionic :html + angularjs + css**
使用 html + angularjs 與網頁開發類似,代碼只需要寫一次,就可以達到跨平臺效果, 系統級的調用由cordova插件解決,封裝得相當好,簡單易用,特殊情況的自己動手編寫插件比較難,?一般沒有需要手動編寫代碼插件的情況,?網上有比 較多的插件可供下載安裝,可用flexbox布局。 調用方便(比如:要用攝像頭插件,只需要cordova plugin add camera,然后就可以用js調用原生攝像頭)
** react-native :js + css**
普通UI全程js開發,部分情況下需要使用與native混合的方式,沒有統一的UI組件,ios組件較多,android組件較少,各自編寫js文件的情況較多,簡單空間和邏輯層可共用,基本上iOS和android是兩套代碼,可用flexbox布局。
** native :java + oc/swift **
iOS
、android
不同語言開發 以及適配。
三、功能支持
** ionic :編寫cordova插件,則能達到全部支持 原生能完成的功能 ionic結合cordova都可以實現**
UI交互
由Web
實現,系統級的交互 由 cordova實現,目前 文件上傳下載,url跳轉以及文件打開方式 均已做驗證可實現,cordova對系統級調用的支持比較好,涵蓋了大部分系統功能,如攝像頭,設備信息,電池,網絡等,不排除潛在不支持的問題。
** react-native :與native 混編 可達到全部支持**
android
高級組件可能需要自己實現,系統級的功能可通過安裝第三方插件或者與native混編的方式實現 ,基本上功能能完全實現
** native :全部支持 **
完全能實現
四、性能對比
** ionic :**雖然性能一直是html5在移動端的最大問題,但是ionic已經做得非常出色了,在ios上基本上無法區分是否是原生app,android 通過優化基本看不出和原生差別
ionic使用ionic-native-transitions 調用原生專場基本看不出和原生區別 (適合android ios)
android 2G內存以上的手機看不出和原生差別,性能接近原生。
android 低配置的手機添加 crosswalk 插件以后 體驗較好,但是app打包偏大。程序運行內存占用較大(網絡數據對比同款產品,內存占用100+M)
** react-native :**基本接近原生性能
js 到 native 需要經過兩層橋接,性能與原生差別不大(網絡數據對比同款產品,內存占用50 M)
** native:**開發者水平很重要 性能最好 (網絡數據對比同款產品,內存占用30 +M)
總結:開發水平很重要,html開發的app可能比原生的更快。主要還看開發人員的水平以及會不會優化**
五、優劣對比
- ionic :
優勢:
ios 和 android 基本上可以共用代碼,純web思維,開發速度快,簡單方便,一次編碼,到處運行,如果熟悉web開發,則開發難度較低。
文檔很全,系統級支持封裝較好,所有UI組件都是有html模擬,可以統一使用。
可實現在線更新 允許加載動態加載web js
文檔多,開發者多,視頻教程多 容易學習 遇到問題容易解決 技術成熟
劣勢:
占用內存高一些(不過手機內存都大了不影響),不適合做游戲類型app, web技術無法解決一切問題,對于比較耗性能的地方無法利用native的思維實現優勢互補,如高體驗的交互,動畫等。
- react-native :
優勢:
1、雖然不能做到一處編碼到處運行,但是基本上即使是兩套代碼,也是相同的jsx語法,使用js進行開發。用戶體驗,高于html,開發效率較高
2、flexbox 布局 據說比native的自適應布局更加簡單高效,可實現在線更新。2015.07.28 AppStore審核政策調整:允許運行于JavascriptCore的動態加載代碼 ,更貼近原生開發
劣勢:
1、(引)對開發人員要求較高,不是懂點web技術就行的,當官方封裝的控件、api無法滿足需求時 就必然需要懂一些native的東西去擴展,擴展性仍然遠遠不如web,也遠遠不如直接寫Native code。
2、(引)官方說得很隱晦:learn once, write anywhere。人家可沒說run anywhere。事實上,從官方的api來看SliderIOS,SwitchIOS..等等這些控件,之后勢必會出現 SliderAndroid,SwitchAndroid...,也就是很可能針對不同的平臺會需要寫多套代碼。
3、(引)從Native到Web,要做很多概念轉換,勢必造成雙方都要妥協。比如web要用一套CSS的閹割版,Native通過css-layout拿到 最終樣式再轉換成native原生的表達方式(比如iOS的Constraint\origin\Center等屬性),再比如動畫。另外,若 Android和iOS都要做相同的封裝,概念轉換就更復雜。但是它發展還不成熟,目前很多ui組件只有ios的實現,android的需要自己實現。
4.文檔少 學習起來困難
5、文檔還不夠完整 學習曲線偏高
- native :
優勢:
最好的體驗以及功能實現。
完善成熟的開發文檔以及demo。
劣勢:
android開發學習曲線較高。
各個平臺分開開發 很難有iOS,android雙平臺高手。
開發成本高