HTML5移動應用開發的生態環境簡介

我本人是HTML5的大粉絲，因為它可以給我帶來滿足我創造力的開發速度。

但自從移動平台崛起以來，這項技術所涉及的開發就開始變得復雜起來。在桌面平台看來，一切都非常清楚。網站開發就是一場不斷持續的進化，即便如此還 是有人對其了如指掌。但是在移動平台這就是場噩夢。開發者們被各種開發HTML5移動應用的方法搞得暈頭轉向，所以我希望這個指南可以幫助他們。

正如我在前一篇文章中提到過，如果想要實現一個移動應用的話，你首先得是一個web開發者。

在開始給大家介紹現有的不同平台和框架之前，我必須聲明我並不認為Titanium Mobile是一個HTML5解決方案。如果想要知道為什麼請參閱我的前一篇文章。

目前有四個解決方案（其他新的解決方案也在不斷出現，但都還處於初期狀態）可以用於開發HTML5移動應用。

HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm

Web App

這是最直白的方法。簡單來說，就是一個通過浏覽器訪問的網站。Android和iOS都提供將網站鏈接添加到桌面的功能。這樣的應用通過恰當的配置可以以全屏狀態運行，並且配合Appcache可以實現離線運行。

更新：Daniel Appelquist提醒大家在Firefox OS，Android上的Firefox以及今後的Chrome都會為用戶提供將web app添加到移動設備的功能。前提是你需要為你的web app聲明一個配置清單。嗯，挺好。

對我來說，這並不是一個可靠的方案：

• 首先，Appcache這東西實在是太惡心了：http://alistapart.com/article/application-cache-is-a-douchebag

• ServiceWorker，這是一個Appcache的替代方案，雖然目前無法使用但是他的技術規格非常酷炫：https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md

• 目前HTML5 API在iOS以及Android 4.x之前版本的支持情況非常之不可靠。

• 不支持推送消息（Firefox OS支持）

• 無法與原生SDK交互（Firefox OS要做得稍微好些）

利用Phonegap / Cordova 集成開發平台

這個是目前來講，最有效的妥協方案。現在已經有一整套相關生態系統包括工具，論壇，開發者。你能通過它來利用HTML5的API以及原生API。到最後，你得到的會是一個真正的APP。此平台也遵從HTML5規范以協助web應用的轉化。

手工接入本地環境

這個方案針對的是那些規模較大並對設備原生代碼頗具了解的團隊。很多大公司就采用的這種方式。它可以將高性能的原生UI組件與高靈活性的HTML搭配使用。

如果你感興趣的話，你可以看看這些鏈接：

• guide/webapps/webview.html

• https://github.com/marcuswestin/WebViewJavascriptBridge

• AppleApplications/Conceptual/SafariJSProgTopics/Tasks/ObjCFromJavaScript.html

• true-javascript-uiwebview-integration-in-ios7

使用Intel XDK基礎開發環境

說實話我不能給這個方案一個准確的評價。在我第一次安裝這個編輯器後，它的復雜程度讓我驚呆了，所以我也沒有動力再去研究它。就我所了解的，它和 Phonegap應該遵從的同樣的精神不過他們專門打造了一個完整的IDE。我並不確切地知道具體地差別在哪。如果哪位在Intel工作的老兄讀到這篇文 章，麻煩你給我提供一下更多相關細節好吧？

原生HTML

這個是完美的解決方案。操作系統直接執行HTML5代碼而不是通過橋接的方式鏈接HTML和原生代碼。你能使用所有的API，debug工具也能完美的使用。而實際上，目前只有Firefox OS和Tizen擁有這樣的系統。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

現在你知道了這些不同的方案，我們可以擺一擺移動HTML5應用的八卦。當喬布斯在第一代iPhone發布會上宣布有移動HTML5之後，其相關開發就開始了。Safari和Firefox在當時是最好的HTML5浏覽器（Google Chrome那時還沒出來）。

但是一年之後，應用商店上線了，但是只能用Objective－C開發應用。該死的喬布斯。

之後沒過多久，一幫開發者就創造了Phonegap。我還記得當時他們拿一個wiki當主頁。它當時bug無數，雖然的確是個天才的想法。但問題是與此同時開發者們也紛紛開始制作移動HTML5應用。所以許多人被它搞得很惱火然後到處說它壞話。

自那以後，又發生了很多事情：智能手機的CPU越來越強大，CSS渲染可以通過GPU完成，HTML5的規范更加精准，浏覽器引擎更加強大。

前端開發也同樣有了很大的改進。我們的JS代碼不再是一個巨大的$(document).ready函數。我們開始使用更加標准化的框架（AngularJS, BackboneJS, EmberJS, Polymer, ReactJS）而且我們的debug工具也不再弱於那些原生debug工具。我們也開始使用構建系統，包管理器，以及代碼風格。

HTML5移動開發自2009年以後就完全變樣了。

所以到最後，HTML5的問題是什麼？就是UI。

有些讀者已經知道，我真的很討厭jQuery Mobile，然而很不幸的是，大多數開發者都用它來做移動開發。Bootstrap也沒法解決這個問題。它確實是響應式的但是並不是針對的移動平台。原生應用開發者用他們的原生組件來和HTML/CSS相比較，這明顯是很不公平的。

原生平台提供很多“拖來就用”的組件，而且是經過全面的測試，優化，並已經包含了性能優勢。iOS提供的原生長列表組件會自動隱藏那些看不到的元素，但是在HTML/CSS裡面並非如此。

Web UI是開發者心中永遠的痛因為Apple或Google從未提供過Web UI的框架。想像一下如果有種“Bootstrap”可以擁有所有原生組件的特性（性能，漸變，個性化等等）。他們本來可以做到，但這並不是他們優先考慮的。然而現在情況不同了。

Windows Metro

微軟是這方面第一讓我有深刻印象的。他們的Metro UI無論是在C++，C# 還是 HTML裡都有同樣的特性:

HTML5中的ListView的一個例子：

• http://msdn.microsoft.com/en-US/library/windows/apps/br211837.aspx

• http://code.msdn.microsoft.com/windowsapps/Universal-Windows-app-cb3248c3

Firefox OS

Firefox OS更加有意思。Mozilla自己同第三方開發者使用同一套CSS。說實話這真是最棒的想法了。你可以直接去GitHub進行貢獻：

• https://github.com/mozilla-b2g/gaia

• http://buildingfirefoxos.com/index.html

那麼Google呢？

Google是最後一個但也很不錯。他們采用了另一種方式。他們給我們帶來了AngularJS以及最新的Polymer。Polymer是是一個讓你可以輕易創建web組件的框架。

在他們完成開發web應用底層結構之後，他們開始專注於UI。現在的成果就是Material Design（譯注 這裡是相關介紹），他們的想法是創造完全響應式的設計，而並不是簡單的縮放元素大小，這樣可以使得應用在每個屏幕尺寸上看起來都很性感。他們使用Polymer來提供這些組件。

• http://www.polymer-project.org/components/paper-elements/demo.html#core-toolbar

• http://www.polymer-project.org/docs/start/tutorial/intro.html

同時現在還有其他的UI框架！

Ionic Framework

這個是個人最愛。其設計與iOS很相近，但不像某些人，它在Android上看起來也很棒（看什麼看我說的就是你jQuery Mobile）。他們帶有AngularJS的指令集，現裝現用，性能優化，自帶動畫，等等。簡而言之，這貨就是春哥���體。下拉刷新，側邊菜單，無限滑 滾，支持超長列表（沒錯，超過1000條元素），選項夾，等等。

這個截圖是我正在開發的一個應用

Drifty，這個開發了Ionic Framework的公司，正在同其他開發者一起研發Angular Material，一個類似於Polymer中Material Design的東西不過是基於AngularJS。

還有其他更多不錯選擇，不過目前還達不到Ionic那麼好。不過大家還是可以關注一下，我相信很快他們都會改進：

• Onsen UI

• Ratchet

• TopCoat

• HeartCSS

那麼Apple呢？我覺得他們還是更傾向於迫使人們用Swift或者Obj－C進行原生開發。萬幸的是，我之前提到的大多數框架都支持iOS。SB了吧，Tim！

我希望現在你對HTML5移動開發能夠有了更多的了解。這個指南還沒有完成，我只是想到哪寫到哪。如果你發現我有什麼地方寫的不對，請盡管給我留言或者通過你方便的方式聯系我：http://www.yrezgui.com

本文由 伯樂在線 - 劉忻沂 翻譯自 Yacine Rezgui。