Hybrid App

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

個人分類：?Android

隨著智能手機的普及，移動端應用幾乎成為每個互聯網產品的標配。在快速迭代的互聯網戰場中高效開發、低成本上線產品，是每個應用開發團隊追求的目標。此時，選擇合適的應用類型和開發模式便至關重要。移動應用可以粗分為三種：原生應用(native app)， 網頁應用(web app，或HTML5 app)，以及它們的混血兒——混合模式移動應用(hybrid app)。今天的博文就來和大家簡單聊聊近年來蓬勃發展的hybrid app。

Source:?http://s3.rainmaker-labs.com/wp-content/uploads/Mobile-hybrid-app1.jpg

一、什么是Hybrid Mobile App

Hybrid app從外觀上來看是一個native app，實則只有一個UIWebView，里面訪問的是一個web app，如新聞類和視頻類的應用普遍采取該策略：native的框架加上web的內容。不同于native app需要針對不同的平臺使用不同的開發語言（如使用Objective-C、Swift開發iOS應用，使用Java等開發Android應用，使用C#開發Windows Phone應用），hybrid app允許開發者僅使用一套網頁語言代碼（HTML5+CSS+JavaScript），即可開發能夠在不同平臺上部署的類原生應用 。由于hybrid app結合了native app良好用戶交互體驗和web app跨平臺開發的優勢，能夠顯著節省移動應用開發的時間和成本，hybrid app得到越來越多公司的青睞。

Source:?Native, HTML5, or Hybrid: Understanding Your Mobile Application Development Options

按照網頁語言和程序語言的混合，hybrid app通常可以分為三種類型：

多View混合型：native view和web view獨立展示，交替出現。 其應用主體通常是native app，web技術作為補充。即在需要的時候，將web view作為獨立的view運行，在web view內完成相關的展示操作。開發難度與native app相當。舉個栗子：Instagram的timeline使用的是web view。

單View混合型：在同一個view內，native view和web view為層疊關系，同時出現。開發成本較高，難度較大，但是體驗較好。舉個栗子：百度搜索同時實現充分的靈活性和較好的用戶體驗。

Web主體型：應用主體是web view，穿插native功能，主要以網頁語言編寫。整體開發難度低，基本可以實現跨平臺；而用戶體驗好壞，主要取決于底層中間件的交互與跨平臺能力。舉個栗子：項目管理工具 Basecamp使用web view呈現內容，調用系統原生API實現界面導航等功能來提高用戶體驗。

Hybrid app也并非是完美的解決方案。由于其使用HTML5，某些依賴于復雜的原生功能或者繁重的過渡動畫的應用會出現卡頓；同時，為了模擬native app的UI和感官，需要投入額外的時間和精力；盡管可以跨平臺，但是并不能完全支持所有的設備和操作系統；最后，如果應用的體驗不夠原生化，如一個簡單的網站，則還有被Apple App Store拒絕的風險。

二、 什么時候選擇Hybrid App

在hybrid app備受追捧的今天，我們也許會隨大流優先考慮開發hybrid app。但是，每個產品各具特色，還沒有哪一種解決方案可以完美地應萬變。hybrid app的中庸讓它大放異彩，也限制了它的應用場景 。在決定采用一種開發模式之前，有許多因素需要考慮，諸如：

• 你希望針對哪個平臺做開發？
• 你希望通過應用商店發布應用么？
• 你希望利用手機特有的性能么？
• 你的團隊技術能力如何？
• 你的項目周期和預算是多少？

如果要設計Angry Birds一類對圖形要求很高的游戲，那么在暫不考慮技術團隊能力的情況下，native app是最優選擇；如果要設計如Yelp一類內容導向的應用，那么hybrid app會是很好的選擇；如果項目時間緊張，沒有足夠的人手和資金，對圖形和系統原生特性沒有要求，那么web app將是性價比最高的解決方案。
表一對比了native app, hybrid app和web app在不同方面的表現，可以幫助你根據實際情況選擇最佳的解決方案。
InfoQ上高嘉峻的一篇文章分享了幾個hybrid app開發的誤區，也是開發過程中應該盡量避免的：

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

忽略關鍵因素：Web是基于PC的一種開發模式，而mobile app運行于移動端。通常，web開發者使用PC瀏覽器模擬app中的web view進行調試，而不是直接使用手機上的web view。 二者能支配的CPU資源，最大占有內存，運行網絡環境，和鼠標/觸控操作，瀏覽器對CSS/JS的解析和對事件的處理有著巨大的差別。而這些差別常常是web頁面能否正常運行于app中的關鍵因素。

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

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

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

三、Hybrid App案例

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

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

四、結語

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

開發工具：
8個hybrid app開發工具
Hybrid App開發實戰
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

二、什么時候選擇Hybrid App：
Web App Hybrid App和 Native App的區別
5 Points to Consider Before Making a Hybrid Mobile App
別闖進Hybrid App的誤區

三、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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。