今天，我们宣布推出新的 Twitter.com，这是一个酝酿多年的项目。现在，我们想带你深入幕后，让你得以窥视新Twitter.com的构建都需要什么。这有什么新鲜事吗？为什么我们对此如此兴奋？这对 Twitter 网站的未来又意味着什么呢？

在接下来的几周内，我们将分享一系列博文，探讨新网站架构背后的思想，以及我们如何为所有使用 Twitter 的用户提供响应式的体验。我们将分两部分介绍 Twitter.com 网站的构建过程：更快的是，看看我们如何思考系统的设置，使 Twitter.com 性能更高、效率更高、体验更丰富，深入挖掘我们添加的功能，让我们的网站更具沉浸感。

新界面

Twitter 的目标之一，就是接触到世界各地的每一个人。Twitter 的 Web 应用就是实现这一目标的关键。它们无需安装，世界上几乎所有连接的设备都可以立即访问。开放的 Web 具有无与伦比的可发现性和可达性。然而，由于我们庞大的用户群和他们使用的各种设备，Twitter Web 团队发现很难兑现将 Twitter 的功能带给网上每个人的承诺。

我们尝试了几种方法来修复出现的问题，但发现其中许多方法都是源于旧的架构决策。最终，我们决定采用一种全新的方式：从头开始重建 Twitter.com。我们知道，我们正在进行的是一项艰巨的任务：重写 Web 上最大的网站之一。像这样的大规模迁移是有很大的风险，而且很难决定。尽管如此，我们还是成功地获得了所需的支持，并开始着手重新打造新的 Twitter。

我们的首要任务之一是，统一我们的移动和桌面的架构，利用响应式设计是我们的既定方针。然而，与传统的响应式设计不同的是，我们着手创造的并不仅仅对设计和屏幕尺寸做出响应的东西。

我们的目标是创建一个代码库——一个网站——能够为每个人提供尽可能最好的体验。

许多公司都有一个桌面站点和一个单独用于移动 Web 设备的站点。这样做的好处是更轻便的移动代码优势，这意味着手机流量有限的用户可以更快地获得他们所需的核心体验。这种方法的缺点是，它需要多次编码功能，并阻止移动用户访问产品的全部功能。

在 Web 开发方面上，我们信奉“一次编写，随处运行”的哲学理念。我们在新的 Twitter.com 上使用的技术和技巧意味着你只需在需要时才下载并运行代码。因此，移动用户并不会下载你在主页上看到的那个侧边栏，也可能不会下载设置页面，直到他们去更新自己的显示名称。然而，这也意味着如果他们想要访问网站，仍然可以使用该网站的全部功能。

一句话，我们对这个新网站的目标有两个：

使为世界各地的人们开发新功能的过程更轻松、更快捷。
为每个人和每个设备提供正确的体验。

这种方法的好处是巨大的。在 2018 年，我们用新的 Twitter.com 取代了我们的 Windows UWP 应用，这是一个渐进式网页应用（Progressive Web App ，PWA），这意味着该应用与桌面网站使用相同的代码。我们为桌面开发的每个新功能，都可以在所有其他客户端上使用：Windows 应用、Twitter Lite 和我们的 KaiOS 应用。

我们现在可以为每个特定用户提供每个组件（或站点的一部分）。例如，通过一个统一的站点，我们现在可以为需要它的任何人提供数据保存功能。许多人为他们使用的每兆字节的数据付费，不管他们是在手机上使用，还是在家里的大屏幕桌面上使用。虽然数据保存程序看起来像是手机的一个功能，但实际上，它是一种计量或慢速连接的功能。

即使是简单的 UI，它的能供性（affordances）也可以根据用户的需要进行修改。例如，键盘快捷键对于触屏手机用户很少有帮助，但对于使用键盘的平板电脑用户来说，它们就像在全尺寸桌面一样方便。

译注： affordances，承担特质，或称环境赋使、缺省用途、可操作暗示、支应性、示能性等，指一件物品实际上用来做何用途，或被认为有什么用途。也就是说在物品的某个方面，具有让人明显知道该如何使用它的特性。例如门提供「打开」的功能，椅子提供「支撑」的功能。人们得知如何使用物品有一部分来自认知心理学，另一部分来自物品的外形。affordance 在中文中是否翻译成“能供性”会比较易于了解。“能供性”的意义为物体所具有的物理特性以及我们所理解该物体可使用方式间的关系，其最主要的核心概念是物体的特性决定了行为的可能性。因此，当我们检测到键盘时，就会启用这些快捷键。

我们为迄今为止所取得的成就感到自豪，我们相信，对于 Twitter 的未来，我们现在所做的准备比以往任何时候都要好：一个人人都能参与公共对话的地方。

作者介绍：

Charlie Croom 和 Gregory Baker 都是 Twitter 高级软件工程师。

原文链接：

Building the new Twitter.com

创作场景

如何构建一个新的 Twitter 网站？