[[125605]]

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

如果答案是肯定的，那么或許可以試試Amaze UI這套開源的HTML5前端框架，利用它提供的Web組件、JS插件和層疊樣式表（CSS），你可以快速的搭建出一款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這樣的案例成為你的絆腳石。

圖片來自：Shutterstock