我们是如何构建 Twitter Lite 的

我们很高兴向您介绍 Twitter Lite，它是一个 Progressive Web App ，您可以在 mobile.twitter.com 获取。 Twitter Lite 能够快速响应，使用较少的数据，占用较少的存储空间，并支持推送通知以及在现代浏览器中的离线使用。 网络正在成为轻量级应用程序的平台，可以按需访问，安装简易，并渐进更新。 在过去一年中，我们采用了新的开放式 Web API，并显著提高了性能和用户体验。

架构概述
Twitter Lite 是一个客户端 JavaScript 应用程序，也是一个小而简单的 Node.js 服务器。这个服务器处理用户身份验证、构建 APP 的初始状态，并渲染初始的 HTML 应用程序的 shell。一旦在浏览器中加载，APP 将直接从 Twitter API 请求数据。这种基本架构的简单性为我们提供了优秀的服务可靠性和规模方面的效率性 — Twitter Lite 比服务器渲染的桌面网站运行成本要低一个数量级。

客户端 JavaScript 应用程序是基于许多开源库基础上开发、构建和测试的，包括 React, Redux, Normalizr, Globalize, Babel, Webpack, Jest, WebdriverIO 和 Yarn。依赖于已创建的开源软件，我们可以花更多的时间来改善用户体验、增加迭代速度，以及解决诸如对时间轴和推文数据的处理和操纵等与 Twitter 相关的问题。

我们编写现代 JavaScript 代码（ES2015 及更高版本），它使用 Babel 编译并通过 Webpack 进行打包。API 响应数据首先由 Normalizr 处理 — 它允许我们在将数据发送到用于获取、存储、恢复远程和本地数据的各种 Redux 模块之前，将数据重新复制并将其转换为更有效的形式。该 UI 由数百个 React 组件实现，它们可完成从渲染文本到管理虚拟列表、延迟加载模块和延迟渲染等一切事情。Twitter Lite 支持 42 种语言，并使用全球化来传递本地化的数字、日期和信息。

为性能而设计

每月有数亿人访问 mobile.twitter.com 。 当你的连接是低速率的、不可靠的、受限的或昂贵的时，我们希望 Twitter Lite 成为使用 Twitter 的最佳方式。我们已经能够通过一系列增量性能改进（称为 PRPL 模式）和通过使用 Android 上的现代浏览器（例如 Google Chrome ）的新功能实现加速和可靠性，其中包括Service Worker、IndexedDB、Web App Install Banners 和 Web 通知推送。

可用性

Twitter Lite 具有网络自适应性。为了连接地球上的每一个人，我们需要在慢速和不可靠网络的情况下连接人们。当网络可用时，无论网络情况如何，我们都会使用服务工作者（Service Worker）通过重复访问以启用临时脱机浏览和即时加载。服务工作者缓存 HTML 应用程序的 shell 和静态资源，以及一些流行的表情符号。当脚本或数据加载失败时，会提供 “重试” 按钮，帮助用户从故障中恢复。总而言之，这些改变可以改进可靠性，并能够在可重复访问时显着提升加载和启动时间。

增量加载

Twitter Lite 在大多数设备上通过 3G 网络交互的时间在 5 秒以内。世界上大多数人都在使用 2G 或 3G 网络；快速的初步体验是至关重要的。在过去3个月中，我们将平均载入时间缩短了超过 30％，并将 99% 的交互时间延迟降低了超过 25％。为了实现这一点，APP 流将初始的 HTML 响应传递给浏览器，在服务器构建应用程序初始状态时通过发送指令来预先加载关键资源。通过使用 webpack，应用程序的脚本被分解成细粒度并按需加载。这意味着初始加载只需要加载屏幕可见区域所需的资源。（如果可用，服务工作者将预缓存其他资源，并允许通过即时的 future 导航到其他屏幕）这些更改允许我们逐步加载应用程序，以便使用者可以更快地使用和创建推文。

Rendering-渲染

Twitter Lite 终结了耗时渲染工作。 虽然我们已经小心优化了组件的渲染性能，但 Tweet 是一个复杂的复合组件，并且渲染无限的 Tweets 列表需要额外考虑下的性能问题。我们实现了自己的虚拟化列表组件; 它只会渲染那些在视口中可见的内容，并使用 requestAnimationFrame API 增量地渲染多个帧上的条目，并保留跨屏幕上的滚动位置。 通过使用 requestIdleCallback API 将非关键呈现推迟到空闲时段，可以进一步改善可感知的性能。

Data usage-数据使用

默认情况下，Twitter Lite 可以减少数据的使用，提供较小的媒体资源，并依赖缓存的数据。 我们已经优化了图像，以便在滚动时间轴时将其对数据使用的影响减少多达40％。“节约数据（data saver）”模式进一步减少数据使用，通过使用小的模糊的预览替换 Tweets 和 Direct Messages 中的图像。 图像的 HEAD 请求使得我们在按钮旁显示其大小，以便按需加载。 而相当于我们的本地应用程序的大小为1-3％的情况下，Twitter Lite 只需要一小部分设备存储空间。

设计系统和迭代速度

提高我们的快速迭代能力有助于保持高品质的用户体验。我们很大程度上依赖于 flexbox 的布局以及一个小的、固定数量的颜色，字体大小和长度。 Twitter Lite 是由基于组件的响应设计系统构建的，允许应用程序适应任何形式。 使用 UI 组件帮助我们建立了设计和工程之间的共享词库，这能够鼓励快速迭代和重用现有构建块。我们最复杂的一些功能，例如混合内容的时间轴，可以从30行用于配置和连接 Redux 模块到 React 组件的代码中创建。

展望未来

在这个规模上构建一个快速的 Web 应用程序，并保持快速，这是对 Twitter 中多个团队的设计师、产品和工程师的重大挑战。我们对已经取得的进展感到很欣慰，并尝试使用 HTTP/2、GraphQL 和替代压缩格式，以进一步减少加载时间和数据使用量。在接下来的几个月中，我们将会对 Twitter Lite 的可访问性、安全性、设计、功能和性能进行更多的改进。