愉悅的周五，早些回到家，沖澡吃飯照顧貓咪家務完畢已然超過九點的樣子。登錄博客后臺，進入編輯頁面，才覺得些許輕松安逸。不壞，一天里能有這么一會沉浸在這樣的感覺里，足夠了。

在之前的一篇文章中，我們曾經討論過，對于交互和視覺設計相關職能的從業(yè)人員來說，從傳統Web行業(yè)向移動應用領域轉型的過程中需要學習和注意的問題。這篇文章中提到過“混合型應用”的概念，以及與之相關的兩本開發(fā)指導書籍。今天這篇文章的英文原文，就是來自這兩本書的作者——移動應用開發(fā)者Jonathan Stark。

本文中，他將站在傳統Web前端開發(fā)人員的角度，為我們介紹一些在實際項目案例中總結出來的移動應用開發(fā)方法策略，以及幾類具有代表性的用于打造跨平臺移動應用的前端開發(fā)工具。

各位前端開發(fā)相關職能的同行們，擴展視野、提升技能、隨“機”應變的時機已然成熟；衷心希望本文可以成為推動大家事業(yè)進步發(fā)展的一個催化點。不多說了，我們來看正文。

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

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

本文中，我們首先會對幾種移動化解決方案進行比較和分析，然后將重點放在一些常見的用于跨平臺移動應用開發(fā)的前端框架工具上；不過我不會在最后選出一個所謂的最優(yōu)方案——開發(fā)方式的選擇最終會取決于你的項目本身，包括業(yè)務模式、需求、目標市場、開發(fā)資源等多方面因素。本文的主要目標是提供一些有用的信息，幫助各位讀者在實際項目中選擇最合適的方法與工具。

Web應用（Web App）與原生客戶端應用（Native App）

關于這兩種移動化方案孰優(yōu)孰劣的辯論已然有不少了。

我相信，如果你能以Web應用的方式打造移動化產品，那么你確實應該這樣做；反之則不應該。..另外一種情況則介于兩者之間，即通過HTML、CSS、Javascript等前端技術，結合移動設備原生開發(fā)方式，打造所謂的混合型應用。

看似廢話，但重點在于“能”或“不能”。這里我們主要指具體的項目需求，而非技術開發(fā)能力。我所在的團隊，做過的多數案例，都來自于企業(yè)級的客戶。大公司，顧名思義，在人員、產品及服務等方面都具有相當的規(guī)模，他們所需要的移動化解決方案在跨平臺方面的需求都很高。

當接手一個新的企業(yè)級移動化項目時，我會將Web App作為默認的首選方式，同時結合以下三個問題進行進一步評估：

功能方面，是否涉及那些只有本地應用才能利用的設備硬件資源？

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

該產品的用戶是誰？

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

該應用在系統資源消耗等方面的敏感度如何？

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

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

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

原生客戶端應用（Native App）與混合型客戶端應用（Hybrid App）

所謂混合型應用，就是在原生客戶端中嵌入基于前端技術構建的頁面視圖；這種方式其實已經很常見了。本質上講，頁面視圖就是HTML頁面，但它不需要另外調用移動設備中的瀏覽器進行查看和操作。

混合型應用的典型實例其實是我們非常熟悉的：iPhone、iPad等iOS設備的本地App Store或iTunes，以及Twitter和Facebook的客戶端等。

在混合型應用中，原生的部分其實只相當于一個架子或容器，應用的核心是基于HTML、CSS、JavaScrit或前端框架打造的頁面視圖。頁面的靜態(tài)文件資源可以存儲在服務器端，動態(tài)數據通過Ajax的方式在頁面視圖與移動應用中傳輸。

所以，雖然從技術上講，混合型應用是設備本地化的，但它們顯然擁有兩種不同的運作方式。下面是兩個很常見的問題，在需求評估時經常會遇到。

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

A：混合性應用的解決方案最主要的目的是解決跨平臺的問題；對于每個平臺，只需開發(fā)和維護“容器”性質的本地應用部分，而實際的內容功能則可以統一由一套頁面視圖來擔當。

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

A：這個問題的答案包括兩方面：

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

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

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

標簽： JavaScript jQuery-Mobile jQTouch 

版權申明：本站文章部分自網絡，如有侵權，請聯系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯系。