优步是技术堆栈由多样化的移动和后端系统组成，共同运送全球可靠的交通运输。骑手和司机相似使用我们的网站在网络和移动浏览器上获取最新的物流信息，比如如何注册优步(Uber)，从哪个机场出发，以及监管合规要求和其他特定地区的信息。

有效地为优步提供优化的全球用户基础，本地团队为其城市或地区的骑手和驱动程序创建和发布内容。要使内容创建过程简化和可扩展，Uber.com内容平台团队开发了Chameleon，全球内容管理系统（CMS）Uber.com.。Chameleon允许团队以适应其环境的能力，以获得其环境的彩色爬行动物命名，允许团队提供针对其区域市场量身定制的内容，并提供直观的用户界面（UI），以便Uber中的任何人都可以轻松构建自定义网页。

在本文中，我们提供了深度潜水，看看Chameleon，它的多层架构以及它如何使全球区域运营和营销团队能够运送时尚，品牌和易于导航的网页。

变色龙背后的动机

2016年初，Uber.com仍然是手写的反应一种ND.效率低下一世N在运营能力和区域定制内容方面都跟上了公司不断增长的规模。

为了跟上运营增长，许多区域运营团队正在在多个平台上创建自己的微量。在他们的峰顶，网上有多达1,500个优步微井。

事实证明，对于那些想从优步获取官方信息的用户来说，这种方法是有问题的、令人困惑的。这些微型网站还降低了业务效率和搜索引擎优化(SEO)价值，同时削弱了可见性和控制。

为了解决这些问题，内容平台团队构建了一个解决方案，将所有微型内容集成到Uber.com域中。然而，为了鼓励向我们的CMS迁移，我们需要通过确保解决方案能够与我们已经使用的城市团队的工具完全集成，以便通过无缝采用。

为什么要从头开始建立CMS？

在Chameleon之前，Uber.com托管了几个需要保持性能的功能，因为我们转换为一个可以支持我们数百个城市团队使用的更大的系统。这些包括与现有优步后端服务的集成，睡眠实验，统计和监控，帮助内容平台工程师找到并修复生产问题。

虽然我们考虑了现有的开源工具，但我们决定最好在超级网络平台技术上创建一个CMS。使用开源技术构建CMS L将要求我们构建许多功能 - 指标，监控，安全性和后端服务集成 - 已经在优步现有的Web框架中标准。在壁边，从地上创造一个内部CMS，让我们有机会为城市团队接送和开始使用有限的打嗝来建立一个易用的UI。

架构我们自己的CMS还给了我们一个有能力与我们现有网站灵活集成的自定义解决方案。我们选择使用React，以便我们可以构建交互式内容块，并将它们与Uber.com域上的现有组件紧密地集成。我们还定义了JSON文档格式并构建了Chameleon-渲染，以渲染JSON文档来应对组件。与一些Uber工程的遗留CMS相比，这使我们可以更好地支持内容，这允许作者将HTML和模板代码直接写入系统。通过React组件和JSON文档，内容平台工程师可以使修补程序提高可访问性，应用品牌更新，并在不触摸内容的情况下提高页面负载性能，从而更容易启动后继续改善CMS。

变色龙也支持地理化内容。这意味着Chameleon使运营商不仅可以创建区域量身定制的内容，而且还促进了通用Uber.com页面上的本地内容。以我们的墨西哥城市Microsite为例：落在我们的用户顶级驱动程序页面对于墨西哥，将提示单击指示用户的促销块墨西哥城司机指南。(稍后我们将详细介绍这个系统的工作原理。)

接下来，我们看一下Chameleon体系结构，确定关键组件以及它们如何协同工作以解决用户的通用和区域性需求。

建筑概述

变色龙架构由四个关键产品和许多潜在的服务组成。在高级，存储，通用渲染器，Web编辑器应用程序和网站本身作为我们的CMS解决方案的基础：

• 存储。存储层将内容存储为一系列块，这些块在用户看来是每个页面的水平切片。存储由卢浮宫(Louvre)处理，这是一个由优步(uber)架构的服务去这坐在我们的顶部无模式数据存储。
• Chameleon-Render。通用渲染器，称为变色龙渲染，被实施为将块内容呈现为编辑器和实时网站的React组件。由于Chameleon-Render必须在多个下游服务中使用，因此它被开发为内部JavaScript库。
• Chameleon-UI.。我们开发了Chameleon-UI作为我们的Web编辑器应用程序。此服务读取在Chameleon-rador中定义的块模式，并生成编辑器，其中包含正在编辑的内容的实时预览。Chameleon-UI还提供了编辑页面级配置数据的界面，例如页面标题和描述。此配置存储在FLIPR，UBER配置服务中。
• Uber.com网站。最后，我们将卢浮宫和变色龙渲染与我们的网站，提供内容给司机合作伙伴和世界各地的乘客。我们的网站服务叫做ubercom。使用地理素卢浮宫提供的本地化内容。

下面，我们提供了Chameleon的架构概述：

关键系统组件

为了理解这些不同的部分如何组合在一起，我们必须解释在变色龙中存储和呈现内容的基本原理。首先，我们参观了Uber的卢浮宫，来解释block和block内容在我们系统的语境中是什么。我们还将评估Schemaless如何使我们能够轻松、可靠地阅读和编辑世界上任何地方的内容。

罗浮宫

我们将我们的内容数据存储卢浮宫命名为着名的法国艺术博物馆它存储了我们的杰作。如前所述，卢浮宫在lemsaless和用途中存储内容TChannel.它的客户端主要是CMS编辑器和web服务器。

Louvre内容在块和块内容方面定义。在我们的系统中，一个块将相关的层次结构与块内容组合，以阻止内容，该内容表示通常用amveleon-渲染呈现的JSON文档。每个块内容都有一个版本和发布版本。

当对LOURRE进行解析内容的请求时，它会读取请求的参数，然后遵循层次结构以查找正确的块内容。例如，第一个块旧金山的司机注册页面可能会叫city_driver_guide.1。该网站将提出解决要求city_driver_guide.1.geolocalization参数[“美国”，“San-Francisco”]。如果请求是墨西哥城司机注册页面，网站将请求解决同一块city_driver_guide.1.geolocalization参数[“MX”，“墨西哥城”]并将在响应中收到不同的块内容。LOUVRE也负责检查是否可用于所请求内容中的每个字符串的翻译，并在结果中插入它们。

图2示出了一个示例块的内容层次结构，在这种情况下city_driver_guide.1.下面:

这个区块和区块内容系统允许我们创建新的城市页面模板，而不需要首先编写内容。当一个新城市启动时，它会自动分配一个网站Uber.com.然后，该城市团队可以自定义为当地骑手和司机提供高度相关的内容。此功能可确保内容平台和城市团队可以快速创建和运送Web内容，促进优步的持续增长和可扩展性。

变色龙 - 渲染

一旦解决了块内容，应用程序将它传递给Chameleon-Render，解决方案的JavaScript库，以呈现为React虚拟DOM。Chameleon-Render有几个关键功能，使其有助于构建CMS。例如，它针对通用的JavaScript，允许我们在浏览器中创建交互式组件或渲染服务器端，以改进性能和SEO。Chameleon-Render的另一个重要属性是风格的封装，这意味着几乎所有的变色龙的造型和布局都是在JavaScript中输入的，并与图书馆打包。通过Styletron，风格封装帮助我们保证Uber.com上的内容看起来和Chameleon-UI live previewer一样。

Chameleon页面是通过选择块并从顶部划分的块，就像俱乐部三明治一样。每个变色龙渲染块或块类型负责将内容放在一层三明治内。块类型如广告牌，促销，呼叫动作和免责声明必须支持Uber.com的所有功能，包括完全响应的设计，可访问性，高性能动画和右到左本地化。由于块类型是预先编写和模板，因此优步员工可以轻松地在变色龙中创建高质量的网页。

如果渲染内容是它所能做的一切，Chameleon-Render将不会是一个非常有用的泛型块库。为了使内容创建体验尽可能无缝，我们还需要确保每个块类型都可以在编辑器中使用表单进行编辑，并且表单为每个字段提供直观的控制。

一个明显的选项将为每个块实现一个新表单，但这种方法本质上是错误的，并且难以缩放。相反，我们选择使用架构JSON文件描绘每个块类型，该模型JSON文件描述了其所有可编辑属性。然后，UI基于架构生成适当的表单。这样，我们可以构建相关的，用户友好的表单，用于编辑模式中编辑的新块类型，而不是代码。此外，这些模式在Chameleon-Rendal Build中自动验证，这确保了编辑器能够为任何给定的用例生成正确的表单。

Chameleon-UI.

Chameleon-UI是Chameleon的Web编辑器应用程序。优步员工使用此工具为其团队的特定网页创建和编辑内容。下面，我们描绘了用户如何利用Chameleon-UI创建微量资料和网页：

Chameleon-UI的若干功能使其易于启动和自定义特定的网页。这些包括与变色蜥蜴渲染和块编辑器的集成，以生成编辑块类型的表单，以便在Live之前预览页面的功能，以及页面的SEO相关属性的控制（例如标题和描述和操作设置whether or not the page is live or should be indexed by search engines.) Chameleon-UI integrates with back-end translation services so that content can be translated to address Uber’s global community of riders and drivers.

Uber的变色龙：现在和将来

“变色龙”的设计、开发和发布时间紧凑，以跟上优步的增长步伐。在短短6个月的时间里，我们从最初的设计和原型制作，发展到在世界各地的城市普及。但启动平台只是旅程的第一部分。下一步，或许也是最重要的一步，是让优步员工熟悉使用变色龙，这样他们就会感到舒适地将他们的微网站Uber.com.。

为实现这一目标，我们首先在SF办公室举办了来自北美的员工的Chameleon培训峰会，以帮助他们加快系统速度。接下来，我们在路上参观了我们的展示，在墨西哥城，阿姆斯特丹和新加坡访问办事处，以便在每个地区培训城市队伍。除了在可接近的和动手的方式介绍平台之外，这些会议是一个令人难以置信的机会，可以寻求多样化的观点，并累计用户反馈以备将来的改进。

基于此反馈，我们实现了额外的功能来改进变色龙的UI，并使更容易创建更动态和数据驱动的页面。新功能的例子包括：

• 变色龙抓取实体(CFE)。此新工具使团队能够添加模块获取票价估计，为乘客提供一个给定的旅程将花费多少的感觉，即，从旧金山的金融区为联合广场。
• 加速移动页面(AMP)页面。AMP项目使创建的网站始终快速加载，性能和视觉震撼;为了在所有设备上为Uber.com实现AMP页面，我们添加了一个新的前端服务来呈现AMP页面。该服务从卢浮宫提取内容，并配置Chameleon-Render块，以便它们生产符合amp的标记。(查看在旧金山国际机场使用优步的AMP页面作为一个例子)。

我们打算在Chameleon启动的其他功能和能力包括：

• 将Chameleon-RendalLock迁移到Web内容块，我们的AMP站点使用的下一代渲染系统。
• 构建高级配置工具，使Uber.com网站更易于操作。
• 开发一个平台，让其他优步网站可以使用变色龙的CMS技术。

如果你喜欢像变色龙一样帮助团队创建定制化的网站，那就考虑加入Uber.com内容平台团队。我们正在为……招聘工程师前端和后端在我们的旧金山办事处的职位。

Ken Sheedlo是旧金山Uber.com内容平台团队的工程师。当他没有创造令人愉快的前端经验时，你可以找到他探索城市的餐馆或在公园里做瑜伽。

标题的照片学分：“变色龙“ 经过罗丁顿棒，许可cc-by-sa 2.0。图像裁剪头部尺寸。