標籤:
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.7.28 AppStore審核政策調整:允許運行於JavascriptCore的動態載入代碼 更貼近原生開發
劣勢:
1、(引)對開發人員要求較高,不是懂點web技術就行的,當官方封裝的控制項、api無法滿足需求時 就必然需要懂一些native的東西去擴充,擴充性仍然遠遠不如web,也遠遠不如直接寫Native code。 2、(引)官方說得很隱晦:learn once, write anywhere。人家可沒說run anywhere。事實上,從官方的api來看SliderIOS,SwitchIOS..等等這些控制項,之後勢必會出現SliderAndroid,SwitchAndroid...,也就是很可能針對不同的平台會需要寫多套代碼。 3、發展還不成熟,目前很多ui組件只有ios的實現,android的需要自己實現。 (引)從Native到Web,要做很多概念轉換,勢必造成雙方都要妥協。比如web要用一套CSS的閹割版,Native通過css-layout拿到最終樣式再轉換成native原生的表達方式(比如iOS的Constraint\origin\Center等屬性),再比如動畫。另外,若Android和iOS都要做相同的封裝,概念轉換就更複雜 5、文檔還不夠完整 學習曲線偏高 4.文檔少 學習起來困難
native :
優勢: 最好的體驗以及功能實現。 完善成熟的開發文檔以及demo。
劣勢: android開發學習曲線較高。 各個平台分開開發 很難有iOS,android雙平台高手。 開發成本高 |
ionic react-native和native開發移動app那個好