綜述-如何克服HTML5的「性工能」障礙

http://ask.dcloud.net.cn/docs

 

HTML5自出現以來，幾經風雨，雖看似頗有前途，但實際使用問題太多，DCloud爲此踩了無數坑。但咱們從未放棄，咱們加入了W3C，發起了 HTML5中國產業聯盟，推出了HBuilder、HTML5plus runtime、mui框架等產品，直到咱們終於可使用HTML5開發出原生體驗的App，而且把這些技術公開給開發者。

HTML5過去被稱爲有「性工能」障礙，即性能不如原生，工具不如原生、功能不如原生。

咱們先說工具，而後說能力，再說性能。

 

工具 - HBuilder

原由

HTML最開始其實不是一個編程語言，確實用不着什麼ide。
可是發展到如今，7w多個語法，js愈來愈龐大，真開發一個達到原生水準的App，不是用之前的文本編輯器能搞定的。
目前居然沒有一個開發工具能把7w多HTML5語法提示齊全，這不科學，在原生開發裏這是不可想象的，xcode之於iOS，eclipse之於Android，vs之於winphone，在語法提示、轉到定義、重構、調試等方面都很是高效。
做爲同時熟悉原生和HTML5開發的咱們，咱們在開發HTML5時明顯感覺到效率低下。

強大的語法提示

咱們花費了很大心血建成了最全的HTML5及瀏覽器擴展前綴語法庫，咱們也開發了強大的語法解析引擎，而後推出了開發工具HBuilder，使得開發者能夠準確、高效的編寫HTML5代碼。
過去人們懷疑，中國人能作開發工具嗎？AST語法樹是很難掌握的，尤爲是js這種動態語言。如今不用懷疑了，HBuilder的語法提示比不少國外IDE還要好，並且還全免費。

最快的開發工具

因爲咱們的極客特質，HBuilder同時被咱們打形成了最快的前端開發工具，代碼輸入法的創新、代碼塊的優化、emmet的集成、快捷鍵語法設計、無鼠標操做。。。這些可能低端程序員不感興趣，但咱們樂於其中。HBuilder有句口號：爲極客、爲懶人、爲你。

環保健康的主題設計

因爲咱們每天面對屏幕眼睛很受傷，因此設計了綠柔主題以保護開發者的視力健康。

App開發及部署

當 然移動App開發也是HBuilder的優點，Run in device真機調試、打包發行這些功能並不是普通的HTML4開發工具會涉及的。咱們認爲，若是隻是作個網站，HTML4就夠了，搞HTML5而不作 App，太糟蹋這個技術了。以及雲打包還能使得沒有mac電腦的程序員能夠開發iOS應用。

能力 - HTML5plus Runtime

說完性工能裏的工具，再說說能力。
HTML5plus Runtime，簡稱5+ Runtime，是運行於手機端的強化web引擎，除了支持標準HTML5外，還支持更多擴展的js api，使得js的能力不輸於原生。5+ Runtime內置於HBuilder，在真機運行、打包時自動掛載。
業內以前有phonegap/Cordova方案，可是他們自帶js api太少了，擴展api須要用原生語言開發，更致命的是這類方案的性能不足。

5+ Runtime分3個層次解決了HTML5與原生的能力差距。

經常使用的API – HTML5plus

封裝成跨平臺的HTML5plus規範，並將規範公開於www.HTML5plus.org，不作廠商私有API。
包括二維碼、搖一搖、語音輸入、地圖、支付、分享、文件系統、通信錄等經常使用API，能夠方便簡單的編寫，而且可跨平臺。

其餘原生API – Native.js

原生API在iOS和Android上各自有40多萬，有些API並不經常使用，並且不具備跨平臺特性，好比ios的game center api。太多的API封裝到HTML5plus裏，會過多增長runtime的體積，但如有需求要使用這些api又很麻煩。
咱們有一項突破性的技術來解決上述煩惱—Native.js，一種把40w原生API映射爲JS API的技術。
若是說node.js把js的戰火燒到了服務器端，那麼Native.js把js戰火燒到了原生應用戰場。但咱們可使用js直接調原生API，語法是js語法，API命名是原生命名。
好比var obj = plus.android.import( "android.os.Bundle" ); 而後obj.xxx，這個xxx屬性就徹底是原生對象的屬性命名。
對於JSer，他一下就有40w API能夠用，瞬間感受無所不能:)
Native.js的教程詳見：http://ask.dcloud.net.cn/article/88

更多原生SDK插件引入 – 5+ Runtime插件

假使有一些原生的三方SDK想引入到5+ Runtime，好比身份證掃描SDK，能夠經過5+ Runtime的插件機制進行擴展。或者5+ Runtime預置的地圖是百度地圖，開發者想換成高德地圖，也是相似的作法。
以及咱們也支持5+ SDK，把5+ runtime做爲一個SDK放入到其餘原生App中，用5+ SDK替代webview能夠獲得更強大的功能和性能。
iOS插件開發教程詳見：http://ask.dcloud.net.cn/article/67
Android插件開發教程詳見：http://ask.dcloud.net.cn/article/66
經過HTML5plus規範、Native.js技術以及原生插件，這3種機制使得5+ Runtime擁有徹底不輸於原生App的能力。

性能 - HTML5plus runtime和mui框架

性工能裏最後是重頭戲是性能。在低端Android手機上，過去的HTML5沒法商用，切頁白屏、轉場卡頓、下拉刷新不流暢、側滑菜單不流暢。。。衆多問題逼迫開發者只能使用原生技術來作應用。
HTML5 App的性能低下，有webview自身的性能問題，也有前端框架的性能問題。

Webview性能問題：

Webview性能低主要體如今動畫效果不流暢，以前舉例的轉場動畫、下拉回彈動畫、側滑動畫均是此類。別忘了咱們有強大的HTML5plus，既然js和css的動畫不行，咱們就調用原生API換成原生動畫。咱們設計了不少原生動畫，來解決以前的各類動畫不流暢問題。
5+ Runtime還支持預載技術，以加快頁面的加載速度，減小白屏和用戶等待。事實上原生語言均可以本身開發預載，但HTML5標準API不足以完成此任務，咱們提供單獨的preload API。同時咱們支持對內存佔用的管理，協助開發者在低端手機上優化性能。

前端框架問題：

由 於HTML5的默認控件沒法直視，咱們只能用css把按鈕、輸入框修飾成原生樣式，以及HTML5的控件比原生控件少不少，好比list、tab、 menu、waiting等常見控件，以往都要寫不少div和css拼裝。這引起了一個前端框架存在的市場。但目前的前端框架性能都很是低，在低端手機上 很難達到商用要求，更不用提pk原生效果。
Jquery mobile比較知名，但有3個硬傷：1. 體積高達500k；2. data-的寫法雖然寫起來簡單，但在運行時須要js去解析HTML5標籤並替換爲新的dom結構，這是很是消耗手機資源和影響加載速度的；3. 樣式風格自成一派，不是用戶所熟悉的原生樣式。
基於這種狀況，DCloud推出了開源的mui框架（http://dcloudio.github.io/mui/）， 它是目前最高性能和最接近原生體驗的手機端框架。它的3個特色與Jquery mobile正好對應：1. 體積小，不到100k； 2. 直接使用class編寫，性能遠高於data-方式，又經過代碼塊的編寫方式下降了開發者編碼的複雜度，在HBuilder裏敲m，會拉出一排控件 mList、mButton等，選一個回車，就會自動產生div和class； 3. mui的風格樣式是最接近原生樣式的，以下圖。

 

總結

經過HBuilder、5+ Runtime、mui，咱們很好的解決了HTML5的性工能障礙，作到了與原生App一致的功能和體驗，給開發者提供了更多便利。在iweb 2014大會上，DCloud CEO王安作了主題演講，系統性的發佈了克服HTML5性工能障礙的解決方案，你們能夠訪問視頻（http://v.youku.com/v_show/id_XNzYyNzI3NDQw.html）。
在HTML5的問題獲得解決後，這項技術的優點就能夠大放異彩，給世界帶來巨大的變化。有興趣的朋友能夠閱讀這篇文章《HTML5定稿了，爲何原生App世界將被顛覆》