最近專注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包裝成適合 Android 與 iPhone 等觸屏移動設備的 Javascript 庫，結合 jQuery Mobile 與 HTML5 ，可以很方便的開發出一款具有良好界面及用戶體驗的 Web App，在這個過程中我收獲良多，因此決定針對使用 jQuery Mobile 與 HTML5 開發 Web App 寫一個系列的文章。在開始之前，我首先簡述 Web App 與原生 App 各自的優缺點。

?

一. Web App 與原生 App 的優缺點

?

1.Web App

(1).優點

1.開發成本低，周期短， Web 開發者可以使用現成的工具及開發技術。
2.跨平臺，用戶只需要一個標準的移動瀏覽器。
3.維護方便，維護不干擾用戶使用，可實時修復 Bug。

?

(2).缺點

1.無法調用手機硬件，用戶體驗較原生 App 薄弱。
2.運行不夠原生 App 流暢。
3.需要網絡的支持（可依靠 HTML5 大大減少對網絡的依賴）。

?

2.原生 App

(1).優點

1.可以調用手機硬件提供的功能，具有出色的用戶體驗。
2.不依賴網絡。
3.開發者更易獲得盈利。

?

(2).缺點

1.需要移植到不同平臺時較為麻煩。
2.維護成本高。
3.開發周期長。
4.需要 App Store 或 Android Market 的確認，并且要與第三方分享盈利。

?

看了以上的優缺點，可以看出 Web App 具有很好的優勢，并且隨著移動設備硬件配置的逐年升級，Web App 的劣勢將會逐漸減弱，而優勢將更加明顯，雖然仍不能完全取代原生 App ， 但 Web App 隊伍將不斷壯大已經形成趨勢，因此作為 Web 開發者投入到 Web App 的開發中也是一種很好的選擇。當然原生 App 仍有其優勢，因此在本系列文章的最后， Kayo 會介紹一種方法將 Web App 轉換為原生的 App 。

?

二.使用 jQuery Mobile 與 HTML5 開發 Web App

既然 Web App 具有很多的優勢，那么應該如何使用 Web 開發技術開發出一款優秀的 Web App 呢？

?

首先我們必須知道，一款優秀的 Web App ，需要有良好的 UI 與用戶體驗（UE），雖然本質上作為一個站點，內容才是用戶需要的，但我們仍需要使用良好的 UI 與 UE 來作為內容與用戶的連接，因此我們引入 jQuery Mobile 來為 Web App 制作 UI 與交互。

?

有了 Web App 的界面，還需要數據的交互，這樣才能做出 App 。這里可以使用 PHP 等服務器腳本與 Mysql 等數據庫來為 Web App 提供數據驅動，但 Kayo 希望采用一種新的方法，也就是 HTML5 的方法，使用 HTML5 規范提供的 Web SQL Database —— 一個簡單強大的 Javascript 數據庫 API， 可以在本地數據庫中存儲數據（如內嵌在瀏覽器中的 SQLite ），另外還可以使用 HTML5 規范中的 Storage （本地儲存） 來儲存數據，這樣就可以減少 Web App 對于網絡的依賴，并且整個 Web App 都是使用前端的技術完成（很震撼吧！）。

?

最后不得不提的是 offline application cache （離線程序緩存），它也是 HTML5 的特性，允許用戶在無網絡連接的情況下運行 Web App，因此我們可以利用此特性制作支持離線使用的 Web App ，進一步減少 Web App 對于網絡的依賴。

?

三.響應式設計

響應式網頁設計由 Ethan Marcotte 提出，通俗點說，就是網站界面能夠兼容多種終端，而不是每種終端各自做一個界面。騰訊等大型網站都有針對不同的設備做出不同的界面，比如 3g 版，觸屏版，ipad……，這樣就會增加了很多重復的工作量，因此我們可以為網站漸進的設計一個界面，自動適應不同的設備，當然設備間的效果可以有所差 距。這里 Kayo 小插一段，Kayo 認為響應式設計的誕生，很大程度上歸功于移動互聯網的發展與移動設備硬件的提升，而移動互聯網的發展本身也依賴于移動設備硬件的提升，因此想不斷提升的 App ，還得先要硬件廠商給力。

?

言歸正傳，這里提到響應式設計的理念當然是希望在設計 Web App 時也應用到，而這些 jQuery Mobile 已經為開發者預先做好， jQuery Mobile 不但默認的 UI 樣式里已經按響應式設計做好，它還另外提供了一些為響應式設計而做的方法，日后會詳細介紹。

?

四.漸進式設計

Kayo 在之前介紹 jQuery Mobile 的文章 《jQuery Mobile 特性》 時已經提到過漸進式設計，下面引用文中的話：

?

“前端設計時通過漸進增強功能來設計一直也是 Kayo 的設計想法，因為不同的平臺，不同的設備有著不同的 Web 環境，因此對于一些出色的前端效果很難保證在每臺設備上都呈現相同的效果，因此與其為了在所有設備上做到一樣的效果而降低整體的前端樣式，不如對于好的設 備可以呈現更出色的效果，而基本的效果就兼容所有的設備。jQuery Mobile 的設計也是如此，核心的功能支持所有的設備，而較新的設備則可以獲得更為優秀的頁面效果。”

?

這里使用 jQuery Mobile 的目的非常明顯，也就是使到 Web App 能盡量兼容不同的設備并且在較為先進的設備中呈現更加出色的表現，而不要為了統一而犧牲優秀的設計。

?

五.作品

下面是利用上文提到的各種技術做出的成品—— Do.It ，一款 Web App 備忘，添加的事項默認會到“今天”這一欄，若今天的事情不完成，明天繼續添加，則會越來越多，所以今天的事情要今天完成噢！在觸摸設備上向右劃動事項則為 完成事項（電腦的話也可以按住鼠標劃動，不過不易成功）。另外用戶不需注冊可以直接使用，該 Web App 采用 Web SQL Database 存儲數據，數據存在設備本地，因此沒有注冊，登陸的麻煩，方便吧！還有其他功能歡迎體驗！

?

各位可以使用 webkit 內核的設備瀏覽下面的地址（PC 上的 Chrome， Safari ，以及 Android , iPhone/iPad 上的系統瀏覽器。）

http://kayosite.com/doit/

使用 jQuery Mobile 與 HTML5 開發 Web App (一) ——開發原則

?

原文由 Kayo Lee 發表，原文鏈接： http://kayosite.com/web-app-by-jquery-mobile-and-html5-principles.html