[[125605]]

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

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

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

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

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

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

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

對(duì)于那些正在嘗試做 HTML5產(chǎn)品的公司來說，你可能還停留在Facebook、LinkedIn等大公司從HTML5 app“叛逃”到原生app的陰影中，因?yàn)榧词沟搅私裉欤恍┤嗽谡劦紿TML5時(shí)還會(huì)舉上面的例子。不過一位曾經(jīng)在Chrome團(tuán)隊(duì)工作的工程師 Shinji Ikari告訴PingWest，F(xiàn)acebook當(dāng)初之所以會(huì)把HTML5 app做的那么慢，這更多的是Facebook自身的原因，而不是由于HTML5不行。因?yàn)閺募夹g(shù)上來說，HTML5的缺陷不是慢，而是不能Scale。 當(dāng)時(shí)，F(xiàn)acebook的HTML app還在用XML，所以可以說他們的技術(shù)是相當(dāng)落后的。

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

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

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

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

圖片來自：Shutterstock