Uber每個(gè)地區(qū)的網(wǎng)頁內(nèi)容都不一樣。以前是每個(gè)地方的團(tuán)隊(duì)自己搭小網(wǎng)站，高峰時(shí)有1500多個(gè)小網(wǎng)站。這些小網(wǎng)站的域名十分繁雜，當(dāng)?shù)赜脩粝胍ゾW(wǎng)站上了解當(dāng)?shù)氐淖钚孪ⅲ疾恢廊绾蜗率帧?br>
為了解決這個(gè)問題，Uber團(tuán)隊(duì)做了個(gè)統(tǒng)一的的內(nèi)容管理系統(tǒng)（Content Management System， 簡(jiǎn)稱CMS）， 把之前的小網(wǎng)站全部遷移集成到主域名下(Uber.com)。團(tuán)隊(duì)把這個(gè)CMS取名為變色龍(Chameleon)。 因?yàn)樽兩埳糜谶m應(yīng)環(huán)境，也希望這套系統(tǒng)無論是從設(shè)計(jì)上還是內(nèi)容上，能夠幫助運(yùn)營(yíng)團(tuán)隊(duì)輕松實(shí)現(xiàn)網(wǎng)頁的“本地化”和“定制化”。

據(jù)說，這套CMS從最初的設(shè)計(jì)和原型開始，到全球城市普遍推出，只用了六個(gè)月的時(shí)間。一起來看看這是怎樣的系統(tǒng)吧！

原文閱讀時(shí)間：19分鐘
本文閱讀時(shí)間： 5分鐘

Uber用Chameleon系統(tǒng)來管理每個(gè)地區(qū)的網(wǎng)站內(nèi)容

一定要從頭搭建嗎？

你可能會(huì)問，為什么不用現(xiàn)成的開源庫？Uber團(tuán)隊(duì)給出的答案就是：

• 不想做重復(fù)勞動(dòng)。
  在Chameleon之前，Uber推出過監(jiān)測(cè)系統(tǒng)Morpheus，還有一些集成后端的服務(wù)。如果直接用開源庫，就得在該庫基礎(chǔ)上再搭建一套監(jiān)控系統(tǒng), 完全沒這個(gè)必要。
  
• 靈活性沒有自己搭建的強(qiáng)。
  自己搭建的話，UI想怎么簡(jiǎn)單就怎么簡(jiǎn)單，能夠極大方便運(yùn)營(yíng)團(tuán)隊(duì)上手該系統(tǒng)。
  另外，自己搭建CMS，能夠和現(xiàn)有的網(wǎng)站進(jìn)行整合。

架構(gòu)

由四個(gè)部分組成：數(shù)據(jù)層Louvre、渲染層Chameleon-Render、UI層Chameleon-UI、還有負(fù)責(zé)托管的Uber.com網(wǎng)站。

綠色部分是Chameleon的核心組成部分，藍(lán)色部分是原有的技術(shù)棧。

1.存儲(chǔ)層Louvre（盧浮宮）

Louvre是用Go寫的， 在 Schemaless 數(shù)據(jù)庫基礎(chǔ)上搭建的， 并且使用 TChannel與其客戶端進(jìn)行通信。

數(shù)據(jù)庫里的內(nèi)容是以塊為單位的，一個(gè)塊包含內(nèi)容（橘黃色）和地理定位（綠色）。Louvre會(huì)根據(jù)請(qǐng)求的地理定位參數(shù)進(jìn)行查找。

• Louvre的一個(gè)區(qū)塊

2. 渲染層 Chameleon-Render。

Chameleon-Render起著承“下”啟“上”的作用。底層的Louvre解析完后，Chameleon-Render將得到的塊內(nèi)容渲染進(jìn)React虛擬DOM結(jié)構(gòu)中去。

Chameleon-Render有幾個(gè)重要特點(diǎn)。

1. 樣式封裝。通過 Styletron實(shí)現(xiàn)。
2. 以塊為單位進(jìn)行內(nèi)容渲染，從上到下逐一放置。對(duì)塊的要求很高，必須支持響應(yīng)式設(shè)計(jì)、高性能動(dòng)畫等等。
3. 塊類型是模板化的，且高度自定義的。每個(gè)塊類型都可以在編輯器中使用表單進(jìn)行編輯，并且表單為每個(gè)段落都提供了控件。

3.Chameleon UI—網(wǎng)頁編輯器。

這個(gè)編輯器有三個(gè)特點(diǎn)：

• 實(shí)時(shí)預(yù)覽正在編輯的內(nèi)容

• 頁面配置服務(wù)?？梢耘渲门c搜索引擎相關(guān)的屬性（例如標(biāo)題和描述）。

• 集成后端翻譯服務(wù)

• 網(wǎng)頁編輯器

4.Uber.com

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

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

原文鏈接：Introducing Chameleon: A Global CMS from Uber Engineering
原文作者： Ken Sheedlo
原文創(chuàng)作時(shí)間：2017年7月21日
文中圖片均選自 Introducing Chameleon: A Global CMS from Uber Engineering