關於Ionic、React Native、Native的那些事

離歌回來了發表於2017-12-22

IonicReact-Nativenative開發移動app那個好 ? 移動端開發如何選型?這裡介紹一下我眼中的IonicReact-NativeNative三種移動端開發選型對比:

一、 跨平臺特性

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

iOSandroid不同語言開發 以及適配。

三、功能支援

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 :

優勢:

1、最好的體驗以及功能實現。

2、完善成熟的開發文件以及demo。

劣勢:

1、android開發學習曲線較高。

2、各個平臺分開開發 很難有iOS,android雙平臺高手。

開發成本高

相關文章