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

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

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

本文主要跟大家分享一下我團(tuán)隊(duì)和個(gè)人在Hybrid App的實(shí)踐中遇到的問(wèn)題，提醒大家不要闖進(jìn)Hybrid App的誤區(qū)。

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

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

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

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

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

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

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

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

誤區(qū)三：富交互導(dǎo)致體驗(yàn)差

這里所謂的體驗(yàn)問(wèn)題一分為二：一是與手機(jī)平臺(tái)默認(rèn)交互習(xí)慣不一致的體驗(yàn)，二是與同樣功能Native界面存在的體驗(yàn)差距。

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

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

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

誤區(qū)四：跨平臺(tái)

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

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

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

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

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

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

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

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

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

擴(kuò)展閱讀

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

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

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