Uber 每个地区的网页内容都不一样以前是每个地方的团队自己搭小网站, 高峰时有 1500 多个小网站这些小网站的域名十分繁杂, 当地用户想要去网站上了解当地的最新消息, 都不知道如何下手
为了解决这个问题, Uber 团队做了个统一的的内容管理系统 (Content Management System, 简称 CMS), 把之前的小网站全部迁移集成到主域名下(Uber.com) 团队把这个 CMS 取名为变色龙(Chameleon)
因为变色龙擅于适应环境, 也希望这套系统无论是从设计上还是内容上, 能够帮助运营团队轻松实现网页的本地化和定制化
据说, 这套 CMS 从最初的设计和原型开始, 到全球城市普遍推出, 只用了六个月的时间一起来看看这是怎样的系统吧!
原文阅读时间: 19 分钟 本文阅读时间: 5 分钟
一定要从头搭建吗?
你可能会问, 为什么不用现成的开源库? Uber 团队给出的答案就是:
不想做重复劳动 在 Chameleon 之前, Uber 推出过监测系统 Morpheus, 还有一些集成后端的服务如果直接用开源库, 就得在该库基础上再搭建一套监控系统, 完全没这个必要
灵活性没有自己搭建的强 自己搭建的话, UI 想怎么简单就怎么简单, 能够极大方便运营团队上手该系统 另外, 自己搭建 CMS, 能够和现有的网站进行整合
架构
由四个部分组成: 数据层 Louvre 渲染层 Chameleon-RenderUI 层 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 的概括
来源: https://juejin.im/post/5aafd120f265da239c7b2c65