Uber網站國際化的工程實踐(CMS篇)

Uber每個地區的網頁內容都不一樣。以前是每個地方的團隊自己搭小網站，高峰時有1500多個小網站。這些小網站的域名十分繁雜，當地使用者想要去網站上了解當地的最新訊息，都不知道如何下手。

為了解決這個問題，Uber團隊做了個統一的的內容管理系統（Content Management System， 簡稱CMS），把之前的小網站全部遷移整合到主域名下(Uber.com)。團隊把這個CMS取名為變色龍(Chameleon)。

因為變色龍擅於適應環境，也希望這套系統無論是從設計上還是內容上，能夠幫助運營團隊輕鬆實現網頁的“本地化”和“定製化”。

據說，這套CMS從最初的設計和原型開始，到全球城市普遍推出，只用了六個月的時間。一起來看看這是怎樣的系統吧！

原文閱讀時間：19分鐘 本文閱讀時間： 5分鐘

一定要從頭搭建嗎？

你可能會問，為什麼不用現成的開源庫？Uber團隊給出的答案就是：

• 不想做重複勞動。 在Chameleon之前，Uber推出過監測系統Morpheus，還有一些整合後端的服務。如果直接用開源庫，就得在該庫基礎上再搭建一套監控系統, 完全沒這個必要。
  
• 靈活性沒有自己搭建的強。 自己搭建的話，UI想怎麼簡單就怎麼簡單，能夠極大方便運營團隊上手該系統。 另外，自己搭建CMS，能夠和現有的網站進行整合。

架構

由四個部分組成：資料層Louvre、渲染層Chameleon-Render、UI層Chameleon-UI、還有負責託管的Uber.com網站。

1.儲存層Louvre（盧浮宮）

Louvre是用Go寫的， 在 Schemaless 資料庫基礎上搭建的， 並且使用 TChannel與其客戶端進行通訊。

資料庫裡的內容是以塊為單位的，一個塊包含內容（橘黃色）和地理定位（綠色）。Louvre會根據請求的地理定位引數進行查詢。

2. 渲染層 Chameleon-Render

Chameleon-Render起著承“下”啟“上”的作用。底層的Louvre解析完後，Chameleon-Render將得到的塊內容渲染進React虛擬DOM結構中去。

Chameleon-Render有幾個重要特點。

1. 樣式封裝。通過 Styletron實現。
2. 以塊為單位進行內容渲染，從上到下逐一放置。對塊的要求很高，必須支援響應式設計、高效能動畫等等。
3. 塊型別是模板化的，且高度自定義的。每個塊型別都可以在編輯器中使用表單進行編輯，並且表單為每個段落都提供了控制元件。

3.Chameleon UI—網頁編輯器。

這個編輯器有三個特點：

• 實時預覽正在編輯的內容

• 頁面配置服務。可以配置與搜尋引擎相關的屬性（例如標題和描述）。

• 整合後端翻譯服務

• 

4.Uber.com

就這樣，Louvre，Chameleon-Render，與網站服務Uber.com一起，為全世界的司機和乘客提供本地化服務。

特別說明，本文是對Introducing Chameleon: A Global CMS from Uber Engineering 的概括。

原文連結：Introducing Chameleon: A Global CMS from Uber Engineering

原文作者： Ken Sheedlo

原文創作時間：2017年7月21日

文中圖片均選自 Introducing Chameleon: A Global CMS from Uber Engineering