native APP，hybrid APP和web APP
<1>native APP，hybrid APP和web APP三者的區(qū)別
隨著智能手機(jī)的普及，移動(dòng)端應(yīng)用幾乎成為每個(gè)互聯(lián)網(wǎng)產(chǎn)品的標(biāo)配。在快速迭代的互聯(lián)網(wǎng)戰(zhàn)場中高效開發(fā)、低成本上線產(chǎn)品，是每個(gè)應(yīng)用開發(fā)團(tuán)隊(duì)追求的目標(biāo)。此時(shí)，選擇合適的應(yīng)用類型和開發(fā)模式便至關(guān)重要。移動(dòng)應(yīng)用可以粗分為三種：原生應(yīng)用(native app)， 網(wǎng)頁應(yīng)用(web app，或HTML5 app)，以及它們的混血兒——混合模式移動(dòng)應(yīng)用(hybrid app)。今天的博文就來和大家簡單聊聊近年來蓬勃發(fā)展的hybrid app。
?
Source:?http://s3.rainmaker-labs.com/wp-content/uploads/Mobile-hybrid-app1.jpg
一、什么是Hybrid Mobile App
Hybrid app從外觀上來看是一個(gè)native app，實(shí)則只有一個(gè)UIWebView，里面訪問的是一個(gè)web app，如新聞?lì)惡鸵曨l類的應(yīng)用普遍采取該策略：native的框架加上web的內(nèi)容。不同于native app需要針對不同的平臺(tái)使用不同的開發(fā)語言（如使用Objective-C、Swift開發(fā)iOS應(yīng)用，使用Java等開發(fā)Android應(yīng)用，使用C#開發(fā)Windows Phone應(yīng)用），hybrid app允許開發(fā)者僅使用一套網(wǎng)頁語言代碼（HTML5+CSS+JavaScript），即可開發(fā)能夠在不同平臺(tái)上部署的類原生應(yīng)用 。由于hybrid app結(jié)合了native app良好用戶交互體驗(yàn)和web app跨平臺(tái)開發(fā)的優(yōu)勢，能夠顯著節(jié)省移動(dòng)應(yīng)用開發(fā)的時(shí)間和成本，hybrid app得到越來越多公司的青睞。
?
Source:?Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options
按照網(wǎng)頁語言和程序語言的混合，hybrid app通常可以分為三種類型：
Hybrid app也并非是完美的解決方案。由于其使用HTML5，某些依賴于復(fù)雜的原生功能或者繁重的過渡動(dòng)畫的應(yīng)用會(huì)出現(xiàn)卡頓；同時(shí)，為了模擬native app的UI和感官，需要投入額外的時(shí)間和精力；盡管可以跨平臺(tái)，但是并不能完全支持所有的設(shè)備和操作系統(tǒng)；最后，如果應(yīng)用的體驗(yàn)不夠原生化，如一個(gè)簡單的網(wǎng)站，則還有被Apple App Store拒絕的風(fēng)險(xiǎn)。
二、 什么時(shí)候選擇Hybrid App
在hybrid app備受追捧的今天，我們也許會(huì)隨大流優(yōu)先考慮開發(fā)hybrid app。但是，每個(gè)產(chǎn)品各具特色，還沒有哪一種解決方案可以完美地應(yīng)萬變。hybrid app的中庸讓它大放異彩，也限制了它的應(yīng)用場景 。在決定采用一種開發(fā)模式之前，有許多因素需要考慮，諸如：
- 你希望針對哪個(gè)平臺(tái)做開發(fā)？
- 你希望通過應(yīng)用商店發(fā)布應(yīng)用么？
- 你希望利用手機(jī)特有的性能么？
- 你的團(tuán)隊(duì)技術(shù)能力如何？
- 你的項(xiàng)目周期和預(yù)算是多少？
如果要設(shè)計(jì)Angry Birds一類對圖形要求很高的游戲，那么在暫不考慮技術(shù)團(tuán)隊(duì)能力的情況下，native app是最優(yōu)選擇；如果要設(shè)計(jì)如Yelp一類內(nèi)容導(dǎo)向的應(yīng)用，那么hybrid app會(huì)是很好的選擇；如果項(xiàng)目時(shí)間緊張，沒有足夠的人手和資金，對圖形和系統(tǒng)原生特性沒有要求，那么web app將是性價(jià)比最高的解決方案。
表一對比了native app, hybrid app和web app在不同方面的表現(xiàn)，可以幫助你根據(jù)實(shí)際情況選擇最佳的解決方案。
InfoQ上高嘉峻的一篇文章分享了幾個(gè)hybrid app開發(fā)的誤區(qū)，也是開發(fā)過程中應(yīng)該盡量避免的：
?
<2>區(qū)分三者
nativeapp是一個(gè)原生程序，一般運(yùn)行在機(jī)器操作系統(tǒng)上，有很強(qiáng)的交互，一般靜態(tài)資源都是在本地的。瀏覽使用方便，體驗(yàn)度高。在實(shí)現(xiàn)上要么使用Objecttive-c和cocoaTouch Framework撰寫iOS程序，要么選擇java+Android Framework撰寫android應(yīng)用程序。
hybridapp是一個(gè)半原生程序，偽造了一個(gè)瀏覽器的apk/ipa原生程序，把地址寫死了，然后里面運(yùn)行了一個(gè)webapp。里面是WebView UI 。但是還是運(yùn)行在機(jī)器的操作系統(tǒng)上，交互較弱，資源一般在本地或者網(wǎng)絡(luò)都可以。瀏覽體驗(yàn)度次之。
webapp是生存在瀏覽器里的應(yīng)用，所以只能運(yùn)行在瀏覽器里，宿主是瀏覽器，不再是操作系統(tǒng)。資源一般都在網(wǎng)絡(luò)上。說的根本點(diǎn)就是一個(gè)觸屏版的網(wǎng)站
什么叫做原生App?
原生App是專門針對某一類移動(dòng)設(shè)備而生的，它們都是被直接安裝到設(shè)備里，而用戶一般也是通過網(wǎng)絡(luò)商店或者賣場來獲取例如 The App Store 與 Android Apps on Google Play . 隨便說幾個(gè)原生App的例子，比如iOS 的 Camera+ 以及Android 的 KeePassDroid
什么叫做移動(dòng)Web App?
一般說來，移動(dòng)Web App都是都是需要用到網(wǎng)絡(luò)的，它們利用設(shè)備上的瀏覽器(比如iPhone的Safari)來運(yùn)行，而且它們不需要在設(shè)備上下載后安裝。
什么是混合app?
Hybrid App是指介于web-app、native-app這兩者之間的app,它雖然看上去是一個(gè)Native App，但只有一個(gè)UI WebView，里面訪問的是一個(gè)Web App，比如街旁網(wǎng)最開始的應(yīng)用就是包了個(gè)客戶端的殼，其實(shí)里面是HTML5的網(wǎng)頁，后來才推出真正的原生應(yīng)用。再徹底一點(diǎn)的，如掌上百度和淘寶客戶端Android版，走的也是Hybrid App的路線，不過掌上百度里面封裝的不是WebView，而是自己的瀏覽內(nèi)核，所以體驗(yàn)上更像客戶端，更高效。
綜合一下就是：“Hybrid App同時(shí)使用網(wǎng)頁語言與程序語言開發(fā)，通過應(yīng)用商店區(qū)分移動(dòng)操作系統(tǒng)分發(fā)，用戶需要安裝使用的移動(dòng)應(yīng)用”。總體特性更接近Native App但是和Web App區(qū)別較大。只是因?yàn)橥瑫r(shí)使用了網(wǎng)頁語言編碼，所以開發(fā)成本和難度比Native App要小很多。因此說，Hybrid App兼具了Native App的所有優(yōu)勢，也兼具了Web App使用HTML5跨平臺(tái)開發(fā)低成本的優(yōu)勢。
Web App是指基于Web的系統(tǒng)和應(yīng)用，運(yùn)行在高端手機(jī)的網(wǎng)絡(luò)和瀏覽器上，用網(wǎng)頁技術(shù)開發(fā)實(shí)現(xiàn)特定功能的應(yīng)用，對手機(jī)性能要求比較高。
Native App（原生開發(fā)）:目前較為成熟，各大公司均采用此方式。但是其人工成本較高，同一個(gè)項(xiàng)目，至少需要Android端、iOS端、Web端三個(gè)開發(fā)團(tuán)隊(duì)。
Hybrid App（混合開發(fā)），基于第三方跨平臺(tái)移動(dòng)應(yīng)用引擎框架進(jìn)行開發(fā)。使用HTML5和JS作為開發(fā)，調(diào)用引擎封裝的底層功能如照相機(jī)、傳感器、通訊錄等。
拿酒來形象化這三種模式的話：
Web App就像白酒那樣渾厚甘醇，度數(shù)高，但不適合任何人的口味，制造成本低，
Native App就是葡萄酒，分紅白類型，對葡萄品質(zhì)要求高，口味大眾化，比較成熟，
Hybrid App就是雞尾酒，混合了多種酒的優(yōu)勢，非常適合跨平臺(tái)，是以后的一個(gè)App開發(fā)趨勢。
?
<3>區(qū)分native APP ，web APP，hybrid APP
1、Native App
Native App是一種基于智能手機(jī)本地操作系統(tǒng)如iOS、Android、WP并使用原生程式編寫運(yùn)行的第三方應(yīng)用程序,也叫本地app。一般使用的開發(fā)語言為JAVA、C++、Objective-C。
想創(chuàng)建Native App，開發(fā)者必須編寫源代碼，使用由操作系統(tǒng)開發(fā)商提供的工具，對源代碼進(jìn)行編譯。代碼編譯之后以2進(jìn)制或者字節(jié)碼的形式運(yùn)行在操作系統(tǒng)上，直接調(diào)用操作系統(tǒng)的Device API。
雖然不同操作系統(tǒng)上進(jìn)行的開發(fā)過程常常很相似，但是每一種移動(dòng)操作系統(tǒng)都隨帶各自的獨(dú)特工具。平臺(tái)之間的這些區(qū)別導(dǎo)致了Native開發(fā)方法的最重大缺點(diǎn)之一：為一種移動(dòng)平臺(tái)編寫的代碼無法在另一種平臺(tái)上使用。Native App的優(yōu)缺點(diǎn)總結(jié)如下：
優(yōu)點(diǎn)
1、提供最佳的用戶體驗(yàn)，最優(yōu)質(zhì)的用戶界面，最華麗的交互
2、針對不同平臺(tái)提供不同體驗(yàn)
3、下載到本地，可節(jié)省帶寬成本
4、可訪問本地資源
5、直接訪問系統(tǒng)級API
6、操作速度更快
7、用戶留存率高
缺點(diǎn)
1、移植到不同平臺(tái)上比較麻煩
2、需要維護(hù)多個(gè)版本
3、發(fā)布新版本需要通過store或market的確認(rèn)
4、盈利需要與第三方分成
5、開發(fā)的成本比較大，需要針對不同平臺(tái)開發(fā)相應(yīng)的版本
6、更新體驗(yàn)較差、同時(shí)也比較麻煩（每一次發(fā)布新的版本，都需要做版本打包，且需要用戶手動(dòng)更新，或一個(gè)讓用戶反感的提示）。
2、Web App
Web App是運(yùn)行于網(wǎng)絡(luò)和標(biāo)準(zhǔn)瀏覽器上，以HTML+JS+CSS等WEB技術(shù)開發(fā)實(shí)現(xiàn)特定功能的應(yīng)用。通過瀏覽器來調(diào)用Device API，但是只有數(shù)量有限的這些API向?yàn)g覽器里面運(yùn)行的Web App公開。基于當(dāng)下開始普及流行的HTML5，Web App可以實(shí)現(xiàn)很多原本Native App才可以實(shí)現(xiàn)的功能，，比如LBS的功能、本地?cái)?shù)據(jù)存儲(chǔ)、音視頻播放的功能，甚至還有調(diào)用照相機(jī)和結(jié)合GPU的硬件加速功能。
由于它不依賴于操作系統(tǒng)，因此開發(fā)了一款Web App后，基本能應(yīng)用于各種系統(tǒng)平臺(tái)。并且還有版本升級容易的優(yōu)勢（畢竟服務(wù)器是受自己控制的）。但是這種方案的缺點(diǎn)也很明顯——無法使用系統(tǒng)級API，只能做為一個(gè)臨時(shí)的入口，用戶很難留存。Web App的優(yōu)缺點(diǎn)總結(jié)如下：
優(yōu)點(diǎn)
（1）開發(fā)成本低；
（2）更新快；
（3）更新無需通知用戶，不需要手動(dòng)升級；
（4）能夠跨多個(gè)平臺(tái)和終端；
（5）維護(hù)比較簡單。
缺點(diǎn)
（1）臨時(shí)性的入口；
（2）無法獲取系統(tǒng)級別的通知，提醒，動(dòng)效等等；
（3）用戶留存率低；
（4）需要依賴網(wǎng)絡(luò)，體驗(yàn)較差。
3、Hybrid App
Hybrid App是一種用Native技術(shù)來搭建App的外殼，殼里的內(nèi)容由Web技術(shù)來提供的移動(dòng)應(yīng)用，兼具“Native App良好交互體驗(yàn)的優(yōu)勢”和“Web App跨平臺(tái)開發(fā)的優(yōu)勢”。
根據(jù)實(shí)現(xiàn)的不同，可以細(xì)分為兩種實(shí)現(xiàn)方案：
（1）在Native App中使用WebView加載遠(yuǎn)端Web資源
這種方案的Web資源放置在服務(wù)器上，開發(fā)者不必經(jīng)歷提交和批準(zhǔn)過程——有些App商店要求這個(gè)過程，就可以對App進(jìn)行小幅更新。遺憾的是，這個(gè)方法擯棄了任何離線可用性，因?yàn)樵O(shè)備與網(wǎng)絡(luò)沒有連接時(shí)，無法訪問設(shè)備。
（2）將一組HTML、JavaScript、CSS和媒體文件，封裝到App代碼中，存儲(chǔ)在設(shè)備本地，使用Cordova/PhoneGap等框架通過WebView加載本地資源進(jìn)行頁面渲染
把Web代碼封裝到App里面在一定程度上緩解從遠(yuǎn)端加載靜態(tài)資源導(dǎo)致UI展示延遲的問題，可以提高性能和可訪問性，并且還可以通過橋接Native和Web來調(diào)用一些Device的API。
但是其劣勢也很明顯，一是不允許遠(yuǎn)程更新；二是安裝包變大；三是如果想調(diào)用相關(guān)平臺(tái)的API，需要針對平臺(tái)單獨(dú)進(jìn)行開發(fā)，如果在應(yīng)用中用到了大量的Device API，那么開發(fā)的效率將大大降低。
Hybrid App同時(shí)使用網(wǎng)頁語言與程序語言開發(fā)，但其總體特性更接近Native App。只是因?yàn)橥瑫r(shí)使用了web語言編碼，所以開發(fā)成本和難度比Native App要小很多。因此，Hybrid App兼具了Native App的優(yōu)勢，也兼具了Web App使用HTML5跨平臺(tái)開發(fā)低成本的優(yōu)勢。
三種App之間的比較
| 適用場景 | （1）偏操作互動(dòng)多的工具類應(yīng)用； </br>（2）需要訪問特定的原生API；</br>（3）對速度要求較高。 | （1）作為對非核心業(yè)務(wù)在移動(dòng)端的入口補(bǔ)足；</br>（2）作為用戶輕量、低頻使用的體驗(yàn)增強(qiáng)；</br>（3）作為吸引用戶安裝Native App的引導(dǎo)頁。 | （1）Native App中提到的適用場景；</br>（2）需要頻繁小幅度更新。 |
| 開發(fā)語言 | 只用native開發(fā)語言 | native和web開發(fā)語言 | 只用web開發(fā)語言 |
| 開發(fā)成本 | 高 | 低 | 中 |
| 維護(hù)更新 | 復(fù)雜 | 簡單 | 介于二者之間 |
| 體驗(yàn) | 優(yōu) | 差 | 優(yōu) |
| 安裝 | 需要 | 不需要 | 需要 |
| 升級靈活性 | 低</br>總通過應(yīng)用商店來升級 | 高 | 中</br>web部分的升級不需要通過應(yīng)用商店來完成 |
| 資源存儲(chǔ) | 本地 | 服務(wù)器 | 本地和服務(wù)器 |
?
參考文獻(xiàn)：
<4>選擇哪個(gè)做項(xiàng)目比較合適
?當(dāng)前的APP開發(fā)模式注意有以下四大類型:
-
Native App
即傳統(tǒng)的原生APP開發(fā)模式,Android基于Java語言,底層調(diào)用Google的 API;iOS基于OC或者Swift語言,底層調(diào)用App官方提供的API。體驗(yàn)最后。
-
Web App
即移動(dòng)端的網(wǎng)站,將頁面部署在服務(wù)器上,然后用戶使用各大瀏覽器訪問。一般泛指 SPA(Single Page Application)模式開發(fā)出的網(wǎng)站。體驗(yàn)最差。
-
Hybrid App
即混合開發(fā),由Native通過JSBridge等方法提供統(tǒng)一的API,然后用Html5+JS來寫實(shí)際的邏輯,調(diào)用API,這種模式下,由于Android,iOS的API一般有一致性,而且最終的頁面也是在webview中顯示,所有有跨平臺(tái)效果
-
React Native App
Facebook發(fā)起的開源的一套新的APP開發(fā)方案,使用JS+部分原生語法來實(shí)現(xiàn)功能。初次學(xué)習(xí)成本較高,但是在入門后,經(jīng)過良好的封裝也能夠?qū)崿F(xiàn)大部分的跨平臺(tái)。而且體驗(yàn)很好。
? ? ?腦圖地址:?
? ? ?http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70
Native App
? ? ? 即原生開發(fā)模式,開發(fā)出來的是原生程序,不同平臺(tái)上,Android和iOS的開發(fā)方法不同,開發(fā)出來的是一個(gè)獨(dú)立的APP,能發(fā)布應(yīng)用商店,有如下優(yōu)點(diǎn)和缺點(diǎn)。
優(yōu)點(diǎn)
- 直接依托于操作系統(tǒng),交互性最強(qiáng),性能最好
相比于其它模式的交互,原生APP體驗(yàn)是最優(yōu)的
- 功能最為強(qiáng)大,特別是在與系統(tǒng)交互中,幾乎所有功能都能實(shí)現(xiàn)
得益于原生是直接依托于系統(tǒng)的,所以可以直接調(diào)用官方提供的api,功能最為全面(比如本地資源操作,通知,動(dòng)畫等)
缺點(diǎn)
- 開發(fā)成本高,無法跨平臺(tái),不同平臺(tái)Android和iOS上都要各自獨(dú)立開發(fā)
Android上基于Java開發(fā),iOS上基于OC或Swift開發(fā),相互之間獨(dú)立,必須要有各自的開發(fā)人員
- 門檻較高,原生人員有一定的入門門檻,相比廣大的前端人員而言,較少
原生的一個(gè)很大特點(diǎn)就是獨(dú)立,所以不太容易入門,不像web前端一樣那么廣泛,而且Android,iOS都需要獨(dú)立學(xué)習(xí)
- 更新緩慢,特別是發(fā)布應(yīng)用商店后,需要等到審核周期
原生應(yīng)用更新是一個(gè)很大的問題,Android中還能直接下載整包APK進(jìn)行更新,但是iOS中,如果是發(fā)布AppStore,必須通過AppStore地址更新,而每次更新都需要審核,所以無法達(dá)到及時(shí)更新
- 維護(hù)成本高
同開發(fā)一樣,項(xiàng)目上線后,維護(hù)起來也很為麻煩
Web App
? ? ?即移動(dòng)端的網(wǎng)站,將頁面部署在服務(wù)器上,然后用戶使用各大瀏覽器訪問,不是獨(dú)立APP,無法安裝和發(fā)布Web網(wǎng)站一般分兩種,MPA(Multi-page Application)和SPA(Single-page Application)。而Web App一般泛指后面的SPA形式開發(fā)出的網(wǎng)站(因?yàn)榭梢阅７乱恍〢PP的特性),有如下優(yōu)點(diǎn)和缺點(diǎn)。
優(yōu)點(diǎn)
- 開發(fā)成本低,可以跨平臺(tái),調(diào)試方便
web app一般只需要一個(gè)前端人員開發(fā)出一套代碼,然后即可應(yīng)用于各大主流瀏覽器(特殊情況可以代碼進(jìn)行下兼容),沒有新的學(xué)習(xí)成本,而且可以直接在瀏覽器中調(diào)試
- 維護(hù)成本低
同上,如果代碼合理,只需要一名前端就可以維護(hù)多個(gè)web app
- 更新最為快速
由于web app資源是直接部署在服務(wù)器端的,所以只需要替換服務(wù)器端的文件,用戶訪問是就已經(jīng)更新了(當(dāng)然需要解決一些緩存問題)
- 無需安裝App,不會(huì)占用手機(jī)內(nèi)存
通過瀏覽器即可訪問,無需安裝,用戶就會(huì)比較愿意去用
缺點(diǎn)
- 性能低,用戶體驗(yàn)差
由于是直接通過的瀏覽器訪問,所以無法使用原生的API,操作體驗(yàn)不好
- 依賴于網(wǎng)絡(luò),頁面訪問速度慢,耗費(fèi)流量
Web App每次訪問都需要去服務(wù)端加載資源訪問,所以必須依賴于網(wǎng)絡(luò),而且網(wǎng)速慢時(shí)訪問速度很不理想,特別是在移動(dòng)端,如果網(wǎng)站優(yōu)化不好會(huì)無故消耗大量流量
- 功能受限,大量功能無法實(shí)現(xiàn)
只能使用Html5的一些特殊api,無法調(diào)用原生API,所以很多功能存在無法實(shí)現(xiàn)情況
- 臨時(shí)性入口,用戶留存率低
這既是它的優(yōu)點(diǎn),也是缺點(diǎn),優(yōu)點(diǎn)是無需安裝,確定是用完后有時(shí)候很難再找到,或者說很難專門為某個(gè)web app留存一個(gè)入口,導(dǎo)致用戶很難再次使用
Hybrid App
? ? ?即混合開發(fā),也就是半原生半Web的開發(fā)模式,有跨平臺(tái)效果,當(dāng)然了,實(shí)質(zhì)最終發(fā)布的仍然是獨(dú)立的原生APP(各種的平臺(tái)有各種的SDK),有如下優(yōu)點(diǎn)和缺點(diǎn)。
優(yōu)點(diǎn)
- 開發(fā)成本較低,可以跨平臺(tái),調(diào)試方便
Hybrid模式下,由原生提供統(tǒng)一的API給JS調(diào)用,實(shí)際的主要邏輯有Html和JS來完成,而由于最終是放在webview中顯示的,所以只需要寫一套代碼即可,達(dá)到跨平臺(tái)效果,另外也可以直接在瀏覽器中調(diào)試,很為方便
最重要的是只需要一個(gè)前端人員稍微學(xué)習(xí)下JS api的調(diào)用即可,無需兩個(gè)獨(dú)立的原生人員
一般Hybrid中的跨平臺(tái)最少可以跨三個(gè)平臺(tái):Android App,iOS App,普通webkit瀏覽器
- 維護(hù)成本低,功能可復(fù)用
同上,如果代碼合理,只需要一名前端就可以維護(hù)多個(gè)app,而且很多功能還可以互相復(fù)用
- 更新較為自由
雖然沒有web app更新那么快速,但是Hybrid中也可以通過原生提供api,進(jìn)行資源主動(dòng)下載,達(dá)到只更新資源文件,不更新apk(ipa)的效果
- 針對新手友好,學(xué)習(xí)成本較低
這種開發(fā)模式下,只需要前端人員關(guān)注一些原生提供的API,具體的實(shí)現(xiàn)無需關(guān)心,沒有新的學(xué)習(xí)內(nèi)容,只需要前端人員即可開發(fā)
- 功能更加完善,性能和體驗(yàn)要比起web app好太多
因?yàn)榭梢哉{(diào)用原生api,所以很多功能只要原生提供出就可以實(shí)現(xiàn),另外性能也比較接近原生了
- 部分性能要求的頁面可用原生實(shí)現(xiàn)
這應(yīng)該是Hybrid模式的最多一個(gè)好處了,因?yàn)檫@種模式是原生混合web,所以我們完全可以將交互強(qiáng),性能要求高的頁面用原生寫,然后一些其它頁面用JS寫,嵌入webview中,達(dá)到最佳體驗(yàn)
缺點(diǎn)
- 相比原生,性能仍然有較大損耗
這種模式受限于webview的性能桎梏,相比原生而言有不少損耗,體驗(yàn)無法和原生相比
- 不適用于交互性較強(qiáng)的app
這種模式的主要應(yīng)用是:一些新聞閱讀類,信息展示類的app;但是不適用于一些交互較強(qiáng)或者性能要求較高的app(比如動(dòng)畫較多就不適合)
React Native App
? ? ? Facebook發(fā)起的開源的一套新的APP開發(fā)方案,Facebook在當(dāng)初深入研究Hybrid開發(fā)后,覺得這種模式有先天的缺陷,所以果斷放棄,轉(zhuǎn)而自行研究,后來推出了自己的“React Native”方案,不同于H5,也不同于原生,更像是用JS寫出原生應(yīng)用,有如下優(yōu)點(diǎn)和缺點(diǎn)，其實(shí)很多大公司都已經(jīng)轉(zhuǎn)React Native開發(fā)了,已經(jīng)很成熟了。
優(yōu)點(diǎn)
- 雖然說開發(fā)成本大于Hybrid模式,但是小于原生模式,大部分代碼可復(fù)用
相比于原生模式,這種模式是統(tǒng)一用JS寫代碼,所以往往只需要一名成員投入學(xué)習(xí),即可完成跨平臺(tái)app的開發(fā),而且后續(xù)代碼封裝的好,很多功能可復(fù)用
- 性能體驗(yàn)高于Hybrid,不遜色與原生
這種模式和Hybrid不一樣,Hybrid中的view層實(shí)際上還是dom,但是這種模式的view層是虛擬dom,所以性能要高于Hybrid,距離原生差距不大
這種模式可以認(rèn)為是用JS寫原生,即頁面用JS寫,然后原生通過Bridge技術(shù)分析JS,將JS內(nèi)容單獨(dú)渲染成原生Android和iOS,所以也就是為什么性能不遜色原生
- 開發(fā)人員單一技術(shù)棧,一次學(xué)習(xí),跨平臺(tái)開發(fā)
這種模式是統(tǒng)一由JS編寫,有著獨(dú)特的語法,所以只需要學(xué)習(xí)一次,即可同時(shí)開發(fā)Android和iOS
- 社區(qū)繁榮,遇到問題容易解決
這應(yīng)該是React Native的很大一個(gè)優(yōu)勢,不像Hybrid模式和原生模式一樣各自為營,這種模式是Facebook統(tǒng)一發(fā)起的,所以有一個(gè)統(tǒng)一的社區(qū),里面有大量資源和活躍的人員,對開發(fā)者很友好
缺點(diǎn)
- 雖然可以部分跨平臺(tái),但并不是Hybrid中的一次編寫,兩次運(yùn)行那種,而是不同平臺(tái)代碼有所區(qū)別
這種模式實(shí)際上還是JS來寫原生,所以Android和iOS中的原生代碼會(huì)有所區(qū)別,如果需要跨平臺(tái),對開發(fā)人員有一定要求
當(dāng)然了,如果發(fā)展了有一定時(shí)間,組件庫夠豐富了,那么其實(shí)影響也就不大了,甚至?xí)菻ybrid更快
- 開發(fā)人員學(xué)習(xí)有一定成本
雖然社區(qū)已經(jīng)比較成熟了,但是一個(gè)新的普通前端學(xué)習(xí)起來還是有一定學(xué)習(xí)成本的,無法像Hybrid模式一樣平滑
分析
各大開發(fā)模式直觀對比
? ? ? 以下是各大模式的直觀對比分析
| 原生功能體驗(yàn) | 優(yōu)秀 | 差 | 良好 | 接近優(yōu)秀 |
| 渲染性能 | 非常快 | 慢 | 接近快 | 快 |
| 是否支持設(shè)備底層訪問 | 支持 | 不支持 | 支持 | 支持 |
| 網(wǎng)絡(luò)要求 | 支持離線 | 依賴網(wǎng)絡(luò) | 支持離線(資源存本地情況) | 支持離線 |
| 更新復(fù)雜度 | 高(幾乎總是通過應(yīng)用商店更新) | 低(服務(wù)器端直接更新) | 較低(可以進(jìn)行資源包更新) | 較低(可以進(jìn)行資源包更新) |
| 編程語言 | Android(Java),iOS(OC/Swift) | js+html+css3 | js+html+css3 | 主要使用JS編寫,語法規(guī)則JSX |
| 社區(qū)資源 | 豐富(Android,iOS單獨(dú)學(xué)習(xí)) | 豐富(大量前端資源) | 有局限(不同的Hybrid相互獨(dú)立) | 豐富(統(tǒng)一的活躍社區(qū)) |
| 上手難度 | 難(不同平臺(tái)需要單獨(dú)學(xué)習(xí)) | 簡單(寫一次,支持不同平臺(tái)訪問) | 簡單(寫一次,運(yùn)行任何平臺(tái)) | 中等(學(xué)習(xí)一次,寫任何平臺(tái)) |
| 開發(fā)周期 | 長 | 短 | 較短 | 中等 |
| 開發(fā)成本 | 昂貴 | 便宜 | 較為便宜 | 中等 |
| 跨平臺(tái) | 不跨平臺(tái) | 所有H5瀏覽器 | Android,iOS,h5瀏覽器 | Android,iOS |
| APP發(fā)布 | App Store | Web服務(wù)器 | App Store | App Store |
如何選擇開發(fā)模式
? ? ?目前有多種開發(fā)模式,那么我們平時(shí)開發(fā)時(shí)如何選擇用哪種模式呢？如下
選擇純Native App模式的情況
- 性能要求極高,體驗(yàn)要求極好,不追求開發(fā)效率
一般屬于吹毛求疵的那種級別了,因?yàn)檎碚f如果要求不是特別高,會(huì)有Hybrid
選擇Web App模式的情況
- 不追求用戶體驗(yàn)和性能,對離線訪問沒要求
正常來說,如果追求性能和體驗(yàn),都不會(huì)選用web app
- 沒有額外功能,只有一些信息展示
因?yàn)閣eb有限制,很多功能都無法實(shí)現(xiàn),所以有額外功能就只能棄用這種方案了
選擇Hybrid App模式的情況
- 大部分情況下的App都推薦采用這種模式
這種模式可以用原生來實(shí)現(xiàn)要求高的界面,對于一些比較通用型,展示型的頁面完全可以用web來實(shí)現(xiàn),達(dá)到跨平臺(tái)效果,提升效率
當(dāng)然了,一般好一點(diǎn)的Hybrid方案,都會(huì)把資源放在本地的,可以減少網(wǎng)絡(luò)流量消耗
選擇React Native App模式的情況
- 追求性能,體驗(yàn),同時(shí)追求開發(fā)效率,而且有一定的技術(shù)資本,舍得前期投入
React Native這種模式學(xué)習(xí)成本較高,所以需要前期投入不少時(shí)間才能達(dá)到較好水平,但是有了一定水準(zhǔn)后,開發(fā)起來它的優(yōu)勢就體現(xiàn)出來了,性能不遜色原生,而且開發(fā)速度也很快
另類的app方案
? ? ? 除了以上的幾種常見app開發(fā)模式,其實(shí)還有一些其它的類似方案
微網(wǎng)頁
? ? ? 比如在進(jìn)行微信網(wǎng)頁開發(fā)時(shí),可以調(diào)用一些微信的特殊api,這其實(shí)就是算是微信的Hybrid模式,實(shí)質(zhì)上仍然是在瀏覽器中(只不過是騰訊的X5內(nèi)核)
? ? ? 當(dāng)然了,微信在這方面做了很多限制,比如權(quán)限認(rèn)證等等,所以導(dǎo)致開發(fā)起來效果不是很完美。這里不再贅述其功能
微信小程序
? ? ? 微信小程序是微信新推出的一種新的app方案,2016年9月開始進(jìn)行內(nèi)測,2016年11月準(zhǔn)備全面面向開發(fā)者需要注意的是,這種模式是“反HTML5”的,相當(dāng)于是微信提供的一套封閉開發(fā)模式,有自己的語法和IDE,有的類似于iOS開發(fā)的感覺。具體也不贅述,請參考引用來源中的文章
參考資料
- 對當(dāng)前主流hybrid app、web app與native app工具的初步比較與分析
- H5、React Native、Native應(yīng)用對比分析
- 如何評價(jià) React Native
- 論Web App、Hybrid App以及Native App的設(shè)計(jì)差異
- H5、React Native、Native應(yīng)用對比分析
- HybridApp解決方案_No1_混合模式(Hybrid)App開發(fā)概述
- 聊聊Web App、Hybrid App與Native App的設(shè)計(jì)差異
- 微信小程序，大多數(shù)人誤解的8個(gè)問題
?
總結(jié)
以上是生活随笔為你收集整理的native APP，hybrid APP和web APP的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软件工程 网络工程，职业方向是怎样的？
- 下一篇： StuQ IT技能图谱全集