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

jopen 9年前發布 | 13K 次閱讀 HTML5

可能你已經發現了,一個好玩有趣的 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 產品的公司來說,你可能還停留在 非死book、LinkedIn 等大公司從 HTML5 app“叛逃”到原生 app 的陰影中,因為即使到了今天,一些人在談到 HTML5 時還會舉上面的例子。不過一位曾經在 Chrome 團隊工作的工程師 Shinji Ikari 告訴 PingWest,非死book 當初之所以會把 HTML5 app 做的那么慢,這更多的是 非死book 自身的原因,而不是由于 HTML5 不行。因為從技術上來說,HTML5 的缺陷不是慢,而是不能 Scale。當時,非死book 的 HTML app 還在用 XML,所以可以說他們的技術是相當落后的。

為了證明 HTML5 app 的性能不輸給原生應用,Google 的兩位工程師專門做了一個 Fastbook 的 HTML5 app 來表明 非死book 的“叛逃”并不是 HTML5 的錯。按照 Shinji Ikari 說法,兩年前 HTML5 app 的性能就可以趕上原生 app 了,何況現在!

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

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

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

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!