html5的效能不輸原生app 可以用拼積木的方式做HTML5產品

　可能你已經發現了，一個好玩有趣的 HTML5 頁面在微信朋友圈裡獲得的用戶關注度會遠超過那些普通的獨立應用。在行動應用程式越來越多，推廣越來越難做的情況下，你的產品是不是也應該有一個 HTML5 頁面？

       

　　如果答案是肯定的，那麼或許可以試試 Amaze UI 這套開源的HTML5 如果答案是肯定的，那麼或許可以試試 Amaze UI 這套開源的HTML5 前端框架，利用它提供的插件元件可以試試 Amaze UI 這套開源的HTML5.的搭建出一款HTML5 產品。

　　對於那些經常在行動裝置上存取 Web 頁面的使用者來說，你可能已經注意到了，一個 Web 頁面基本上可以分為選單、標題列、圖片畫廊、內容清單、分割線這幾大塊。在 Amaze UI 裡面，官方提供了各種各樣的 Web 元件，你甚至可以像拼積木一樣來建造 HTML5 產品。

　　除了上面提到的那幾個主要網頁組件之外，像是折疊面板、頁頭、頁腳、圖片輪播、選項卡、簡介、段落這些都是Amaze UI 中開發者可以直接使用的Web 組件。由於 Amaze UI 是一款開源產品，所以一些第三方的開發者也不斷向其貢獻特色化的元件。比如來說，在涉及到地理位置的時候，用戶可能會需要一個地圖指引，這時你就可以集成「百度地圖」的組件；在文章下面你可能需要評論體系，這時又可以用「多說」的組件；一些服務性的網頁又可能需要客服，這時「美洽客服」組件自然也就派上用場了。

　　當然，可能有些開發者會說，這些元素只是 Web 網站的一部分，當你真正來做一個 Web 網站時，你可能還需要各種各樣的互動效果和文字排班樣式。這時 Amaze UI 的 JS 元件和 CSS 元件的用處就顯現出來了。

　　透過 JS 元件，開發者可以獲得一系列的 UI 增強效果，例如，警告框、平滑捲動、載入進度條、彈出框、模態視窗、下拉元件、按鈕互動等等。透過 CSS 元件，開發者既可以直接整合像按鈕、表單、表格這樣的 HTML 元素，又可以使用小徽章、麵包屑導覽、按鈕群組這樣的頁面元件。

　　目前，Amaze UI 總共有近20 個CSS 組件、10 個JS 組件和17 款包含近60 個主題的Web 組件，按照CEO 陳本峰的說法，和國外的一些Web 前端框架相比，Amaze UI 會更多的考慮中文用戶的需求。例如在字體排版上，Bootstrap 這套前端框架就沒有定義中文字體，這樣你的網頁在不同的系統和瀏覽器下的展示效果可能都是不一樣的，但Amaze UI 中由於定義了中文字體而且針對國內市佔率比較高的瀏覽器做了優化，所以就可以避免這樣的情況。

　　對於那些正在嘗試做HTML5 產品的公司來說，你可能還停留在Facebook、LinkedIn 等大公司從HTML5 app「叛逃」到原生app 的陰影中，因為即使到了今天，有些人在談到HTML5 時還會舉上面的例子。不過一位曾經在 Chrome 團隊工作的工程師 Shinji Ikari 告訴 PingWest，Facebook 當初之所以會把 HTML5 app 做的那麼慢，這更多的是 Facebook 自身的原因，而不是由於 HTML5 不行。因為從技術上來說，HTML5 的缺陷不是慢，而是不能 Scale。當時，Facebook 的 HTML app 還在用 XML，所以可以說他們的技術是相當落後的。

　　為了證明 HTML5 app 的效能不輸給原生應用，Google 的兩位工程師專門做了一個 Fastbook 的 HTML5 app 來表明 Facebook 的「叛逃」並不是 HTML5 的錯。根據 Shinji Ikari 說法，兩年前 HTML5 app 的效能就可以趕上原生 app 了，何況現在！

　　那麼你或許會好奇，既然 HTML5 的效能不輸給原生 app，那麼我們平常看到的優質 HTML5 app 為什麼這麼少呢？對於這一點陳本峰覺得這更多的還是這一領域開發人員的技術累積不足。

　　Shinji Ikari 也表示，對於很多應用來講，寫成原生 app 幾乎是必然的，如果你在寫一個 3D 遊戲，而不需要任何的 DOM（文檔對像模型），那麼根本沒有任何理由使用 HTML。使用 JavaScript 不僅不會簡化你的工作，還會讓你的專案推進變得更糟。但是，像 Facebook 的這樣手機應用，就是一個列表，沒有什麼可以超出 HTML5 的範圍的內容，使用 HTML5 應該會得心應手，所以很多時候大公司對於技術的選擇沒有太大的借鑒價值。

　　好了，在解釋了HTML5 並不像人們想像的那麼弱之後，也許你會覺得Amaze UI 裡的這些元件還不足於做出自己想要的產品，這也是Amaze UI 選擇開源的原因之一—讓社區為其貢獻更多的內容。如果你現在正在打算做 HTML5 產品，那麼即便不選擇 Amaze UI 框架，也不要讓 Facebook、LinkedIn 這樣的案例成為你的絆腳石。