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有几个重要特点。

样式封装。通过 Styletron实现。

以块为单位进行内容渲染，从上到下逐一放置。对块的要求很高，必须支持响应式设计、高性能动画等等。

块类型是模板化的，且高度自定义的。每个块类型都可以在编辑器中使用表单进行编辑，并且表单为每个段落都提供了控件。

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