导读：Twitter Lite 是 Twitter 的精简版移动网站，主要面向网络连接不稳定或流量不富裕的用户，需要通过浏览器运行，但其外观、功能与原生应用几乎完全相同。本文是 Twitter 技术团队构建该服务的经验总结，由高可用架构翻译，转载请注明出处。
很高兴向大家介绍 Twitter Lite，它是一个可以在我们移动网站上访问的 Progressive Web App [2]。 Twitter Lite 是一个运行在现代浏览器的快速、响应式、使用较少的数据和存储空间、并支持推送通知以及离线使用的 Web app。 Web 正在成为轻量级应用程序的平台，它可以按需访问，不需要安装，并逐步更新。 在过去一年中，我们引入了许多新的开放式 Web API，很显著的提高了整体性能并提升了用户体验。
架构总览
Twitter Lite 包括一个 JavaScript 客户端和一个小而简单的 Node.js 服务器。服务器处理用户身份验证，构建应用程序的初始状态，并渲染初始的 HTML 应用外壳。一旦在浏览器中加载完成，应用程序将直接从 Twitter API 请求数据。基础架构的简单性可以帮助我们提供大规模的可靠及有效率的服务 - Twitter Lite 比 Twitter 网站的运行成本要低一个数量级。
客户端 JavaScript 应用程序使用了许多开源代码库，包括 React，Redux，Normalizr，Globalize，Babel，Webpack，Jest，WebdriverIO 和 Yarn。依靠已建立的开源软件，我们可以花费更多的时间来改善用户体验，加速迭代，以及处理 Twitter 相关的问题（比如处理和操作信息流以及推文数据）。
我们采用现代的 JavaScript（ES2015 及更高版本）版本,使用 Babel 并依靠 Webpack 进行打包。 API 响应数据首先由 Normalizr 处理 - 它将数据去重并转换为更有效的形式，这一过程发生在调用 Redux 一些处理模块如获取、保存本地及远程数据之前。UI 则由数百个 React 组件实现，包含渲染文本，管理虚拟列表，延迟加载模块和延迟渲染等方面的功能。 Twitter Lite 支持 42 种语言，我们使用 Globalize 提供本地化的数字，日期和消息。
为性能而设计
每月有数亿人访问我们移动网站 mobile.twitter.com。 当连接速度慢，不可靠，连接有限制或昂贵时，我们希望 Twitter Lite 成为使用 Twitter 的最佳方式。 我们已经通过一系列增量性能改进（称为 PRPL 模式 [3]）和使用 Android 上的现代浏览器（例如 Google Chrome）的新功能来保证访问速度和可靠性，其中包括 Service Worker，IndexedDB，Web App Install Banners 和 Web 推送通知。
可用性
Twitter Lite 具有网络弹性。 为了触达到地球上的每一个人，我们需要在网速慢且不可靠的情况下服务用户。 当服务可用时，无论网络情况如何，我们都会使用 Service Worker 来启用临时脱机浏览和即时加载。 Service Worker 缓存了 HTML 应用程序的 shell、静态资源以及一些流行的表情符号。 当脚本或数据加载失败时，我们提供“重试”按钮，帮助用户从故障中恢复。 总而言之，这些改变可以提高可靠性，并能够在重复访问时显著减小加载和启动时间。
逐步加载
Twitter Lite 在大多数设备上通过 3G 网络可以在 5 秒以内完成加载。 世界上大多数移动设备都在使用 2G 或 3G 网络; 快速的打开体验至关重要。 在过去 3 个月中，我们将平均加载时间缩短了超过 30％，99% 的交互延迟时间缩短超过 25%。
为了实现这一目标，应用程序向浏览器发送初始 HTML 响应流，在服务器构建初始应用程序状态时发送指令以预加载关键资源。 使用 webpack，应用程序的脚本被分解成细粒度并按需加载。 这意味着初始加载只需要可见屏幕所需的资源。 如果网络可用，Service Worker 将预加载其他资源，并允许即时的导航到其他界面。这些更改允许我们逐步加载应用程序，以便人们可以更快地消费和创建推文。
渲染
Twitter Lite 将昂贵的渲染工作进行了分解，虽然我们已经优化了每个组件的渲染，但展示推文是一个复杂的复合组件，并且渲染无限滚动的信息流列表也需要额外的性能考虑。 我们实现了自己的虚拟化列表组件，它只会对可见视图中的内容进行渲染，并使用 requestAnimationFrame API 递增地渲染多个帧上的项目，并保持屏幕上的滚动位置。 通过使用 requestIdleCallback API 将非关键渲染推迟到空闲时段，这样进一步改善了性能。
数据使用
默认情况下，Twitter Lite 尽量减少数据的使用，提供较小的媒体资源，并依赖缓存数据。 我们已经优化了图像，以便在滚动信息流时将其对数据使用的影响减少 40％。 我们提供的“数据节约”模式可以进一步减少数据使用，通过使用模糊预览替换推文和私信中的图像以减少数据使用。图像的 HEAD 请求有助于我们在按钮旁显示其大小，以便按需加载。 在只有我们原生 app 应用大小 1 - 3% 的情况下，Twitter Lite 也只需要较少的设备存储空间。
设计和迭代速度
提高快速迭代的能力可以帮助我们保持高质量的用户体验。 我们很大程度上依赖于 flexbox 布局及一个小而固定数量的颜色，字体大小和长度。 Twitter Lite 由基于组件的响应设计系统构建，允许应用程序适应任何物理尺寸。 使用 UI 组件还帮助我们建立了设计和工程之间的共享词汇，并鼓励快速迭代和重用现有构建块。 我们最复杂的一些功能，例如混合内容信息流，从配置和连接 Redux 模块到 React 组件只需要 30 几行代码。
展望未来
在 Twitter 这个规模上构建一个快速的 Web 应用程序，并保持快速迭代，这是涉及到 Twitter 多个团队包括设计，产品和工程的重大挑战。 我们对这一进步感到兴奋，并尝试使用 HTTP/2，GraphQL 和替代压缩格式，以进一步减少加载时间和数据消耗。 在接下来的几个月中，我们将会对 Twitter Lite 的辅助功能，安全性，设计，功能和性能进行更多的改进。
相关链接
英文版：https://blog.twitter.com/2017/how-we-built-twitter-lite
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
https://developers.google.com/web/fundamentals/performance/prpl-pattern/
推荐阅读
本文最早出现在 Twitter 工程博客，作者 Nicolas Gallagher，由 jesse 翻译，转载请注明出处，技术原创及架构实践文章，欢迎通过公众号菜单「联系我们」进行投稿。
高可用架构
改变互联网的构建方式
长按二维码 关注「高可用架构」公众号
