商周

啟動成功關鍵,隨時掌握商周.com最新資訊

提供第一手新聞解析、財經趨勢、專屬活動

已加入收藏
已取消收藏
熱門關鍵字
熱搜內容
現正閱讀
馬克:HTML5是個錯誤?Sencha:錯的是FB技術
畫重點
段落筆記
新增筆記
「請稍等」英文別直接中翻英說please wait a minute!一次掌握,常用的電話對談英文
0
/500
不公開分類 公開分類
儲存

財經 | 產業動態

馬克:HTML5是個錯誤?Sencha:錯的是FB技術

▲臉書創辦人馬克.佐伯格(Mark Zuckerberg)
(來源:達志影像)
撰文者:Benson Fang
科技報橘 2012.12.18 29,043

還記得〈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)

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

下滑載入更多報導
臉書 HTML5 facebook html5 祖克柏 左伯格 Facebook
科技報橘
TechOrange

TechOrange,專門追蹤全球網路產業的科技網誌。提供網路創業者、行銷人員、媒體人員關於網路的資訊與知識是我們的任務。文章輕薄短小,吸收科技新知沒負擔,每天大概花吃顆橘子的時間來瀏覽就夠了。

廣告
留言討論