什么是 Native、Web App、Hybrid、React Native和Weex?
一句話概要
Native、Web App、Hybrid、React Native(后面以RN簡稱)、Weex 間的異同點(diǎn),后期同步小程序和PWA。
App常用開發(fā)模式簡介
此處App為應(yīng)用,application,并非我們通常講的手機(jī)App。
常用的幾種APP開發(fā)模式-腦圖:http://naotu.baidu.com/file/6af15fcbb72f89926043779811b1ea44?token=df0378691ecdcef2
Native App
傳統(tǒng)的原生App開發(fā)模式,有iOS和aOS兩大系統(tǒng),需要各自語言開發(fā)各自App。
優(yōu)點(diǎn):性能和體驗(yàn)都是最好的。
缺點(diǎn):開發(fā)和發(fā)布成本高。
舉個(gè)栗子:網(wǎng)易管家App (https://id.163.com/gj/)
應(yīng)用技術(shù):Swift,OC,Java。
WebApp
移動端的網(wǎng)站,常被稱為H5應(yīng)用,說白了就是特定運(yùn)行在移動端瀏覽器上的網(wǎng)站應(yīng)用。一般泛指 SPA(Single Page Application)模式開發(fā)出的網(wǎng)站,與MPA(Multi-page Application)對應(yīng)。
優(yōu)點(diǎn):開發(fā)和發(fā)布成本最低。
缺點(diǎn):性能和體驗(yàn)不能講是最差的,但也受到瀏覽器處理能力的限制,多次下載同樣會占用用戶一定的流量。
舉個(gè)栗子:網(wǎng)易管家APP(https://id.163.com/gj/)
應(yīng)用技術(shù):ReactJS,RegularJS,VueJS等等。
Hybrid App
混合模式移動應(yīng)用,介于Web App、Native App這兩者之間的App開發(fā)技術(shù),兼具“Native App良好交互體驗(yàn)的優(yōu)勢”和“Web App跨平臺開發(fā)的優(yōu)勢”(百度百科解釋)
主要的原理是,由Native通過JSBridge等方法提供統(tǒng)一的API,然后用Html+Css實(shí)現(xiàn)界面,JS來寫邏輯,調(diào)用API,最終的頁面在Webview中顯示,這種模式下,Android、iOS的API一般有一致性,Hybrid App所以有跨平臺效果。
優(yōu)點(diǎn):開發(fā)和發(fā)布都比較方便,效率介于Native App、Web App之間。
缺點(diǎn):學(xué)習(xí)范圍較廣,需要原生配合。
舉個(gè)栗子:FanReact,我愛我家App,東方航空App,富國基金-富國錢包App
應(yīng)用技術(shù):PhoneGap,AppCan,Wex5,APICloud等。
React Native App
Facebook發(fā)現(xiàn)Hybrid App存在很多缺陷和不足,于是發(fā)起開源的一套新的App開發(fā)方案RN。使用JSX語言寫原生界面,js通過JSBridge調(diào)用原生API渲染UI交互通信。
優(yōu)點(diǎn):效率體驗(yàn)接近Native App,發(fā)布和開發(fā)成本低于Native App。
缺點(diǎn):學(xué)習(xí)有一定成本,且文檔較少,免不了踩坑。
舉個(gè)栗子:Facebook、Youtube、Discord、QQ、百度等等。
Weex App
阿里巴巴開發(fā)團(tuán)隊(duì)在RN的成功案例上,重新設(shè)計(jì)出的一套開發(fā)模式,站在了巨人肩膀上并有淘寶團(tuán)隊(duì)項(xiàng)目做養(yǎng)料,廣受關(guān)注,2016年4月正式開源,并在v2.0版本官方支持Vue.js,與RN分庭抗禮。
優(yōu)點(diǎn):單頁開發(fā)模式效率極高,熱更新發(fā)包體積小,并且跨平臺性更強(qiáng)。
缺點(diǎn):剛剛起步,文檔欠缺;社區(qū)沒有RN活躍,功能尚不健全,暫不適合完全使用Weex開發(fā)App。
舉個(gè)栗子:淘寶、天貓、阿里云、優(yōu)酷、閑魚、餓了么等。
Native App
Native App是一種基于智能手機(jī)本地操作系統(tǒng)如iOS、Android、WP并使用原生程式編寫運(yùn)行的第三方應(yīng)用程序,也叫本地app。一般使用的開發(fā)語言為Java、C++、Objective-C。
自iOS和Android這兩個(gè)的手機(jī)操作系統(tǒng)發(fā)布以來,在互聯(lián)網(wǎng)界從此就多了一個(gè)新的名詞:App意為運(yùn)行在智能的移動終端設(shè)備第三方應(yīng)用程序。
Native App因?yàn)槲挥谄脚_層上方,向下訪問和兼容的能力會比較好一些,可以支持在線或離線,消息推送或本地資源訪問,攝像撥號功能的調(diào)取。但是由于設(shè)備碎片化,App的開發(fā)成本要高很多,維持多個(gè)版本的更新升級比較麻煩,用戶的安裝門檻也比較高。但是比較樂觀的是,AppStore培養(yǎng)了一種比較好的用戶付費(fèi)模式,所以在Apple的生態(tài)圈里,開發(fā)者的盈利模式是一種明朗狀態(tài),其他market也在往這條路上靠攏。
優(yōu)勢
相比于其它模式,提供最佳的用戶體驗(yàn),最優(yōu)質(zhì)的用戶界面,最華麗的交互
針對不同平臺提供不同體驗(yàn)
可節(jié)省帶寬成本,打開速度更快
功能最為強(qiáng)大,特別是在與系統(tǒng)交互中,幾乎所有功能都能實(shí)現(xiàn)
劣勢
門檻高,原生開發(fā)人才稀缺,至少比前端和后端少,開發(fā)環(huán)境昂貴
無法跨平臺,開發(fā)的成本比較大,各個(gè)系統(tǒng)獨(dú)立開發(fā)
發(fā)布成本高,需要通過store或market的審核,導(dǎo)致更新緩慢
維持多個(gè)版本、多個(gè)系統(tǒng)的成本比較高,而且必須做兼容
應(yīng)用市場逐漸飽和,怎么樣搶占用戶時(shí)間需要投入大量時(shí)間和金錢,這也導(dǎo)致“僵尸”App的增多
WebApp
說到Web App 不少人會聯(lián)想到 WAP,或者有人認(rèn)為,WAP就是WebApp,其實(shí)不然。
WebApp 與 WAP 最直接的區(qū)別就是功能層面。WAP更側(cè)重使用網(wǎng)頁技術(shù)在移動端做展示,包括文字、媒體文件等。而Web App更側(cè)重“功能”,是使用網(wǎng)頁技術(shù)實(shí)現(xiàn)的App。總的來說,Web App就是運(yùn)行于網(wǎng)絡(luò)和標(biāo)準(zhǔn)瀏覽器上,基于網(wǎng)頁技術(shù)開發(fā)實(shí)現(xiàn)特定功能的應(yīng)用。
響應(yīng)式的大部分技術(shù)都是為實(shí)現(xiàn)WebApp能適配多類客戶端而設(shè)計(jì)的。
Web網(wǎng)站一般分兩種,MPA(Multi-page Application)和SPA(Single-page Application)。而WebApp一般泛指SPA形式開發(fā)出的網(wǎng)站。這樣更像是一個(gè)App。
優(yōu)勢
可以跨平臺,調(diào)試方便
無需安裝,不會占用手機(jī)內(nèi)存,而且更新速度最快
不存在多版本問題,維護(hù)成本低
臨時(shí)入口,可以隨意嵌入
劣勢
依賴于網(wǎng)絡(luò),第一次訪問頁面速度慢,耗費(fèi)流量
受限于手機(jī)和瀏覽器性能,用戶體驗(yàn)相較于其他模式最差
功能受限,大量移動端功能無法實(shí)現(xiàn)
入口強(qiáng)依賴于第三方瀏覽器,且只能以URL地址的形式存在,導(dǎo)致用戶留存率低(優(yōu)點(diǎn)即缺點(diǎn))
Hybird App
混合開發(fā),也就是半原生半Web的開發(fā)模式,由原生提供統(tǒng)一的API給JS調(diào)用,實(shí)際的主要邏輯有Html和JS來完成,最終是放在webview中顯示的,所以只需要寫一套代碼即可達(dá)到跨平臺效果,另外也可以直接在瀏覽器中調(diào)試,很方便。最重要的是只需要一個(gè)前端人員稍微學(xué)習(xí)下JS api的調(diào)用即可。
Hybird App 的較早實(shí)踐者是PhoneGap,隨后遍地開花,如Titanium、Salama、WeX5、Kerkee和國內(nèi)的AppCan,項(xiàng)目各有各的實(shí)現(xiàn)方式,大致的原理基本相同。有幸在AppCan上海總部參與過一段時(shí)間的學(xué)習(xí)研究,如下大致簡介:
AppCan是基于HTML5技術(shù)的Hybird跨平臺移動應(yīng)用開發(fā)工具。開發(fā)者利用Html5+Css3+JavaScript技術(shù),通過AppCan IDE集成開發(fā)系統(tǒng)、云端打包器等,快速開發(fā)出Android、iOS、WP平臺上的移動應(yīng)用。
AppCan的平臺構(gòu)成:
在實(shí)際的APP開發(fā)中,AppCan可以完成大部分的工作量,如圖示:
AppCan將App底層復(fù)雜的原生功能封裝在引擎、插件中,開發(fā)者僅需調(diào)用接口、打包編譯,就可以獲得原生功能;靈活的插件擴(kuò)展機(jī)制。
開發(fā)者可以像開發(fā)WebApp一樣開發(fā)app的視覺UI,以及絕大部分的交互,當(dāng)需要使用原生功能(如攝像頭,陀螺儀等功能)時(shí),只需要調(diào)用官方的API就可以輕松實(shí)現(xiàn)Native的效果。至于JS和Native的通信,常用的有URL監(jiān)聽和絕大部分Hybrid廠商使用的JSBridge通信,兩者原理相近。
在Hybird概念盛行的時(shí)候,國內(nèi)外各大公司也參與了探索,國外代表有Facebook、google、亞馬遜,國內(nèi)的有騰訊、阿里巴巴、網(wǎng)易等,慢慢的他們發(fā)現(xiàn)Hybird嚴(yán)重受限于WebView的解析渲染效率,于是Facebook開始了他的類原生的研究探索。
總結(jié)
以上是生活随笔為你收集整理的什么是 Native、Web App、Hybrid、React Native和Weex?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 超浪漫-HTML5生日祝福网页制作 ❤粉
- 下一篇: HTML DOM之标签操作方法