HTML5性能不輸原生app,用拼積木方式做HTML5產(chǎn)品
可能你已經(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