移動開發人員們，是時候使用HTML5了！

標籤：

Html5喊了好多年了，至今仍沒有被大規模的使用。依然記得2012年參加HTML5夢工廠（現在叫iWeb峰會）去了好多人，當時天真的以為，Html5真的開始流行起來了，於是就在會場賣書的地方買了本Html5的書來學。後來，大家知道的，Html5都是不溫不火，但是我卻沒有減少對其關注的熱情。

由於我一直做移動APP的開發，多終端同一套邏輯開發多次不說，同時開發人員還要和UI和產品多次溝通來實現，身為App開發人員，這裡面的苦，我有發言權。所以，特別希望看見一款跨平台的Framework能Cover住所有平台，真正能達到一次編寫，所有移動終端啟動並執行目的。中間接觸了Hbuilder（這個是在14年iWeb峰會上看見的）、AppCan、WeX5、ApiCloud等。僅限於瞭解沒有太深入，大致的結果如下表(對比結果都是本人實踐的觀點)：

從上面的總結來看，

Html5雖然沒有來，對各個廠商來說都在磨拳擦掌，場面可以說是已經戰火四起了。不過，對於開發人員的我們來說是一個利好，我喜歡。不過今日我要介紹的不是上面的架構，而是國外一個比較流行的架構叫Ionic，其實要說跨平台開發上面的幾個架構都能滿足，不過效能和體驗上的問題都是User Sensitive的，不得不考慮。這也是我推薦Ionic的原因，它專註體驗極度最佳化，貼近原生。按照官方的教程和資源Step By Step 很快我就搭建了一個TODO的App~~~體驗地址（安卓版）傳送門-點擊下載 

APP： 
 

好了，到此為止，下載體驗過這個APP的如果覺得 體驗上不夠好可以不用往下看了。因為往下面說的都是關於Ionic的知識嘍；如果您覺得體驗很贊，想研究的，我把源碼放在了github：前往ionic-todo APP 源碼。有需要的自己可以下載編譯，研究。

不好意思，說了那麼久才進入正題，這也算是史上最長的開場白了吧！

 什麼是Ionic，它適合做什嗎？

ionic是一個專註於開發與構建Hybird模式跨平台的HMTL5架構。Hybird模式的APP相當於擁有訪問本地裝置介面（例如訪問相機、檔案系統，感應器）能力的並且運行在一個瀏覽器外殼的一個微型網站。因此Hybird模式開發的APP有許多原生APP所沒有的優勢；特別是在跨平台支援、快速開發以及快速存取第三方代碼方面。 
ionic可以想象為處理讓APP擁有令人矚目的UI互動體驗以及漂亮的外觀的一個前端架構。有點類似於Bootstrap for native，不過ionic支援更廣泛和更貼近原生native mobile的組件。 
和響應式架構不同的是，ionic與生俱來擁有已經存在的網頁開發中所不存在的非常貼近於native mobile的樣式和UI 組件、布局。並且還提供了一些可選的並且強大的方法去構建基於已經存在的Html5開發架構。 
既然ionic是一個專註於體驗和運行效率的HTML5開發架構，它需要一些類似於Cordova或者PhoneGap的一些封裝器去作為一個原生APP運行。強烈推薦使用Cordova，ionic的一些工具都是基於Cordova的。

 Ionic的由來

開發ionic的團隊說，他們強烈的意識到HTML5將會一直運行在行動裝置上，就像HTML5已經運行在PC電腦上一樣。一旦電腦變的足夠強大並且瀏覽器技術變的足夠的先進，幾乎所有的人都將被迫花費時間去和瀏覽器打交道。開發人員已經開發了大量的Web網站和應用程式，近來由於移動領域開發技術的進步，手機、平板電腦目前也能運行這些Web應用程式了。 
使用Ionic Html5架構，能夠去構建基於nativie或者hybird app而非是用來開發移動網站的，因為目前市場上已經存在了大量的用來開發移動網站的開發工具。所以，Ionic app不是被設計用來運行在Chrome或者Safari，而是被設計運行在更低層次的被Cordova或者PhoneGap封裝過的瀏覽器核心中，例如IOS的UIWebView或者安卓的WebView。

 用Ionic開發Hybrid App

熟悉Web的開發人員將會發現Ionic的程式結構和Web開發比較類似。從核心上說，一個Ionic App只不過是一個網友運行在一個Native App的殼裡面。也就意味著，你可以用任何你熟悉的HTML、CSS、Javascript技術來是開發Ionic App。不同於網頁通過url連結來跳轉，使用Ionic是開發一個自容器（譯者註：可以理解為單頁應用程式，跳轉是基於錨點的）的App的體驗。 
開發基於Ionic架構的APP需要使用HTML、CSS、Javascript，一些著急的開發人員可能要深入到native層面去研究Corvoda外掛程式或者Native代碼，這對於開發一個偉大App是沒有必要的（譯者註：也可以去折騰）。

 ionic效能

ionic效能比較好，體驗很贊，這也是我寫這篇文章的去推薦使用的目的。具體如何，看官們可以使用OneAPM的效能監控工具來（監控WebView功能）測試下，下面是一個監控百度首頁載入的頁面， 

Ionic是構建Hybird App的一個相對較新的架構，版本剛從bate版本到1.0版本，其中1.0版本的修正版有好多個才推出正式版，可見已經足夠穩定了。並且在github上被標星過17766次，fork過2386次了，足見其受歡迎程度。是時候擁抱H5了！

 原文連結：http://www.gbtags.com/gb/share/5737.htm

移動開發人員們，是時候使用HTML5了！