Web開發(fā)者的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)策略及工具
在之前的一篇文章中，我們曾經(jīng)討論過，對于交互和視覺設(shè)計(jì)相關(guān)職能的從業(yè)人員來說，從傳統(tǒng)Web行業(yè)向移動(dòng)應(yīng)用領(lǐng)域轉(zhuǎn)型的過程中需要學(xué)習(xí)和注意的問題。這篇文章中提到過“混合型應(yīng)用”的概念，以及與之相關(guān)的兩本開發(fā)指導(dǎo)書籍。今天這篇文章的英文原文，就是來自這兩本書的作者——移動(dòng)應(yīng)用開發(fā)者Jonathan Stark。
本文中，他將站在傳統(tǒng)Web前端開發(fā)人員的角度，為我們介紹一些在實(shí)際項(xiàng)目案例中總結(jié)出來的移動(dòng)應(yīng)用開發(fā)方法策略，以及幾類具有代表性的用于打造跨平臺(tái)移動(dòng)應(yīng)用的前端開發(fā)工具。
各位前端開發(fā)相關(guān)職能的同行們，擴(kuò)展視野、提升技能、隨“機(jī)”應(yīng)變的時(shí)機(jī)已然成熟;衷心希望本文可以成為推動(dòng)大家事業(yè)進(jìn)步發(fā)展的一個(gè)催化點(diǎn)。不多說了，我們來看正文。
無論站在怎樣的角度去衡量，移動(dòng)互聯(lián)網(wǎng)及客戶端應(yīng)用的發(fā)展勢頭都是非常迅猛的。日均使用量、智能手機(jī)的普及率、來自移動(dòng)設(shè)備的訂閱量、搜索引擎流量、廣告呈現(xiàn)、應(yīng)用售賣...所有這些都處于迅速上升的狀態(tài)。可以預(yù)計(jì)，在不久的將來，移動(dòng)設(shè)備將擁有足夠的成熟度與普及率，并躋身于傳統(tǒng)桌面電腦、筆記本等硬件平臺(tái)的行列，成為我們?nèi)粘Ｉ畹闹饕O(shè)備。
巨大的移動(dòng)市場為傳統(tǒng)Web設(shè)計(jì)開發(fā)人員帶來了新的機(jī)遇與挑戰(zhàn)。各類移動(dòng)設(shè)備在爆發(fā)式增長的同時(shí)，也帶來了***的分裂與混亂的狀況。如果需要同時(shí)為多平臺(tái)設(shè)備進(jìn)行客戶端應(yīng)用的開發(fā)、測試和維護(hù)，勢必會(huì)消耗大量的資源與成本。
本文中，我們首先會(huì)對幾種移動(dòng)化解決方案進(jìn)行比較和分析，然后將重點(diǎn)放在一些常見的用于跨平臺(tái)移動(dòng)應(yīng)用開發(fā)的前端框架工具上;不過我不會(huì)在***選出一個(gè)所謂的***方案——開發(fā)方式的選擇最終會(huì)取決于你的項(xiàng)目本身，包括業(yè)務(wù)模式、需求、目標(biāo)市場、開發(fā)資源等多方面因素。本文的主要目標(biāo)是提供一些有用的信息，幫助各位讀者在實(shí)際項(xiàng)目中選擇最合適的方法與工具。
Web應(yīng)用(Web App)與原生客戶端應(yīng)用(Native App)
關(guān)于這兩種移動(dòng)化方案孰優(yōu)孰劣的辯論已然有不少了。
我相信，如果你能以Web應(yīng)用的方式打造移動(dòng)化產(chǎn)品，那么你確實(shí)應(yīng)該這樣做;反之則不應(yīng)該...另外一種情況則介于兩者之間，即通過HTML、CSS、JavaScript等前端技術(shù)，結(jié)合移動(dòng)設(shè)備原生開發(fā)方式，打造所謂的混合型應(yīng)用。
看似廢話，但重點(diǎn)在于“能”或“不能”。這里我們主要指具體的項(xiàng)目需求，而非技術(shù)開發(fā)能力。我所在的團(tuán)隊(duì)，做過的多數(shù)案例，都來自于企業(yè)級(jí)的客戶。大公司，顧名思義，在人員、產(chǎn)品及服務(wù)等方面都具有相當(dāng)?shù)囊?guī)模，他們所需要的移動(dòng)化解決方案在跨平臺(tái)方面的需求都很高。
當(dāng)接手一個(gè)新的企業(yè)級(jí)移動(dòng)化項(xiàng)目時(shí)，我會(huì)將Web App作為默認(rèn)的***方式，同時(shí)結(jié)合以下三個(gè)問題進(jìn)行進(jìn)一步評估：
1. 功能方面，是否涉及那些只有本地應(yīng)用才能利用的設(shè)備硬件資源?
比如，一款有條形碼掃描功能的應(yīng)用，必須配合設(shè)備的攝像頭進(jìn)行工作，而攝像頭是瀏覽器無法獲取的硬件資源，所以這款應(yīng)用不能以Web App的形式存在;類似的功能還包括影像音頻的錄制傳輸、后臺(tái)運(yùn)行、消息推送等。如果該產(chǎn)品確實(shí)必須基于這些功能才能被正常使用，那么原生客戶端應(yīng)用便是不二之選。
2. 該產(chǎn)品的用戶是誰?
如果產(chǎn)品擁有大規(guī)模的公眾用戶群，那么原生或Web應(yīng)用的方式都是可選的，前者可以通過平臺(tái)官方的App Store或應(yīng)用市場進(jìn)行推廣，后者的跨平臺(tái)性更好。如果產(chǎn)品屬于公司或組織內(nèi)部使用的管理信息系統(tǒng)等類型，那么Ad hoc、類似Apperian這樣的第三方App Store或Web App都是可選的。
3. 該應(yīng)用在系統(tǒng)資源消耗等方面的敏感度如何?
很多方面的因素會(huì)使移動(dòng)設(shè)備瀏覽器占用過多的內(nèi)存資源，從而影響Web App的執(zhí)行效率及用戶體驗(yàn)。這些因素包括半透明視覺效果及動(dòng)畫效果、大量的內(nèi)容數(shù)據(jù)、文件加密和解碼、基于地圖的復(fù)雜交互方式等。
回答了這三個(gè)問題之后，對解決方案的選擇便容易多了。舉例說，比如我收到的需求是為企業(yè)員工設(shè)計(jì)開發(fā)一款B2E應(yīng)用，用來管理他們的個(gè)人信息及收益情況，并且不需要使用移動(dòng)設(shè)備提供的高級(jí)硬件功能，那么Web App的方式是最恰當(dāng)?shù)倪x擇。另外一方面，如果需求是開發(fā)一款面向大眾的虛擬地圖應(yīng)用，并需要配合手機(jī)的陀螺儀功能才可以工作，那么我們必須選擇本地客戶端的方式進(jìn)行開發(fā)。
不過，正如我們之前提到的，在這兩者之間，還有另外一種混血方案可以去考慮，也就是混合型客戶端應(yīng)用。
#p#
原生客戶端應(yīng)用(Native App)與混合型客戶端應(yīng)用(Hybrid App)
所謂混合型應(yīng)用，就是在原生客戶端中嵌入基于前端技術(shù)構(gòu)建的頁面視圖;這種方式其實(shí)已經(jīng)很常見了。本質(zhì)上講，頁面視圖就是HTML頁面，但它不需要另外調(diào)用移動(dòng)設(shè)備中的瀏覽器進(jìn)行查看和操作。
混合型應(yīng)用的典型實(shí)例其實(shí)是我們非常熟悉的：iPhone、iPad等iOS設(shè)備的本地App Store或iTunes，以及Twitter和Facebook的客戶端等。
在混合型應(yīng)用中，原生的部分其實(shí)只相當(dāng)于一個(gè)架子或容器，應(yīng)用的核心是基于HTML、CSS、JavaScrit或前端框架打造的頁面視圖。頁面的靜態(tài)文件資源可以存儲(chǔ)在服務(wù)器端，動(dòng)態(tài)數(shù)據(jù)通過Ajax的方式在頁面視圖與移動(dòng)應(yīng)用中傳輸。
所以，雖然從技術(shù)上講，混合型應(yīng)用是設(shè)備本地化的，但它們顯然擁有兩種不同的運(yùn)作方式。下面是兩個(gè)很常見的問題，在需求評估時(shí)經(jīng)常會(huì)遇到。
Q：如果我有技術(shù)及資源去開發(fā)一套純粹的原生客戶端應(yīng)用，那么有什么必要使用HTML等Web前端開發(fā)方式去打造混合型應(yīng)用呢?
A：混合性應(yīng)用的解決方案最主要的目的是解決跨平臺(tái)的問題;對于每個(gè)平臺(tái)，只需開發(fā)和維護(hù)“容器”性質(zhì)的本地應(yīng)用部分，而實(shí)際的內(nèi)容功能則可以統(tǒng)一由一套頁面視圖來擔(dān)當(dāng)。
Q：那么干脆只做一套Web App好了，為什么還要使用原生客戶端作為容器呢?
A：這個(gè)問題的答案包括兩方面：
商業(yè)需求：對于很多客戶案例來說，將應(yīng)用通過App Store或Market推廣出去，是一種商業(yè)方面的需求。比如，客戶也許會(huì)希望自己的產(chǎn)品是付費(fèi)應(yīng)用，或者開發(fā)前的用戶研究表明他們的用戶多數(shù)是通過App Store安裝本地客戶端的。
硬件功能需求：混合型應(yīng)用的一個(gè)優(yōu)勢在于，雖然本地化的框架只是作為頁面視圖的容器，但它畢竟是本地化的，在需要的時(shí)候，仍可提供訪問硬件設(shè)備及相關(guān)功能的權(quán)限;這是單一的Web App所無法做到的。技術(shù)方面，可以通過JavaScript經(jīng)由本地應(yīng)用框架，與硬件功能進(jìn)行通訊，例如控制攝像頭等。
我確信，通過這種需求梳理，多數(shù)人會(huì)傾向于混合型應(yīng)用的方式。其實(shí)這也正是本文接下來的主線——我們一起來看看有哪些前端開發(fā)工具是可以幫助我們進(jìn)行混合型應(yīng)用的開發(fā)的。我將它們分為四大類，接下來會(huì)分別進(jìn)行介紹，并對它們的適用情況進(jìn)行簡單的對比。
跨平臺(tái)的前端開發(fā)工具
這是***大類，主要包括一些在傳統(tǒng)Web前端開發(fā)方面比較常見的JS框架。它們在混合型應(yīng)用的頁面視圖中可以起到同樣重要的作用。
jQuery顯然是最有群眾基礎(chǔ)的JS庫之一，為各種常見的JS功能需求提供了統(tǒng)一的API，包括DOM操作、Ajax、事件綁定等。它通過了A、B、C全部三個(gè)級(jí)別瀏覽器(包括桌面與移動(dòng)版本)的嚴(yán)格測試，擁有龐大的開發(fā)者社區(qū)以及優(yōu)質(zhì)的文檔資源，并且是完全開源的。
凡事有利必有弊，jQuery在瀏覽器方面的優(yōu)異表現(xiàn)，一定程度上取決于它包含了大量用于修正桌面瀏覽器兼容性問題的代碼;對于移動(dòng)應(yīng)用方面的開發(fā)來說，這方面的代碼是沒什么意義的。這讓jQuery看起來有些重了。
對我個(gè)人來說，如果需要開發(fā)一個(gè)傳統(tǒng)的、主要用于桌面設(shè)備瀏覽的網(wǎng)站，那么jQuery會(huì)是我的主要選擇。但是對于網(wǎng)站移動(dòng)化方面的項(xiàng)目或是混合型應(yīng)用的開發(fā)，我不會(huì)選擇它。
51CTO推薦專題：jQuery從入門到精通
Zepto（http://zeptojs.com/）
在移動(dòng)化開發(fā)方面，作為一款更輕量的框架，Zepto是jQuery的一個(gè)不錯(cuò)的替代品。Zepto并沒有被聲明可以兼容舊瀏覽器，包括IE6等，同時(shí)，它在功能方面卻幾乎可以與jQuery媲美。如果你習(xí)慣于使用jQuery，那么你完全可以通過Zepto進(jìn)行網(wǎng)站移動(dòng)化或是混合型應(yīng)用的開發(fā)。
XUI（http://xuijs.com/）
作為一款輕量級(jí)JavaScript框架，XUI是特別為移動(dòng)版本的瀏覽器打造的。XUI的側(cè)重點(diǎn)是移動(dòng)瀏覽器中最常見的功能需求，以最少的代碼量實(shí)現(xiàn)最基本的功能。語法方面也很簡單，不過與jQuery的風(fēng)格有所區(qū)別，需要加以習(xí)慣。
Lawnchair（http://westcoastlogic.com/lawnchair）
Lawnchair也是一款輕量級(jí)JS庫，它***的特色是，可以將客戶端抽象為持久化的“無SQL”風(fēng)格的數(shù)據(jù)存儲(chǔ)空間。它采用適配器模式，支持多重回調(diào)機(jī)制。語法風(fēng)格非常簡單直白，支持簡單的query查詢。
在開發(fā)混合型應(yīng)用或傳統(tǒng)網(wǎng)站時(shí)，出于客戶端持久化存儲(chǔ)功能的需求，或是性能等方面的考慮，我會(huì)選擇Lawnchair作為框架。
其他
可以輔助移動(dòng)應(yīng)用開發(fā)的JS框架還有不少，并且會(huì)時(shí)不時(shí)的冒出一些新的。值得一提的還有now.js、backbone.js和underscore.js等。
#p#
專門用于打造移動(dòng)客戶端的JavaScript UI 框架
某種程度上說，jQuery Mobile就相當(dāng)于移動(dòng)應(yīng)用版本的jQuery UI;它是一個(gè)掛件庫，用來將語義化的HTML標(biāo)記語言轉(zhuǎn)化成無論UI樣式還是交互行為都更貼近移動(dòng)設(shè)備原生風(fēng)格的模式。
繼承了jQuery的優(yōu)點(diǎn)，jQuery Mobile對A、B、C三個(gè)等級(jí)的移動(dòng)瀏覽器保持了全面兼容。它推出的時(shí)間不長，但目標(biāo)很明確——為盡量多的移動(dòng)瀏覽器打造用戶體驗(yàn)最棒的移動(dòng)應(yīng)用。雖然略重了些，但jQuery Mobile絕對是打造移動(dòng)應(yīng)用的***框架之一。
51CTO推薦專題：jQuery Mobile基礎(chǔ)入門教程
與jQuery Mobile類似，jQTouch同樣是一款將語義化HTML標(biāo)記轉(zhuǎn)化為移動(dòng)設(shè)備原生風(fēng)格頁面視圖的掛件庫。這兩者之間的區(qū)別是，jQTouch是特別為A級(jí)WebKit內(nèi)核的移動(dòng)瀏覽器打造的。這意味著jQTouch可以使用WebKit內(nèi)核瀏覽器的專有功能渲染頁面，相比于JM，所需的代碼更少。所以，當(dāng)我手頭項(xiàng)目的目標(biāo)用戶多數(shù)為WebKit內(nèi)核瀏覽器使用者的時(shí)候，我會(huì)選擇jQTouch進(jìn)行開發(fā)。
很快，jQTouch將支持Zepto，屆時(shí)，jQuery就不再是打造頁面視圖本身功能的唯一選項(xiàng)了。這個(gè)改變將會(huì)有效的減小文件尺寸，降低運(yùn)算處理時(shí)的系統(tǒng)資源開銷。
Sencha Touch是一個(gè)基于ExtJS的全功能掛件庫。與jQTouch相同，Sencha Touch也是面向A級(jí)WebKit內(nèi)核的移動(dòng)瀏覽器的。基于ST打造的移動(dòng)應(yīng)用具有很強(qiáng)的健壯性，在UI方面的自適應(yīng)性也很出色，例如，在平板電腦中，頁面視圖會(huì)切換至大屏幕規(guī)格，包括結(jié)構(gòu)和元素的布局等。
與jQuery Mobile或jQTouch不同的是，Sencha Touch不是基于HTML標(biāo)記語言的，開發(fā)者必須采用客戶端MVC風(fēng)格直接書寫JS代碼，所以學(xué)習(xí)曲線略微陡峭。
Sencha Touch比較適合開發(fā)那些主要運(yùn)行在WebKit內(nèi)核移動(dòng)瀏覽器里的中到大型的Web應(yīng)用。
SproutCore同樣是一款開源JS框架，最初的目的是幫助Web開發(fā)人員創(chuàng)建運(yùn)行在桌面瀏覽器中的Web應(yīng)用。實(shí)際上，它的功能太強(qiáng)大了，以至于蘋果公司使用它來構(gòu)建了最初版本的MobileMe.
不過，源于它桌面應(yīng)用的初始需求，SproutCore在尺寸方面對于真正的移動(dòng)化解決方案來說還是略大了些，至少我***一次用到它的時(shí)候是這樣的情況。
#p#
跨平臺(tái)的本地應(yīng)用開發(fā)工具
PhoneGap可以將基于標(biāo)準(zhǔn)HTML、CSS和JS打造的頁面視圖封裝為本地客戶端應(yīng)用，目前支持10種移動(dòng)平臺(tái)。在數(shù)據(jù)資源傳輸方面，可以采用普通Web App所使用的Ajax等方式。PhoneGap在頁面視圖與本地應(yīng)用之間提供了一個(gè)橋梁，允許開發(fā)者通過JavaScript訪問并使用移動(dòng)設(shè)備的硬件功能，比如攝像頭、聯(lián)系人信息、麥克風(fēng)等;這是單純依靠移動(dòng)瀏覽器運(yùn)行的Web App類應(yīng)用所無法實(shí)現(xiàn)的。
PhoneGap不屬于掛件庫，它也不會(huì)將HTML編譯為原生客戶端代碼。通過PhoneGap封裝的移動(dòng)應(yīng)用，只能在運(yùn)行的過程中即時(shí)執(zhí)行JavaScript，所以它無法像前面介紹的幾種JS UI框架那樣提供一套完整的移動(dòng)化UI方案。但是PhoneGap的側(cè)重點(diǎn)很顯然是在本地化封裝這方面;我開發(fā)過的每一個(gè)混合型應(yīng)用都會(huì)用到PhoneGap。
Titanium Mobile（http://www.appcelerator.com/products/titanium-mobile-application-development/）
Titanium Mobile可以直接將JavaScript編譯為iOS或Android平臺(tái)的本地應(yīng)用代碼。開發(fā)者們經(jīng)常將它與PhoneGap做比較，其實(shí)它們的機(jī)制是截然不同的。在Titanium中，開發(fā)者需要按照它規(guī)定的語法書寫應(yīng)用代碼，而無法使用原生JS;從這個(gè)角度講，Titanium與前面提到的的Sencha Touch類似。對于資深JS開發(fā)者來說，這種方式不會(huì)帶來很大困難，而新手則需要學(xué)習(xí)和適應(yīng)。
Corona是一款商業(yè)SDK，使用Lua構(gòu)建。開發(fā)者可以通過Corona為iOS和Android兩大平臺(tái)開發(fā)原生UI效果真實(shí)飽滿的移動(dòng)應(yīng)用。它擁有一個(gè)完整的圖形和動(dòng)畫庫，渲染引擎可以充分利用GPU的功能。這讓Corana非常適合移動(dòng)游戲的開發(fā)，不過它在普通移動(dòng)應(yīng)用開發(fā)方面的表現(xiàn)同樣不錯(cuò)。
企業(yè)級(jí)移動(dòng)應(yīng)用開發(fā)平臺(tái)(Mobile Enterprise Application Platforms,MEAPs )
MEAP一種整合性的開發(fā)平臺(tái)，通過一個(gè)后臺(tái)，對跨平臺(tái)移動(dòng)應(yīng)用的開發(fā)項(xiàng)目進(jìn)行全周期的管理;涉及到的細(xì)節(jié)已經(jīng)超出本文范圍。之所以把這類放進(jìn)來，是因?yàn)槠渲蠷hoMobile曾經(jīng)被視為PhoneGap的競爭對手，但實(shí)際上它們根本不是一回事。典型的MEAPs平臺(tái)有：
Antenna Softwware
Pyxis Mobile
RhoMobile
Sybase Unwired Platform(SUP)
總結(jié)
我個(gè)人從不會(huì)將Web應(yīng)用與本地原生應(yīng)用看作非此即彼的兩個(gè)獨(dú)立命題，它們更像是一個(gè)范圍的兩個(gè)極值。很多時(shí)候，要考慮的不是選擇哪種方式的問題，而是要根據(jù)需求，評估基于HTML、CSS和JS打造的Web App頁面視圖部分與原生應(yīng)用的比例問題。
使用前文提到的一些方法對需求進(jìn)行評估，確認(rèn)可以使用混合型應(yīng)用的模式開發(fā)產(chǎn)品項(xiàng)目，接下來，我建議將目標(biāo)放在對頁面視圖部分的比例控制上。根據(jù)產(chǎn)品的具體需求和設(shè)計(jì)情況，在保證不會(huì)對用戶體驗(yàn)等方面起到負(fù)面影響的前提下，可以盡量多的使用基于HTML的前端頁面視圖，以增大跨平臺(tái)功能的比例。你需要擔(dān)心的跨平臺(tái)方面的問題越少，用來打造優(yōu)秀產(chǎn)品的精力及資源就相對越多。
原文：http://beforweb.com/node/22
【編輯推薦】
