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

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

因爲我一直作移動APP的開發，多終端同一套邏輯開發屢次不說，同時開發人員還要和UI和產品屢次溝通來實現，身爲App開發者，這裏面的苦，我有發言權。因此，特別但願看見一款跨平臺的Framework能Cover住全部平臺，真正能達到一次編寫，全部移動終端運行的目的。中間接觸了Hbuilder（這個是在14年iWeb峯會上看見的）、AppCan、WeX五、ApiCloud等。僅限於瞭解沒有太深刻，大體的結果以下表(對比結果都是本人實踐的觀點)：

<table class="confluenceTable tablesorter"><thead><tr class="sortableHeader"><th class="confluenceTh sortableHeader tablesorter-headerSortDown" data-column="0"><div class="tablesorter-header-inner">框架名稱</div></th><th class="confluenceTh sortableHeader" data-column="1"><div class="tablesorter-header-inner">優勢</div></th><th class="confluenceTh sortableHeader" data-column="2"><div class="tablesorter-header-inner">缺點</div></th></tr></thead><tbody class=""><tr><td colspan="1" class="confluenceTd">ApiCloud</td><td colspan="1" class="confluenceTd"><p>號稱從新定義移動開發有本身的BAAS服務，直接後臺編輯數據庫表，直接生</p><p>產了對應REST API，爽史無前例。有本身的Store，裏面有一些第三方組件，</p><p>可使用。</p></td><td colspan="1" class="confluenceTd"><p>產品上爲了和Baas結合有端API，服務端Api，得折</p><p>騰下才能跑起來，要學的東西稍多。對於沒有Server</p><p>開發經驗的人來講能夠只看端Api。</p></td></tr><tr><td class="confluenceTd">AppCan</td><td class="confluenceTd"><p>應該是本身研發的移動App跨平臺開發引擎，應該對本身比較有信心，目前已</p><p>經開源，贊！對於喜歡折騰的人來講是一個福音。有商業案例，我下載了一個</p><p>吉祥航空如E行的案例運行了下，基本能知足需求。沒仔細往下研究了。</p></td><td class="confluenceTd"><p>從吉祥航空如E行 (2.0.3)這個APP來看，體驗上還</p><p>有待增強，值得開發者試一下。</p></td></tr><tr><td class="confluenceTd">Hbuilder</td><td class="confluenceTd"><p>使用html5plus來彌補原生Webview性能不足的問題；而且很好解決了如何</p><p>和Native通訊的問題，在Js中能夠實例化Native的組件等等。Demo運行起來</p><p>也比較流暢。是這四個裏面體驗最好的吧！有本身的Hbuilder編輯器好用。</p></td><td class="confluenceTd"><p>文檔、教程不是很完善。本身雖然有一個UI框架</p><p>可是對我這樣的菜鳥來講上手仍是一個問題。最終</p><p>作了一個簡單的APP以後，接觸的比較少了。</p></td></tr><tr><td class="confluenceTd">WeX5</td><td class="confluenceTd"><p>號稱真正的全平臺，微信、安卓、IOS 網站，真正的一次開發處處運行啊。由</p><p>於文檔教程不是很順暢，沒有深刻研究。</p></td><td class="confluenceTd">文檔不是不少，上手須要花點時間。</td></tr></tbody></table>

從上面的總結來看，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了！

ionic介紹部分參考：The Ionic Book第一章

本文系OneAPM工程師原創文章。OneAPM是中國基礎軟件領域的新興領軍企業，能幫助企業用戶和開發者輕鬆實現：緩慢的程序代碼和SQL語句的實時抓取。想閱讀更多技術文章，請訪問OneAPM官方技術博客。