2014
12
22

Origami:基於組件的Web應用程序

關鍵字:OrigamiJavaScriptHTML5CSS

在Velocity Europe 2014大會上,FT Labs的 總監Andrew Betts為與會者展示了由他們自行開發的一套用於web開發的標準與工具,目標是以它來應對創建與維護總數超過800個的*.ft.com網站的開發中 的挑戰。FT Labs的主要策略是將web頁面分解為多個元件,以定義的規則來構造這些元件。

FT Labs是隸屬於金融時報(Financial Times)的一個團隊,專注於web技術。由於金融時報的電子資產的快速發展,公司面臨著一系列的挑戰,這些挑戰都與規模的擴大有關。在他們管理的大量網站中缺乏通用與結構化的規則和工具,意味著大量的工作被不斷重複。

不斷擴大與趨於複雜化的web生態系統產生了極大的阻力:難以維護及更新 web應用程式;遺留的代碼無法消除;所需要的端到端的工程技術又難以找到。

因此FT Labs計畫尋求一種能夠解決這些問題的解決方案,並決定了這套基於組件的方案。這套方案是由一系列準則推動的,以下僅舉幾例:

必須完全遵守標準
不允許對某個單一的產品(例如網站)創建特定的元件
元件應當易於使用,並且具有靈活性
元件使用者對於所使用的元件有權決定在何時進行升級
元件應當被封裝,或者使用命名空間,以確保不會與其他元件產生衝突
對外部系統的依賴應降至最低,因此保證了整個解決方案的高可靠性與快速發佈能力
組件以兩種形式存在:模組(module)與web service。

基於Origami元件創建的應用程式

模組是指靜態資源(例如CSS檔)或CommonJS模組,因此它的主要目的在於為多個網站提供相同的UI體驗。每個模組必須遵守規格說明,包括命名、打包及構建配置、測試及演示規則,以及一些其他需求。舉例來說, o-date專用於日期的格式化與修改,o-ft-typography則是專門用於FT的排版樣式。

如同名稱所示,web service通過URL終結點提供內容與資料。Web service同樣必須遵循一套規格,其中定義了一些需求。Origami web service的例子包括responsive-image-proxy,它是一個用於改變圖片大小與進行圖片優化的代理服務。

FT Labs為元件提供了一份註冊資訊,可以為任何人使用。當然,如同我們所看到的那樣,某些元件是專門為金融時報網站所使用的。

在報告的最後,Andrew為與會者演示了FT Labs的Polyfills服務。Polyfills是一種JavaScript代碼,它能夠為web流覽器加入本身不支援的特性,以此減少各個流覽器提供商與各種版本所帶來的差異。
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所