Hybrid App，一種開發(fā)模式，兼顧Web和Native的一種開發(fā)模式。有人說它把Web App扼殺在搖籃里，有人說它把Native App引向一個新階段。我說，它是一把雙刃劍，千萬別闖進它的誤區(qū)。本文是筆者在實踐Hybrid App開發(fā)模式過程中總結(jié)出的一些經(jīng)驗教訓，供讀者參考。Hybrid App雖好，可萬萬不能倉促選擇，盲目運用。

智能手機日益普及，移動互聯(lián)網(wǎng)亂戰(zhàn)日趨白熱化，開發(fā)一個應用早就不是技術(shù)圈熱議的話題，iOS和Android上的App已經(jīng)成了每個互聯(lián)網(wǎng)產(chǎn)品的標配。“唯快不破”也是中被移動互聯(lián)網(wǎng)人尊為鐵律，快速迭代，高效開發(fā)，低成本上線是每一個App開發(fā)團隊追求的目標。同時，隨著HTML 5的不斷升溫和智能手機硬件性能的提高，Hybrid App的概念應運而生。這種“Native搭臺，HTML 5唱戲”的Hybrid App開發(fā)模式一時間受到各個開發(fā)團隊追捧，快速進入了大量開發(fā)團隊，成為主流開發(fā)模式。

Hybrid App優(yōu)點眾多，Web前端工程師0成本介入，不依賴版本的實時更新，快速實現(xiàn)跨平臺需求，等等。而另一個方面，2012年Hybrid App的踐行者Facebook決定大量棄用App中的HTML頁面，轉(zhuǎn)向更加Native化的方案。Facebook的這一舉措也給Hybrid App方案的敲響了警鐘，這似乎并不是一個完美的方案。

本文主要跟大家分享一下我團隊和個人在Hybrid App的實踐中遇到的問題，提醒大家不要闖進Hybrid App的誤區(qū)。

誤區(qū)一：為了HTML 5而Hybrid App。

HTML 5在Hybrid App模式中是一個最常被提起的概念。HTML 5作為一個HTML 4.0.1和XHTML 1.0的升級版，基于舊版本有更強大的表現(xiàn)功能，并加入了Local Storage等技術(shù)，確實為Web頁面提供了更大的想象空間和更多的可能性。但HTML 5處在目前的發(fā)展階段，受到瀏覽器兼容性和手機硬件性能水平的影響，它所能提供的功能與Native仍然有很大差距。

所以，我認為作為工程師要明確一款App采用Hybrid App模式的根本原因是什么。作為一款App其最根本的功能是滿足使用者的需求，而并不是服務某項新技術(shù)。因此當決定采用Hybrid App去構(gòu)建一款應用時，應該從應用本身功能特點和整個團隊的開發(fā)資源配比統(tǒng)一考慮，是否有必要同時又有能力去駕馭一款“Native搭臺，HTML唱戲”的Hybrid App。類似“HTML 5的時代已經(jīng)到來，如果我們不這么做就變土鱉了，錯過這場技術(shù)革新的大潮，終將被這個時代所淘汰”的話真不是一個有責任心的工程師應該發(fā)出的聲音。

誤區(qū)二：忽略關(guān)鍵因素

在談到Hybrid App的場合我們更多提及的是它有諸多優(yōu)點，如何架構(gòu)一個Hybrid App，怎么讓Web和Native和諧共處，然而Web開發(fā)中會被忽略的一些因素少被提起，這些因素又恰恰經(jīng)常是一個Web頁面能否正常運行在App中的決定性因素。

Web開發(fā)是基于PC的一種開發(fā)模式，開發(fā)者使用PC瀏覽器模擬App中的Web View進行調(diào)試。PC瀏覽器與手機Web View的區(qū)別是巨大的，能支配的CPU資源，最大占有的內(nèi)存，運行的網(wǎng)絡(luò)環(huán)境，鼠標操作與觸控操作的區(qū)別，瀏覽器對CSS/JS的解析和對事件處理，等 等。

App工程師，無論是iOS還是Android，最敏感的一個問題莫過于內(nèi)存管理，而在Web開發(fā)則對這個問題沒有過多注意。這就經(jīng)常導致同一個功 能界面Native實現(xiàn)中會通過一些技術(shù)手段，把內(nèi)存容量控制在操作系統(tǒng)允許的范圍內(nèi)保證App正常運行。如果以Web方式接入App的頁面沒有一個明確 的標準和嚴格的驗收機制，相應的Web實現(xiàn)則不會過多考慮這方面的問題，而且瀏覽器也沒有給前端工程師提供足夠的Api支持處理內(nèi)存問題，導致在某些條件 下造成App無法正常運行，甚至Crash。

同樣的問題會出現(xiàn)在網(wǎng)絡(luò)環(huán)境方面，雖然現(xiàn)在wifi覆蓋越來越廣，3G網(wǎng)絡(luò)也日益普及，但App運行的網(wǎng)絡(luò)環(huán)境與PC相比仍然有著巨大差 距，wifi和蜂窩網(wǎng)絡(luò)的切換，基站變化等諸多因素都會導致網(wǎng)絡(luò)間歇性斷開。Web開發(fā)總是默認有一個穩(wěn)定的網(wǎng)絡(luò)環(huán)境，因此在對于不穩(wěn)定網(wǎng)絡(luò)環(huán)境問題的處 理上也有所欠缺。沒有明確的對于低速網(wǎng)絡(luò)或不穩(wěn)定網(wǎng)絡(luò)訪問的處理，在很多情況下這些頁面也會非常不給面子。

誤區(qū)三：富交互導致體驗差

這里所謂的體驗問題一分為二：一是與手機平臺默認交互習慣不一致的體驗，二是與同樣功能Native界面存在的體驗差距。

無論在Android還是iOS平臺上，都有各自的一套交互習慣，包括視覺風格，界面切換，操作習慣等，與Web習慣完全不同。如果使用Web方式開發(fā)富交互的頁面，或多頁面功能就會出現(xiàn)這樣的問題。

以iOS界面切換為例，系統(tǒng)風格是新界面自右向左推入，后退時界面自左向右推出，而舊界面保持狀態(tài)。Web開發(fā)的默認習慣則是刷新頁面，無論新載入 頁面或是后退，都會對頁面進行刷新。因此使用Web模式開發(fā)多界面功能就面臨這樣的交互習慣差異，造成體驗上的損失。當然Web方式也可模擬Native 的交互方式，但這樣的模擬首先提高了開發(fā)成本，有悖于最初的高效原則，從效果上看，也很難達到Native的流暢性。

另一個方面，也是上述提到的與Native相比，同樣的功能在性能上存在巨大差距。Web界面上JS對HTML Node的操作需要消耗大量的CPU資源，手機CPU的性能還不能與PC相提并論，就算在智能手機之間，硬件水準也參差不齊，一個可以在iPhone 5上流暢運行的界面，跑到三星S III上很可能就卡住不動了。所以我們經(jīng)常可以發(fā)現(xiàn)一些富交互頁面上的操作無法達到令人滿意的流暢度，而流暢度也正是用戶評價一款App優(yōu)劣的最直觀因 素。

誤區(qū)四：跨平臺

一次開發(fā)，跨平臺運行是Web的優(yōu)勢，這也是很多App采用Hybrid模式的重要原因之一。兼容性問題在Web開發(fā)過程中往往不被關(guān)注，但當下智能手機的軟硬件版本眾多，兼容性絕對是一個不容忽視的問題。

以Android手機為例，諸多主流品牌都有各自定制過的操作系統(tǒng)，瀏覽器內(nèi)核對JS和CSS的解析，事件處理等方面都存在區(qū)別。以HTC One為例重疊在一起的層在某些情況下會對點擊事件透傳，而其他多數(shù)平臺則不存在這個問題。并且目前移動平臺的開發(fā)框架還沒有完全成熟，可以很好的解決兼 容性問題。所以就要求開發(fā)者在開發(fā)過程中要對兼容性做充分測試，對于某些特殊版本進行特殊處理。

即使在相對統(tǒng)一的iOS平臺，不同版本之間也存在較大差異。例如：在iOS 4.x版本中CSS甚至不支持position fix的屬性，4英寸屏幕的設(shè)備無法很好的支持apple-mobile-web-app-capable屬性，等等。

誤區(qū)五：交互一致性。

交互一致性是一個非常容易被誤讀的概念，“一致性”經(jīng)常被理解為同一個應用在各種平臺和場景下要有一致性的體驗。我認為在移動平臺開發(fā)過程中，“一 致性”應該是App視覺和交互習慣與其運行平臺的習慣保持一致。而Web開發(fā)“一次開發(fā)，跨平臺運行”的特性與此存在一定程度上的沖突。

以“返回上一頁面”的操作為例，在iOS平臺上在頁面頂部始終存在一個44像素高的導航欄，左側(cè)有一個返回按鈕用于返回操作，而Android平臺 則習慣使用設(shè)備提供的返回鍵操作。這個返回按鈕在iOS平臺可以通過絕對地址的方式連接到任何其他頁面，而在Android平臺返回按鈕和設(shè)備的返回鍵則 可能指向不同的位置。

例如這樣的一個流程：首頁->列表->篩選->刷新過的列表，此時的返回操作被期望是導向首頁，則頁面上的返回按鈕可以通過絕對鏈接的方式實現(xiàn)，而Android設(shè)備的返回鍵則只能返回上一個篩選頁面，再次返回是篩選前的列表頁。

Hybrid App方案是一把雙刃劍，一方面它平衡了Native App和Web頁面的優(yōu)缺點，一定程度上解決了Native App開發(fā)過程中迭代慢，版本依賴，Native開發(fā)資源不足的問題，但另一個方面過度依賴Hybrid方案會造成Web前端開發(fā)成本快速上升，甚至造成 App整體體驗下降，甚至造成功能缺失。

不要為了Hybrid而Hybrid，控制好方案中Native與Web的邊界。

擴展閱讀

較早Mobtest針對Facebook的iOS App專門做的一片評測文章，闡述了使用大量HTML頁面的App出現(xiàn)的問題：http://blog.mobtest.com/2012/05/heres-why-the-Facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/

資深開發(fā)者@李秉駿 在InfoQ發(fā)表的《Hybrid App實戰(zhàn)》，闡述了Hybrid模式的優(yōu)勢與劣勢，并簡單介紹了開發(fā)Hybrid App所需的技術(shù)儲備，供讀者參考。：http://www.infoq.com/cn/articles/hybrid-app-development-combat

資深開發(fā)者@唐巧 較早對Hybrid App主流框架PhoneGap的分析文章，筆者非常同意對PhoneGap框架的態(tài)度，PhoneGap雖好，可不要貪杯 喲：http://blog.devtang.com/blog/2012/03/24/talk-about-uiwebview-and- phonegap/