ionic react-native和native開發移動app那個好

來源:互聯網
上載者:User

標籤:


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那個好

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.