[[125605]]

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

如果答案是肯定的，那么或許可以試試Amaze UI這套開源的HTML5前端框架，利用它提供的Web組件、JS插件和層疊樣式表（CSS），你可以快速的搭建出一款HTML5產(chǎn)品。

對于那些經(jīng)常在移動設(shè)備上訪問Web頁面的用戶來說，你可能已經(jīng)注意到了，一個Web頁面基本可以分為菜單、標題欄、圖片畫廊、內(nèi)容列表、分割線這幾大塊。在Amaze UI里面，官方提供了各種各樣的Web組件，你甚至可以像拼積木那樣來搭建HTML5產(chǎn)品。

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

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

通過JS組件，開發(fā)者可以獲得一系列的UI增強效果，比如，警告框、平滑滾動、加載進度條、彈出框、模態(tài)窗口、下拉組件、按鈕交互等等。通過CSS組件，開發(fā)者既可以直接集成像按鈕、表單、表格這樣的HTML元素，又可以使用小徽章、面包屑導(dǎo)航、按鈕組這樣的頁面組件。

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

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

為了證明HTML5 app的性能不輸給原生應(yīng)用，Google的兩位工程師專門做了一個Fastbook的HTML5 app來表明Facebook的“叛逃”并不是HTML5的錯。按照Shinji Ikari說法，兩年前HTML5 app的性能就可以趕上原生app了，何況現(xiàn)在！

那么你或許會好奇，既然HTML5的性能不輸給原生app，那么我們平時看到的優(yōu)質(zhì)HTML5 app為什么這么少呢？對于這一點陳本峰覺得這更多的還是這一領(lǐng)域開發(fā)人員的技術(shù)積累不足。

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

好了，在解釋了HTML5并不像人們想象的那么弱之后，也許你會覺得Amaze UI里的這些組件還不足于做出自己想要的產(chǎn)品，這也是Amaze UI選擇開源的原因之一—讓社區(qū)為其貢獻更多的內(nèi)容。如果你現(xiàn)在正在打算做HTML5產(chǎn)品，那么即便不選擇Amaze UI框架，也不要讓Facebook、LinkedIn這樣的案例成為你的絆腳石。

圖片來自：Shutterstock