Hybrid App

2017年05月11日 16:07:51?閱讀數(shù)：599更多

個(gè)人分類：?Android

隨著智能手機(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需要針對不同的平臺使用不同的開發(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ā)能夠在不同平臺上部署的類原生應(yīng)用 。由于hybrid app結(jié)合了native app良好用戶交互體驗(yàn)和web app跨平臺開發(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通常可以分為三種類型：

多View混合型：native view和web view獨(dú)立展示，交替出現(xiàn)。 其應(yīng)用主體通常是native app，web技術(shù)作為補(bǔ)充。即在需要的時(shí)候，將web view作為獨(dú)立的view運(yùn)行，在web view內(nèi)完成相關(guān)的展示操作。開發(fā)難度與native app相當(dāng)。舉個(gè)栗子：Instagram的timeline使用的是web view。

單View混合型：在同一個(gè)view內(nèi)，native view和web view為層疊關(guān)系，同時(shí)出現(xiàn)。開發(fā)成本較高，難度較大，但是體驗(yàn)較好。舉個(gè)栗子：百度搜索同時(shí)實(shí)現(xiàn)充分的靈活性和較好的用戶體驗(yàn)。

Web主體型：應(yīng)用主體是web view，穿插native功能，主要以網(wǎng)頁語言編寫。整體開發(fā)難度低，基本可以實(shí)現(xiàn)跨平臺；而用戶體驗(yàn)好壞，主要取決于底層中間件的交互與跨平臺能力。舉個(gè)栗子：項(xiàng)目管理工具 Basecamp使用web view呈現(xiàn)內(nèi)容，調(diào)用系統(tǒng)原生API實(shí)現(xiàn)界面導(dǎo)航等功能來提高用戶體驗(yàn)。

Hybrid app也并非是完美的解決方案。由于其使用HTML5，某些依賴于復(fù)雜的原生功能或者繁重的過渡動(dòng)畫的應(yīng)用會(huì)出現(xiàn)卡頓；同時(shí)，為了模擬native app的UI和感官，需要投入額外的時(shí)間和精力；盡管可以跨平臺，但是并不能完全支持所有的設(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è)平臺做開發(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)該盡量避免的：

為了HTML5而hybrid app：HTML5是HTML4.0.1和XHTML1.0的升級版，有更強(qiáng)大的表現(xiàn)功能，并加入了local storage等技術(shù)，為web頁面提供了更大的想象空間和更多的可能性。但是，作為發(fā)展中的技術(shù)，HTML5收到瀏覽器兼容性和手機(jī)硬件水平的影響，能提供的功能和native app扔有一定的差距。開發(fā)應(yīng)用時(shí)，首先是要滿足用戶需求，而不是追趕技術(shù)革新的大潮。所以開發(fā)應(yīng)用時(shí)，應(yīng)從應(yīng)用本身功能和團(tuán)隊(duì)開發(fā)資源綜合考量，決定是否采用hybrid app開發(fā)模式。

忽略關(guān)鍵因素：Web是基于PC的一種開發(fā)模式，而mobile app運(yùn)行于移動(dòng)端。通常，web開發(fā)者使用PC瀏覽器模擬app中的web view進(jìn)行調(diào)試，而不是直接使用手機(jī)上的web view。 二者能支配的CPU資源，最大占有內(nèi)存，運(yùn)行網(wǎng)絡(luò)環(huán)境，和鼠標(biāo)/觸控操作，瀏覽器對CSS/JS的解析和對事件的處理有著巨大的差別。而這些差別常常是web頁面能否正常運(yùn)行于app中的關(guān)鍵因素。

富交互導(dǎo)致體驗(yàn)差：這主要體現(xiàn)在兩個(gè)方面：（1）web與手機(jī)平臺默認(rèn)交互習(xí)慣不一致：iOS和Android各有一套交互習(xí)慣，包括視覺風(fēng)格，界面切換，操作習(xí)慣等。比如手機(jī)端系統(tǒng)風(fēng)格是左右滑屏來進(jìn)入或者退出界面，而舊界面保持狀態(tài)；web則是默認(rèn)無論加載還是后退，都會(huì)刷新舊界面，造成體驗(yàn)上的損失。如果模擬native的交互方式，那么會(huì)提高開發(fā)成本，卻也難以達(dá)到native的流暢性。（2）與native相比同樣的功能在性能上存在差距：Web界面上JS對HTML Node的操作需要消耗大量的CPU資源。首先，手機(jī)的CPU性能普遍低于PC端；其次，不同手機(jī)之間的硬件水平也參差不齊，比如在iPhone6s上可以流暢運(yùn)行的界面，在iPhone5、MX5上可能就無法達(dá)到同樣的流暢度。

跨平臺：Hybrid app的優(yōu)勢之一是繼承web跨平臺的特性。然而，在智能手機(jī)軟硬件版本眾多的今天，兼容性是個(gè)不容忽視的問題。不同的安卓操作系統(tǒng)其瀏覽器內(nèi)核對JS和CSS的解析、事件處理會(huì)有不同；iOS不同版本之間也存在較大差異。所以，在跨平臺開發(fā)時(shí)，兼容性也是需要重點(diǎn)考慮的問題。

交互一致性：這里的一致性并非指同一應(yīng)用在不同平臺上的一致性體驗(yàn)，而是指在同一平臺上，hybrid app和native平臺的一致性。比如“返回”操作，在iOS平臺上頁面頂部留有一個(gè)44像素高的導(dǎo)航欄，左側(cè)的返回按鈕用于返回操作，可以通過絕對地址的方式鏈接到任何其它界面；而Android通常使用設(shè)備提供的返回鍵，返回上一個(gè)界面，如果自行配置平臺返回按鈕，那么它會(huì)和設(shè)備提供的返回鍵指向不同的位置。

三、Hybrid App案例

那么在實(shí)際應(yīng)用場景中，有哪些選擇了hybrid app呢？實(shí)際上，我們很可能使用過很多hybrid app，卻并沒有意識到它們是借了native臺子唱戲的web app。根據(jù)Appcelerator的官網(wǎng)，目前單是運(yùn)行基于它的平臺搭建的hybrid app的設(shè)備就有近2.86億臺。此外，LinkedIn、Yelp、Netflix、Wunderlist 等也采用了hybrid模式。值得注意的是，有些博文說Google Inbox也屬于hybrid app，但是根據(jù)Gmail團(tuán)隊(duì)自己的博文，他們考慮效率問題，并沒有采取hybrid，而是提出了一個(gè)新的解決方案：后端使用Android SDK寫Java庫，實(shí)現(xiàn)對話，提醒，聯(lián)系人等功能；然后針對不同的平臺設(shè)計(jì)UI。在不同平臺部署應(yīng)用時(shí)，Google使用開源工具GWT和J2ObjC將Java轉(zhuǎn)為JavaScript和Objective-C，這使得Google可以使用同一套Java代碼在web和iOS平臺上實(shí)現(xiàn)同樣的功能。在不同的平臺之間，Inbox可以復(fù)用70%的代碼。

Source:?http://www.appcelerator.com/customers/app-showcase/

四、結(jié)語

這篇博文粗淺介紹了什么是hybrid mobile app，以及什么時(shí)候可以選擇這種開發(fā)模式。關(guān)于具體如何開發(fā)，則可以另起一文，此不詳述，僅列舉一些資料，以供感興趣的朋友深入了解。

開發(fā)工具：
8個(gè)hybrid app開發(fā)工具
Hybrid App開發(fā)實(shí)戰(zhàn)
Hybrid Mobile Apps: Providing a Native Experience With Web Technologies
Mobile Frameworks Comparison Chart
40+ Cross Platform Development Tools for Mobile App And Games

參考資料：
一、什么是Hybrid Mobile App：
Hybrid APP是什么
What is a Hybrid Mobile App?
Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options
Hybrid Mobile Apps: Providing A Native Experience With Web Technologies
Hybrid sweet spot: Native navigation, web content
Understanding HTML5 Hybrid Apps

二、什么時(shí)候選擇Hybrid App：
Web App Hybrid App和 Native App的區(qū)別
5 Points to Consider Before Making a Hybrid Mobile App
別闖進(jìn)Hybrid App的誤區(qū)

三、Hybrid App案例：
Your favourite app isn’t native
LinkedIn for iPad: The Native/Web Messaging Bridge and WebSockets
Whoa! That Embedded Web View Looks Hot in Your iOS App!
Going under the hood of Inbox

總結(jié)

以上是生活随笔為你收集整理的Hybrid App的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。