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