馬克：HTML5是個錯誤？Sencha：錯的是FB技術

還記得〈FB 執行長祖克柏坦承：採用 HTML5 是臉書成立以來最大的錯誤〉這個消息嗎？

Facebook 創辦人兼執行長 Mark Zuckerberg 今年 9 月出席《TechCrunch》Disrupt 大會時，曾抱怨用 HTML5 寫出的 Facebook App 又慢又不穩定，總是沒辦法達到他們想要的品質，因而推出原生版的Facebook App。

這席評論，惹火了眾家 HTML5 的擁護者。現在 Sencha 的一群工程師，做出和官方 Facebook App 一樣的 App，還頗具挑釁意味的取名為「Fastbook」，他們要以此證明：

「HTML5 絕不是 Facebook 行動 App 龜速的原因！」

純 HTML5 的 Facebook App，到底可以有多優？

Sencha 是一家來自美國加州的行動 App 服務商，旗下許多行動 App 開發工具如 Sencha Touch，在歐美或中國，都有許多開發者社群。

他們在研究 Facebook App 之後，決定直接挑戰最難的部份，也就是動態時報（News Feed）及相關的頁面間切換。並在昨晚，公開了他們利用「閒暇之餘」做出來的成果：

從短短 4 分鐘的影片中，可以發現 Sencha 的純 HTML5 App（右側）勝出 Facebook 官方 App（左側）之處：

●頁面間切換更順暢，資料不需重新載入：例如進行新聞信息與個人檔案之間的切換時，資料不需重載，使用者經驗流暢。

●藉由「無限列表元件」（Infinite List Component），Sencha 的 HTML5 App 可以一次呈現更多信息留言，不會像官方 App 一樣卡卡的。

HTML5，真有這麼神？

Sencha 是如何做到的？

他們的作法包括：

●相對於官方 Facebook App 為混合式 App（hybrid app），Sencha 純以 HTML5 實作。

●由於資料全串接 Facebook 的公用 API，因此與伺服器間的資料請求時間，將直接反映在 App 執行速度上，故 Sencha 在請求的資料量上，花了相當大功夫來優化。例如透過代理伺服器來處理、過濾掉自 Facebook API 取得的資料量 －－ 同樣的新聞筆數，Sencha 的 HTML5 App 只需要 10% 的資料量。

●以任務陣列（TaskQueue）避免與 DOM 之間的讀寫間插，減少不必要的排版（layout）。

●以新增的動畫陣列（AnimationQueue）此類別，來優化動畫或事件的處理優先順序。例如當我們在 Facebook 牆上快速捲動時，動畫陣列就會暫停圖片的載入，直到動作停止。

網友抗議：兩者比較基礎不同！

部分網友認為，iOS 原生 App 使用的是 WebView 的環境，而 Sencha 最初公開的 HTML5 App，是採用純瀏覽器的環境，因此在 JavaScript 的處理上有較多優化。

對此 Sencha 說明，這項以 HTML5 優化 Facebook App 實驗的瓶頸，並不在於 JavaScript 的執行表現，而是在整體程式架構的優化。Sencha 還將相同的 HTML5 App 以原生 WebView 的環境包裝，讓網友下載比較：github.com/extjs/fastbook

Sencha：開發者的功力與思維才是重點

Sencha 的核心技術人員 Jacky Nguyen 補充說，「Fastbook」 無意取代官方 Facebook App，但許多團隊常以開發「網頁」的思維，來開發一個 HTML5 的行動 App，而這是不對的。他認為，這就是 Facebook 當初使用 HTML5 開發 App 時的心態，才造就一個又慢、又不穩的使用者體驗，他說：

「這個 Demo 影片，只是用來展現開發者可以如何用正確的方法、架構及工具，好好運用 HTML5。」

如果你現在剛好在用手機的話，趕快來試試純 HTML5 寫的 Fastbook ：http://fb.html5isready.com/

（資料來源：Sencha；圖片來源：LauraLewis23，CC Licensed）

本文獲「科技報橘」授權刊登