如您需要技术咨询、解决方案定制、故障排除、运维监控等服务,可联系ericwcn#at#163.com。

同行越做越复杂,聊聊我们简化版Twitter的架构:仅原生版3%大小

系统架构 立杰 181℃ 0评论

导读: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 的辅助功能,安全性,设计,功能和性能进行更多的改进。

相关链接

  1. 英文版:https://blog.twitter.com/2017/how-we-built-twitter-lite
  2. https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  3. https://developers.google.com/web/fundamentals/performance/prpl-pattern/

转载请注明:知识库 » 同行越做越复杂,聊聊我们简化版Twitter的架构:仅原生版3%大小

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址