哪條道路能帶我們通往成功的彼岸？

【2013年10月9日 51CTO外電頭條】在移動(dòng)應(yīng)用開發(fā)領(lǐng)域，擺在我們面前的是三條道路：混合、原生與HTML 5。

Native（原生）：

• 豐富的用戶體驗(yàn)
• 平臺(tái)指向性
• 久經(jīng)考驗(yàn)的移動(dòng)應(yīng)用開發(fā)途徑

Hybrid（混合）：

• 與應(yīng)用類似的使用體驗(yàn)
• 利用設(shè)備自身功能
• 多平臺(tái)支持能力

HTML 5：

• 更快的開發(fā)周期
• 跨平臺(tái)運(yùn)行
• 實(shí)時(shí)更新

Hybrid

對(duì)于質(zhì)量要求不高的普通業(yè)務(wù)應(yīng)用來(lái)說(shuō)，混合型應(yīng)用在大多數(shù)情況下都能提供必要功能與合理的性能表現(xiàn)。一款混合移動(dòng)應(yīng)用往往利用HTML 5、CSS3、JavaScript以及PhoneGap共同編寫而成，且運(yùn)行在iOS、Android、Windows Phone以及黑莓設(shè)備之上。

圖示：一款利用Knockout與ASP.NET MVC的混合移動(dòng)應(yīng)用

原生

對(duì)于游戲應(yīng)用這類對(duì)性能、圖形處理要求較高，但不太在乎文件尺寸的軟件來(lái)說(shuō)，原生應(yīng)用才是最理想的選擇——不過(guò)大家其實(shí)也可以利用PhoneGap實(shí)現(xiàn)游戲開發(fā)。

HTML 5

最后，對(duì)于任何追求極致輕量化的網(wǎng)站（或者Web應(yīng)用）都應(yīng)該通過(guò)HTML 5進(jìn)行創(chuàng)建，并使用Bootstrap或者Foundation等技術(shù)作為響應(yīng)層。響應(yīng)式Web設(shè)計(jì)為設(shè)備提供一套極度精簡(jiǎn)化的訪問門戶，技術(shù)人員還能夠根據(jù)需求每天對(duì)其加以調(diào)整。

您是否擁有打理原生平臺(tái)的必要技能？

影響選擇的另一大重點(diǎn)在于，原生應(yīng)用開發(fā)工作需要大家對(duì)各種平臺(tái)上的語(yǔ)言具備相當(dāng)了解（例如C#、Objective-C以及Java）；相比之下，混合應(yīng)用則可以通過(guò)CSS3、HTML 5以及JavaScript等比較類似的手段實(shí)現(xiàn)開發(fā)。因此，混合應(yīng)用帶來(lái)的學(xué)習(xí)曲線相對(duì)平緩，因此開發(fā)流程相對(duì)較快、成本也更低一些。

獨(dú)立平臺(tái)還是特殊平臺(tái)（也就是高性能平臺(tái)）？

除了學(xué)習(xí)曲線之外，原生應(yīng)用還帶來(lái)了平臺(tái)指向性，因此我們必須要針對(duì)每一種平臺(tái)開發(fā)一款應(yīng)用——相比之下，混合應(yīng)用能夠運(yùn)行在大部分主流平臺(tái)之上，例如iOS、Android、Windows Phone以及黑莓等。不過(guò)有時(shí)候用戶對(duì)性能的要求更高，這時(shí)候具備獨(dú)特用戶界面的特殊平臺(tái)就有了用武之地。在這類情況下，大家可能發(fā)現(xiàn)原生應(yīng)用比混合應(yīng)用更具優(yōu)勢(shì)。反過(guò)來(lái)說(shuō)，如果性能不太重要，那么KendoUI Mobile、Sencha Touch以及jQuery Mobile等移動(dòng)庫(kù)所匯集的功能足以讓應(yīng)用成品在外觀與使用感受上與各類平臺(tái)以及同一平臺(tái)的不同版本相吻合。

何時(shí)需要重視移動(dòng)應(yīng)用的用戶使用體驗(yàn)？

對(duì)于版本眾多的通用型應(yīng)用程序而言，特定平臺(tái)的用戶體驗(yàn)就變得非常重要。對(duì)于這類應(yīng)用程序，終端用戶顯然不希望在Android設(shè)備上看到iOS風(fēng)格的用戶界面或者在Windows Phone上體驗(yàn)與Android雷同的使用感受。不過(guò)對(duì)于專門針對(duì)單一企業(yè)或者業(yè)務(wù)部門的商業(yè)應(yīng)用來(lái)說(shuō)，客戶可以在不同平臺(tái)上選擇統(tǒng)一的使用體驗(yàn)，從而降低開發(fā)及培訓(xùn)成本。如果特定平臺(tái)用戶體驗(yàn)非常重要，那么大家最好選擇以KendoUI Mobile為代表的混合移動(dòng)框架最為適合。

圖一——利用KendoUI Mobile開發(fā)出的多平臺(tái)混合應(yīng)用。

混合框架支持哪些平臺(tái)？

原生方案優(yōu)于混合方案的另一大理由在于“平臺(tái)支持能力”。大家不妨思考這樣的例子，Sencha Touch無(wú)法支持Windows 7 Phone。為了編寫出適合Windows 7平臺(tái)的移動(dòng)應(yīng)用，大家很可能不得不選擇原生開發(fā)模式。大家可以通過(guò)下圖了解Sencha Touch所支持的移動(dòng)設(shè)備平臺(tái)：

圖一——Sencha Touch所支持的移動(dòng)平臺(tái)相對(duì)有限。

PhoneGap為混合應(yīng)用提供的功能支持

與混合框架有限的平臺(tái)支持能力類似，PhoneGap在某些情況下同樣表現(xiàn)欠佳。不過(guò)PhoneGap 3.0所提供的功能支持已經(jīng)可以滿足我們的大部分需求——只要對(duì)性能要求不是太高。舉例來(lái)說(shuō)，Phone Gap不支持iPhone與黑莓的指南針功能，黑莓、WebOS、塞班以及Bada等版本的媒體功能同樣不在受支持之列。

PhoneGap 3.0在各平臺(tái)上的功能支持結(jié)果。

提交PhoneGap應(yīng)用之前的注意事項(xiàng)

在將PhoneGap應(yīng)用程序提交地蘋果iTunes、Google Play或者Windows Phone Marketplace等應(yīng)用程序商店之前，大家首先需要謹(jǐn)慎核對(duì)PhoneGap所提供的各項(xiàng)功能是否全部包含在內(nèi)——無(wú)論您的應(yīng)用程序是否實(shí)際使用到了這些功能。

請(qǐng)務(wù)必確保將下列PhoneGap功能添加到應(yīng)用程序當(dāng)中，包括：數(shù)據(jù)服務(wù)、移動(dòng)與方向傳感器、麥克風(fēng)、音樂及視頻庫(kù)、持有者驗(yàn)證、攝像頭、聯(lián)系人以及指南針等。再次強(qiáng)調(diào)，不用理會(huì)這些功能是否能夠確實(shí)對(duì)應(yīng)用產(chǎn)生影響或者在終端用戶的設(shè)備上順利起效——只要添加進(jìn)去就好。

有了以上列舉的各項(xiàng)標(biāo)準(zhǔn)，現(xiàn)在大家應(yīng)該能夠輕松判斷自己到底應(yīng)該采用混合、原生還是HTML 5等移動(dòng)應(yīng)用開發(fā)方式。由于大部分使用環(huán)境傾向于以較低的技術(shù)門檻提供多平臺(tái)應(yīng)用成果，因此我們不妨將混合移動(dòng)應(yīng)用視為首選方案。

#p#

混合移動(dòng)應(yīng)用

混合應(yīng)用之所以被稱為“混合”，是因?yàn)樗瑫r(shí)利用HTML 5與CSS3創(chuàng)建移動(dòng)UI，同時(shí)又通過(guò)JavaScript代碼實(shí)現(xiàn)與移動(dòng)SDK之間的通信。

混合應(yīng)用等同于單頁(yè)面應(yīng)用

混合移動(dòng)應(yīng)用基本上就是一種單頁(yè)面應(yīng)用（或者簡(jiǎn)稱SPA），而所謂SPA，是指那些只存在于單一HTML頁(yè)面當(dāng)中的Web應(yīng)用。應(yīng)用程序的“視圖”將在用戶操作應(yīng)用程序?qū)Ш綑C(jī)制時(shí)被添加至DOM當(dāng)中（或者從其中移除）。單頁(yè)面應(yīng)用架構(gòu)最適合以下幾種使用情況：

一）無(wú)需利用持續(xù)性頁(yè)面刷新實(shí)現(xiàn)與原生應(yīng)用相類似的流暢體驗(yàn)的應(yīng)用程序。

二）UI被整體創(chuàng)建在客戶端上，且創(chuàng)建過(guò)程無(wú)需依賴服務(wù)器的介入，這一機(jī)制對(duì)于需要離線運(yùn)行的應(yīng)用程序來(lái)講堪稱理想架構(gòu)。

PhoneGap如何工作？

PhoneGap為移動(dòng)應(yīng)用開發(fā)人員提供一套名為phonegap-3.0.0.js的JavaScript API。該JavaScript API會(huì)調(diào)用PhoneGap的特殊平臺(tái)引擎/橋接機(jī)制，后者則反過(guò)來(lái)調(diào)用原生平臺(tái)SDK以實(shí)現(xiàn)對(duì)設(shè)備的操作，例如訪問聯(lián)系人名單或者撥打電話等。在Windows Phone方面，PhoneGap引擎/橋接機(jī)制則相當(dāng)于被整合在WP7GapClassLib.dll文件中的SilverLight。

PhoneGap引擎由各平臺(tái)的原生語(yǔ)言所創(chuàng)建（例如C#、Objective-C以及Java），從而為JavaScript開發(fā)者提供顯示界面。PhoneGap JavaScript API與引擎之間的大部分通信需要借助非Chrome瀏覽器URL實(shí)現(xiàn)。

gap://SomePlugin.someMethod?arg1Name=someArg1&arg2Name=someArg2

PhoneGap應(yīng)用程序架構(gòu)

PhoneGap還提供一套與HTML 5、JavaScript以及CSS3在非Chrome瀏覽器（例如不提供用戶界面的瀏覽器）中相綁定的創(chuàng)建系統(tǒng)。

PhoneGap創(chuàng)建系統(tǒng)中綁定有js、css以及html，當(dāng)然這一切只能在非Chrome瀏覽器中實(shí)現(xiàn)。

加速裝置

加速計(jì)捕捉設(shè)備會(huì)感受設(shè)備在x、y及z軸方向的運(yùn)動(dòng)。利用PhoneGap，大家可以訪問內(nèi)置于iPhone、Android、Windows Phone以及黑莓等設(shè)備當(dāng)中的加速計(jì)。舉例來(lái)說(shuō)，大家可以通過(guò)對(duì)App/Supporting Files/Cordova.plist文件的配置獲取對(duì)應(yīng)權(quán)限、從而使用iOS加速計(jì)。

<key>Plugins</key> 
<dict> 
    <key><a href="http://docs.phonegap.com/en/1.9.0/cordova_accelerometer_accelerometer.md.html#Accelerometer">Accelerometer</a></key> 
    <string>CDVAccelerometer</string> 
</dict> 

Windows Phone采用的權(quán)限獲取方式與iOS相似，大家可以通過(guò)對(duì)Properties/WPAppManifest.xml進(jìn)行配置以訪問加速計(jì)數(shù)據(jù)。

<Capabilities> 
    <Capability Name="ID_CAP_SENSORS" /> 
</Capabilities> 

加速計(jì)會(huì)檢測(cè)設(shè)備在各個(gè)方向的運(yùn)動(dòng)軌跡。

[[86897]]

iPhone游戲“重力迷宮”就使用到了加速計(jì)功能。

#p#

混合移動(dòng)應(yīng)用開發(fā)所使用的移動(dòng)框架

盡管大家完全可以利用HTML 5、CSS 3以及JavaScript完成編碼工作，并將其與PhoneGap加以綁定以提供針對(duì)受支持平臺(tái)的原生鏡像，但人們通常還是會(huì)在混合移動(dòng)應(yīng)用開發(fā)過(guò)程中選擇其它類型的移動(dòng)框架。這不僅能夠節(jié)約大量代碼行數(shù)進(jìn)而省去開發(fā)時(shí)間，下面所列出的部分熱門框架還能在技術(shù)社區(qū)的幫助下不斷獲得更多功能、平臺(tái)支持以及實(shí)施能力。

接下來(lái)，我們會(huì)分別探討KendoUI Mobile、Sencha Touch以及jQuery Mobile，從而幫助各位了解在混合移動(dòng)應(yīng)用框架的選擇當(dāng)中哪些因素最為重要。我們還將在后續(xù)文章中進(jìn)一步剖析其它框架的優(yōu)勢(shì)與缺點(diǎn)。  

jQuery Mobile——混合移動(dòng)應(yīng)用框架

jQuery Mobile是一款易于學(xué)習(xí)的移動(dòng)框架，擁有活躍且極具規(guī)模的技術(shù)社區(qū)外加大量移動(dòng)實(shí)用工具。相比之下，它的學(xué)習(xí)曲線不像Sencha Touch（售價(jià)595美元）那樣嚴(yán)酷，難度甚至不及KendoUI Mobile（售價(jià)699美元）。不過(guò)jQuery Mobile應(yīng)用的列表?xiàng)l目一旦達(dá)到五十到六十個(gè)，性能就會(huì)出現(xiàn)疲軟（甚至直接導(dǎo)致移動(dòng)瀏覽器崩潰）。在另一方面，Sencha Touch能夠載入超過(guò)兩百個(gè)條目，且不會(huì)引發(fā)任何性能問題。

jQuery Mobile 1.3.2的組成部分包括JavaScript（147KB）、CSS（92KB）、圖片數(shù)據(jù)（約6.6MB，zip格式）以及用戶核心jQuery 1.10.2庫(kù)（91KB）。由于移動(dòng)設(shè)備的內(nèi)存與CPU性能比較有限，因此在解析JavaScript代碼時(shí)文件大小就顯得非常重要。有鑒于此，谷歌Closure編譯器、Minify以及YUI壓縮工具紛紛登場(chǎng)，旨在剝離JavaScript代碼中不具實(shí)際意義的部分。今后我們會(huì)在獨(dú)立的文章中對(duì)優(yōu)先問題詳加闡述。在本文中，我們將把注意力集中在移動(dòng)應(yīng)用框架身上。

Closure能夠大大降低JavaScript代碼的體積，同時(shí)又不影響其運(yùn)行效果及原始功能。

為了設(shè)計(jì)jQuery Mobile頁(yè)面，jQuery Mobile為我們提供了一套便捷的代碼設(shè)計(jì)工具——也就是Codiqa。一旦HTML、CSS及JavaScript頁(yè)面設(shè)計(jì)完成，我們就能夠以zip格式對(duì)其進(jìn)行下載。請(qǐng)大家記住，jQuery UI（一款專為桌面Web應(yīng)用打造的jQuery工具庫(kù)）由于同CSS存在沖突而無(wú)法被使用于jQuery Mobile。因此我們只能直接使用jQuery Mobile工具或者技術(shù)社區(qū)創(chuàng)建的工具。

用于創(chuàng)建移動(dòng)UI的Codiqa。

為了構(gòu)建如上圖所示的邏輯UI，大家需要的就是利用jQuery CSS及數(shù)據(jù)屬性編寫我們所熟知的HTML代碼。數(shù)據(jù)屬性是HTML 5中的一項(xiàng)功能，幫助用戶以data-為前綴定義各種“保存有任何信息”的元素，而且這些元素不會(huì)對(duì)頁(yè)面布局造成影響。請(qǐng)注意，<div>中的data-role屬性將使其成為一個(gè)用于涵納label與textbox的容器。

KendoUI Mobile——混合移動(dòng)應(yīng)用框架

KendoUI Mobile是一款基于MVVM的移動(dòng)應(yīng)用框架，附帶圖表及多款非常實(shí)用的移動(dòng)工具，整體方案售價(jià)為699美元。KendoUI支持Knockout等模型綁定，從而成功幫助開發(fā)人員避免編寫大量代碼行。

KendoUI Mobile提供多款實(shí)用工具及框架，幫助用戶開發(fā)混合移動(dòng)應(yīng)用。

為了在移動(dòng)平臺(tái)上實(shí)現(xiàn)更為順暢的布局效果，我們需要將KendoUI與Bootstrap或者Foundation等布局庫(kù)相結(jié)合來(lái)使用——這是因?yàn)镵endoUI本身并非布局庫(kù)。與完全使用JavaScript的Sencha Touch相比，KendoUI的學(xué)習(xí)曲線更為和緩，但卻通過(guò)MVC架構(gòu)為開發(fā)人員帶來(lái)更出色的靈活性與性能表現(xiàn)。

KendoUI的Hierarchical ListView、ActionSheet以及ListView控制機(jī)制能夠很好地羅列應(yīng)用條目，Tablet SplitView控制機(jī)制則出色地滿足了平板設(shè)備上的主從復(fù)合使用環(huán)境需求。

KendoUI Mobile的ActionSheet控制機(jī)制在iPhone主題下的顯示效果。

KendoUI Mobile的ListView控制機(jī)制在Windows Phone主題下的顯示效果。

KendoUI Mobile的SplitView控制機(jī)制在Android平板設(shè)備主題下的顯示效果。

KendoUI Mobile主題創(chuàng)建工具能夠被用于在特定平臺(tái)上創(chuàng)建主題：

KendoUI Mobile的主題創(chuàng)建工具。

出于性能及靈活性的考量，KendoUI Mobile的iOS主題中并不包含任何圖片信息。全部UI元素都由CSS效果所創(chuàng)建，因此應(yīng)用程序本身看起來(lái)與真正的iOS應(yīng)用存在些許區(qū)別。

KendoUI利用其dataviz組件帶來(lái)交互式圖形效果，從而實(shí)現(xiàn)數(shù)據(jù)可視化功能。要繪制圖形，KendoUI會(huì)自動(dòng)檢測(cè)瀏覽器功能并利用SVG（或者將VML作為備選方案）。IE 6、IE 7以及IE 8只支持VML；IE 9則支持某些SVG功能；其它主流瀏覽器則全部支持SVG。

KendoUI Mobile dataviz生成的圖形效果。

Sencha Touch——混合移動(dòng)應(yīng)用框架

Sencha Touch用極高的使用復(fù)雜性外加相當(dāng)夸張的學(xué)習(xí)曲線換得無(wú)與倫比的性能表現(xiàn)。Sencha Touch屬于MVC且完全采用JavaScript機(jī)制，對(duì)于Web開發(fā)人員來(lái)說(shuō)其難度有些無(wú)法接受，但對(duì)Java/C#出身的開發(fā)者來(lái)說(shuō)則問題不大。雖然有些不便，但其出色的性能表現(xiàn)令人印象深刻——尤其是與jQuery Mobile那孱弱的能力相比。

由于Sencha Touch最初只針對(duì)iOS平臺(tái)，而后才添加了對(duì)Android、黑莓以及Windows Phone的支持能力，因此大家應(yīng)該做好心理準(zhǔn)備——其在各平臺(tái)上的性能表現(xiàn)并不完全一致。

Sencha Touch提供一大堆移動(dòng)實(shí)用工具，例如Navigation View & Carousel以及一套強(qiáng)大的布局庫(kù)。

Sencha Touch中的Carousel View控制機(jī)制。

與PhoneGap一樣，Sencha Touch同樣擁有原生打包與部署系統(tǒng)。因此，大家完全可以單純利用Sencha Touch創(chuàng)建出終端到終端跨平臺(tái)解決方案且無(wú)需讓PhoneGap涉入其中。

#p#

HTML 5響應(yīng)式網(wǎng)站

我們已經(jīng)在之前的文章中討論過(guò)應(yīng)用程序開發(fā)，不過(guò)現(xiàn)在我們需要針對(duì)移動(dòng)網(wǎng)站開發(fā)工作的中一些要點(diǎn)性概念進(jìn)行深入剖析。

移動(dòng)瀏覽器

移動(dòng)瀏覽器與傳統(tǒng)桌面瀏覽器的區(qū)別在于，它支持兩種視圖端口——也就是Layout與Visual。Layout檢視區(qū)被所有CSS計(jì)算所使用；而Visual檢視區(qū)則作為當(dāng)前設(shè)備屏幕上html文檔的組成部分。Layout檢視區(qū)在不同瀏覽器上的實(shí)際顯示寬度有所區(qū)別。iPhone上的Safari瀏覽器使用的是980像素、Opera為850像素、Android Webkit為800像素，IE則為974像素。在黑莓設(shè)備上，布局視圖始終保持100%原始檢視區(qū)尺寸，而且絕對(duì)不會(huì)變更。

window.innerWidth // and innerHeight for visual viewport dimensions
document.clientWidth //and clientHeight for layout viewport dimensions

移動(dòng)瀏覽器支持兩種檢視區(qū)方案——Layout與Visual。

Hash片段被用于索引Ajax類網(wǎng)站。

大部分移動(dòng)網(wǎng)站基于Ajax，也就是在必要時(shí)才載入對(duì)應(yīng)內(nèi)容。在典型網(wǎng)站當(dāng)中，URL既是一種標(biāo)記書簽與分享內(nèi)容的方式，又可以作為網(wǎng)站索引當(dāng)中的搜索引擎。不過(guò)Ajax類網(wǎng)站，例如Twitter與Facebook，會(huì)下載JavaScript代碼，從而使Ajax調(diào)用請(qǐng)求獲取到更多內(nèi)容。但這會(huì)產(chǎn)生一些問題：以谷歌為代表的搜索機(jī)制并不會(huì)解析JavaScript代碼或者發(fā)出Ajax請(qǐng)求，因此其永遠(yuǎn)無(wú)法獲取與用戶瀏覽內(nèi)容相一致的頁(yè)面。由此導(dǎo)致的結(jié)果？網(wǎng)站的索引機(jī)制變得亂七八糟、無(wú)法正常使用。

為了創(chuàng)建一條能夠向搜索機(jī)制返回HTML而非JavaScript內(nèi)容的URL，我們需要使用Hash片段（例如#！）。像http://twitter.com/#!/mashable或者www.example.com/ajax.html#!key=value這樣的Ajax網(wǎng)站或者單頁(yè)面應(yīng)用會(huì)向搜索機(jī)制返回靜態(tài)HTML，從而改進(jìn)站點(diǎn)的索引效果。

本文節(jié)選譯自Challenges & solutions - Architecture of a Modern Web Application - Mobile App。轉(zhuǎn)載請(qǐng)附上原文及本文鏈接。