愉悅的周五，早些回到家，沖澡吃飯照顧貓咪家務(wù)完畢已然超過(guò)九點(diǎn)的樣子。登錄博客后臺(tái)，進(jìn)入編輯頁(yè)面，才覺(jué)得些許輕松安逸。不壞，一天里能有這么一會(huì)沉浸在這樣的感覺(jué)里，足夠了。

在之前的一篇文章中，我們?cè)��?jīng)討論過(guò)，對(duì)于交互和視覺(jué)設(shè)計(jì)相關(guān)職能的從業(yè)人員來(lái)說(shuō)，從傳統(tǒng)Web行業(yè)向移動(dòng)應(yīng)用領(lǐng)域轉(zhuǎn)型的過(guò)程中需要學(xué)習(xí)和注意的問(wèn)題。這篇文章中提到過(guò)“混合型應(yīng)用”的概念，以及與之相關(guān)的兩本開發(fā)指導(dǎo)書籍。今天這篇文章的英文原文，就是來(lái)自這兩本書的作者——移動(dòng)應(yīng)用開發(fā)者Jonathan Stark。

本文中，他將站在傳統(tǒng)Web前端開發(fā)人員的角度，為我們介紹一些在實(shí)際項(xiàng)目案例中總結(jié)出來(lái)的移動(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)。不多說(shuō)了，我們來(lái)看正文。

無(wú)論站在怎樣的角度去衡量，移動(dòng)互聯(lián)網(wǎng)及客戶端應(yīng)用的發(fā)展勢(shì)頭都是非常迅猛的。日均使用量、智能手機(jī)的普及率、來(lái)自移動(dòng)設(shè)備的訂閱量、搜索引擎流量、廣告呈現(xiàn)、應(yīng)用售賣……所有這些都處于迅速上升的狀態(tài)�？梢灶A(yù)計(jì)，在不久的將來(lái)，移動(dòng)設(shè)備將擁有足夠的成熟度與普及率，并躋身于傳統(tǒng)桌面電腦、筆記本等硬件平臺(tái)的行列，成為我們?nèi)粘Ｉ�活的主要設(shè)備。

巨大的移動(dòng)市場(chǎng)為傳統(tǒng)Web設(shè)計(jì)開發(fā)人員帶來(lái)了新的機(jī)遇與挑戰(zhàn)。各類移動(dòng)設(shè)備在爆發(fā)式增長(zhǎng)的同時(shí)，也帶來(lái)了前所未有的分裂與混亂的狀況。如果需要同時(shí)為多平臺(tái)設(shè)備進(jìn)行客戶端應(yīng)用的開發(fā)、測(cè)試和維護(hù)，勢(shì)必會(huì)消耗大量的資源與成本。

本文中，我們首先會(huì)對(duì)幾種移動(dòng)化解決方案進(jìn)行比較和分析，然后將重點(diǎn)放在一些常見的用于跨平臺(tái)移動(dòng)應(yīng)用開發(fā)的前端框架工具上；不過(guò)我不會(huì)在最后選出一個(gè)所謂的最優(yōu)方案——開發(fā)方式的選擇最終會(huì)取決于你的項(xiàng)目本身，包括業(yè)務(wù)模式、需求、目標(biāo)市場(chǎng)、開發(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)該。..另外一種情況則介于兩者之間，即通過(guò)HTML、CSS、Javascript等前端技術(shù)，結(jié)合移動(dòng)設(shè)備原生開發(fā)方式，打造所謂的混合型應(yīng)用。

看似廢話，但重點(diǎn)在于“能”或“不能”。這里我們主要指具體的項(xiàng)目需求，而非技術(shù)開發(fā)能力。我所在的團(tuán)隊(duì)，做過(guò)的多數(shù)案例，都來(lái)自于企業(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è)問(wèn)題進(jìn)行進(jìn)一步評(píng)估：

功能方面，是否涉及那些只有本地應(yīng)用才能利用的設(shè)備硬件資源？

比如，一款有條形碼掃描功能的應(yīng)用，必須配合設(shè)備的攝像頭進(jìn)行工作，而攝像頭是瀏覽器無(wú)法獲取的硬件資源，所以這款應(yīng)用不能以Web App的形式存在；類似的功能還包括影像音頻的錄制傳輸、后臺(tái)運(yùn)行、消息推送等。如果該產(chǎn)品確實(shí)必須基于這些功能才能被正常使用，那么原生客戶端應(yīng)用便是不二之選。

該產(chǎn)品的用戶是誰(shuí)？

如果產(chǎn)品擁有大規(guī)模的公眾用戶群，那么原生或Web應(yīng)用的方式都是可選的，前者可以通過(guò)平臺(tái)官方的App Store或應(yīng)用市場(chǎng)進(jìn)行推廣，后者的跨平臺(tái)性更好。如果產(chǎn)品屬于公司或組織內(nèi)部使用的管理信息系統(tǒng)等類型，那么Ad hoc、類似Apperian這樣的第三方App Store或Web App都是可選的。

該應(yīng)用在系統(tǒng)資源消耗等方面的敏感度如何？

很多方面的因素會(huì)使移動(dòng)設(shè)備瀏覽器占用過(guò)多的內(nèi)存資源，從而影響Web App的執(zhí)行效率及用戶體驗(yàn)。這些因素包括半透明視覺(jué)效果及動(dòng)畫效果、大量的內(nèi)容數(shù)據(jù)、文件加密和解碼、基于地圖的復(fù)雜交互方式等。

回答了這三個(gè)問(wèn)題之后，對(duì)解決方案的選擇便容易多了。舉例說(shuō)，比如我收到的需求是為企業(yè)員工設(shè)計(jì)開發(fā)一款B2E應(yīng)用，用來(lái)管理他們的個(gè)人信息及收益情況，并且不需要使用移動(dòng)設(shè)備提供的高級(jí)硬件功能，那么Web App的方式是最恰當(dāng)?shù)倪x擇。另外一方面，如果需求是開發(fā)一款面向大眾的虛擬地圖應(yīng)用，并需要配合手機(jī)的陀螺儀功能才可以工作，那么我們必須選擇本地客戶端的方式進(jìn)行開發(fā)。

不過(guò)，正如我們之前提到的，在這兩者之間，還有另外一種混血方案可以去考慮，也就是混合型客戶端應(yīng)用。 

原生客戶端應(yīng)用（Native App）與混合型客戶端應(yīng)用（Hybrid App）

所謂混合型應(yīng)用，就是在原生客戶端中嵌入基于前端技術(shù)構(gòu)建的頁(yè)面視圖；這種方式其實(shí)已經(jīng)很常見了。本質(zhì)上講，頁(yè)面視圖就是HTML頁(yè)面，但它不需要另外調(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或前端框架打造的頁(yè)面視圖。頁(yè)面的靜態(tài)文件資源可以存儲(chǔ)在服務(wù)器端，動(dòng)態(tài)數(shù)據(jù)通過(guò)Ajax的方式在頁(yè)面視圖與移動(dòng)應(yīng)用中傳輸。

所以，雖然從技術(shù)上講，混合型應(yīng)用是設(shè)備本地化的，但它們顯然擁有兩種不同的運(yùn)作方式。下面是兩個(gè)很常見的問(wèn)題，在需求評(píng)估時(shí)經(jīng)常會(huì)遇到。

Q：如果我有技術(shù)及資源去開發(fā)一套純粹的原生客戶端應(yīng)用，那么有什么必要使用HTML等Web前端開發(fā)方式去打造混合型應(yīng)用呢？

A：混合性應(yīng)用的解決方案最主要的目的是解決跨平臺(tái)的問(wèn)題；對(duì)于每個(gè)平臺(tái)，只需開發(fā)和維護(hù)“容器”性質(zhì)的本地應(yīng)用部分，而實(shí)際的內(nèi)容功能則可以統(tǒng)一由一套頁(yè)面視圖來(lái)?yè)?dān)當(dāng)。

Q：那么干脆只做一套Web App好了，為什么還要使用原生客戶端作為容器呢？

A：這個(gè)問(wèn)題的答案包括兩方面：

商業(yè)需求：對(duì)于很多客戶案例來(lái)說(shuō)，將應(yīng)用通過(guò)App Store或Market推廣出去，是一種商業(yè)方面的需求。比如，客戶也許會(huì)希望自己的產(chǎn)品是付費(fèi)應(yīng)用，或者開發(fā)前的用戶研究表明他們的用戶多數(shù)是通過(guò)App Store安裝本地客戶端的。

硬件功能需求：混合型應(yīng)用的一個(gè)優(yōu)勢(shì)在于，雖然本地化的框架只是作為頁(yè)面視圖的容器，但它畢竟是本地化的，在需要的時(shí)候，仍可提供訪問(wèn)硬件設(shè)備及相關(guān)功能的權(quán)限；這是單一的Web App所無(wú)法做到的。技術(shù)方面，可以通過(guò)JavaScript經(jīng)由本地應(yīng)用框架，與硬件功能進(jìn)行通訊，例如控制攝像頭等。

我確信，通過(guò)這種需求梳理，多數(shù)人會(huì)傾向于混合型應(yīng)用的方式。其實(shí)這也正是本文接下來(lái)的主線——我們一起來(lái)看看有哪些前端開發(fā)工具是可以幫助我們進(jìn)行混合型應(yīng)用的開發(fā)的。我將它們分為四大類，接下來(lái)會(huì)分別進(jìn)行介紹，并對(duì)它們的適用情況進(jìn)行簡(jiǎn)單的對(duì)比。

標(biāo)簽： JavaScript jQuery-Mobile jQTouch 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。