移動(dòng)端開(kāi)發(fā)如何選型?這里介紹一下我眼中的ionic,react-native,native 三種移動(dòng)端開(kāi)發(fā)選型對(duì)比。歡迎大家補(bǔ)充指正!
ionic : write once, run anywhere ( 一次開(kāi)發(fā),隨處運(yùn)行)
不涉及到系統(tǒng)級(jí)的開(kāi)發(fā)的話, 確實(shí)是一次開(kāi)發(fā) 處處運(yùn)行,如果涉及到系統(tǒng)級(jí)API調(diào)用以及項(xiàng)目配置(如 ios plist文件)則需要自己手動(dòng)編寫cordova插件的方式達(dá)到效果(如:注冊(cè)文件的打開(kāi)方式),當(dāng)然,網(wǎng)上也有可能找到可以安裝的現(xiàn)成插件。
react-native :Learn once, write anywhere ( 一次學(xué)習(xí),隨處開(kāi)發(fā))
不涉及到與native混編的話, 統(tǒng)一js 進(jìn)行開(kāi)發(fā) 使用jsx 語(yǔ)法 確實(shí)能做到各端開(kāi)發(fā),但是需要針對(duì)iOS 和 android 開(kāi)發(fā)兩套代碼。
native :?!
各玩各的,無(wú)法跨平臺(tái)。
ionic :html + angularjs + css
使用 html + angularjs 與網(wǎng)頁(yè)開(kāi)發(fā)類似,系統(tǒng)級(jí)的調(diào)用由cordova插件解決,封裝得相當(dāng)好,簡(jiǎn)單易用,特殊情況的自己動(dòng)手編寫插件比較難,一般沒(méi)有需要手動(dòng)編寫代碼插件的情況,網(wǎng)上有比較多的插件可供下載安裝,可用flexbox布局。
react-native :js + css
普通UI全程js開(kāi)發(fā),部分情況下需要使用與native混合的方式,沒(méi)有統(tǒng)一的UI組件,ios組件較多,android組件較少,各自編寫js文件的情況較多,簡(jiǎn)單空間和邏輯層可共用,基本上iOS和android是兩套代碼,可用flexbox布局。
native :java + oc|swift
iOS android 不同語(yǔ)言開(kāi)發(fā) 以及適配。
ionic :編寫cordova插件,則能達(dá)到全部支持
UI交互 由Web實(shí)現(xiàn),系統(tǒng)級(jí)的交互 由 cordova實(shí)現(xiàn),目前 文件上傳下載,url跳轉(zhuǎn)以及文件打開(kāi)方式 均已做驗(yàn)證可實(shí)現(xiàn),cordova對(duì)系統(tǒng)級(jí)調(diào)用的支持比較好,涵蓋了大部分系統(tǒng)功能,如攝像頭,設(shè)備信息,電池,網(wǎng)絡(luò)等,不排除潛在不支持的問(wèn)題。
react-native :與native 混編 可達(dá)到全部支持
android高級(jí)組件可能需要自己實(shí)現(xiàn),系統(tǒng)級(jí)的功能可通過(guò)安裝第三方插件或者與native混編的方式實(shí)現(xiàn) ,基本上功能能完全實(shí)現(xiàn)
native :全部支持
完全能實(shí)現(xiàn)
ionic :雖然性能一直是html5在移動(dòng)端的最大問(wèn)題,但是ionic已經(jīng)做得非常出色了,在ios上基本上無(wú)法區(qū)分是否是原生app
不添加crosswalk插件 體驗(yàn)較差,添加 crosswalk 插件以后 體驗(yàn)較好,但是app打包偏大。程序運(yùn)行內(nèi)存占用較大(網(wǎng)絡(luò)數(shù)據(jù)對(duì)比同款產(chǎn)品,內(nèi)存占用100+M)
react-native :接近原生性能
js 到 native 需要經(jīng)過(guò)兩層橋接,性能與原生差別不大(網(wǎng)絡(luò)數(shù)據(jù)對(duì)比同款產(chǎn)品,內(nèi)存占用50 M)
native:開(kāi)發(fā)者水平很重要
性能最好 (網(wǎng)絡(luò)數(shù)據(jù)對(duì)比同款產(chǎn)品,內(nèi)存占用30 +M)
ionic :
優(yōu)勢(shì):
劣勢(shì):
react-native :
優(yōu)勢(shì):
1、雖然不能做到一處編碼到處運(yùn)行,但是基本上即使是兩套代碼,也是相同的jsx語(yǔ)法,使用js進(jìn)行開(kāi)發(fā)。用戶體驗(yàn),高于html,開(kāi)發(fā)效率較高2、flexbox 布局 據(jù)說(shuō)比native的自適應(yīng)布局更加簡(jiǎn)單高效
劣勢(shì):
1、(引)對(duì)開(kāi)發(fā)人員要求較高,不是懂點(diǎn)web技術(shù)就行的,當(dāng)官方封裝的控件、api無(wú)法滿足需求時(shí) 就必然需要懂一些native的東西去擴(kuò)展,擴(kuò)展性仍然遠(yuǎn)遠(yuǎn)不如web,也遠(yuǎn)遠(yuǎn)不如直接寫Native code。2、(引)官方說(shuō)得很隱晦:learn once, write anywhere。人家可沒(méi)說(shuō)run anywhere。事實(shí)上,從官方的api來(lái)看SliderIOS,SwitchIOS..等等這些控件,之后勢(shì)必會(huì)出現(xiàn)SliderAndroid,SwitchAndroid...,也就是很可能針對(duì)不同的平臺(tái)會(huì)需要寫多套代碼。3、發(fā)展還不成熟,目前很多ui組件只有ios的實(shí)現(xiàn),android的需要自己實(shí)現(xiàn)。
native :
優(yōu)勢(shì):
劣勢(shì):
ionic:
react-native:
native:
文中很多觀點(diǎn)來(lái)源于開(kāi)發(fā)大牛寫的文章,配合我自己的實(shí)驗(yàn)感悟讀后深感贊同,于是直接引用過(guò)來(lái) 參考鏈接:
聯(lián)系客服