HTML5 移動開發的叢林: 叢林指南

劉忻沂發表於2014-08-07
HTML移動開發

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

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

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

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

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

 

Web App

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

更新：Daniel Appelquist提醒大家在Firefox OS，Android上的Firefox以及今後的Chrome都會為使用者提供將web app新增到移動裝置的功能。前提是你需要為你的web app宣告一個配置清單。嗯，挺好。

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

 

Phonegap / Cordova

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

 

自主研發橋接

這個方案針對的是那些規模較大並對裝置原生程式碼頗具瞭解的團隊。很多大公司就採用的這種方式。它可以將高效能的原生UI元件與高靈活性的HTML搭配使用。

如果你感興趣的話，你可以看看這些連結：

 

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那麼好。不過大家還是可以關注一下，我相信很快他們都會改進：

 

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

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

 

 

相關文章