[Windows翻译]构建我们桌面应用程序的未来

730 阅读13分钟

原文地址:engineering.atspotify.com/2021/04/07/…

原文作者:

发布时间:2021年4月7日

image.png

在过去的几年里,我们一直致力于通过为桌面应用程序和网络播放器创建一个单一的桌面UI来实现Spotify客户端的现代化。

我们无法用旧的设置为我们的用户建立我们想要的一切,所以我们决定做一些事情。

一开始,有两个客户

在2018年底,我们的团队是最近建立的网络播放器以及Spotify的桌面客户端的所有者。桌面是我们丰富的、全功能的体验,而网络播放器是一个更轻、更简单的体验。

因为网络播放器是用现代的React应用架构实现的,我们成功地让新的工程师加入到网络播放器的代码中。但是这些工程师在使用桌面客户端时遇到了困难,因为桌面客户端使用了非常多样化的网络技术(感谢康威法则)。由于必须在不同的复杂程度上两次实现许多功能,同时处理上下文切换,我们没有以我们希望的速度推出新功能。

此外,我们的客户中也存在着需要解决的可访问性问题。我们发现,使我们的网络播放器具有可访问性将是一个困难,但可以实现的挑战。相比之下,让桌面应用程序实现无障碍,几乎是不可能的。

我们就如何解决这些问题进行了多次讨论。团队认为,将客户端融合到一个单一的代码库和用户体验中是最好的办法。我们考虑了几种方法,并做了技术高峰测试许多想法--组件共享、功能共享--总是试图在解决我们的技术债务问题和继续改善我们的用户体验之间找到正确的平衡。

我们知道我们正在进行一个长期的项目,所以我们最大的优先事项是降低交付风险,避免将我们自己困在一个大爆炸的重写中。我们确定了一个大胆的解决方案:专注于在现有的Web播放器代码库的基础上进行迭代,直到达到桌面级的功能集。由于我们的网络播放器是持续部署的,我们可以通过真实的用户来运送和测试为实现我们的最终目标所做的每一个改变。

当然,也有风险。桌面版的用户比网络版多得多,而Spotify的桌面版客户端是大多数Spotify "高级用户 "的家。我们知道我们将有很多工作要做,以使我们的网络播放器达到这些高级用户的严格标准。

现在,在2021年初,我们已经为我们的两个客户创建了一个可维护的代码库,具有我们希望的高标准的可访问性和开发速度。

让我们更详细地谈谈我们是如何将想法变成现实的。

image.png

一个用户界面,多个容器

Spotify桌面客户端是一个Windows和Mac的本地应用程序,它使用CEF(Chromium Embedded Framework)来显示基于网络的用户界面。今天仍然如此,但对于上一版本的桌面,客户端中的每一个 "页面 "都是作为一个独立的 "应用程序 "在其自身的iframe中运行。这种架构旨在促进自主性,允许多个团队--以及潜在的合作伙伴--拥有功能的开发和维护。然而,最终,一个团队开始负责整个应用程序的用户界面。

image.png

以前的桌面客户端的架构(简化)。应用程序中的每一个页面都将在一个iframe中被沙盒化,并以不同的方式构建。UI将通过本地容器访问后端。

以前版本的桌面客户端有很多优点,包括Spotify最初的 "杀手锏",即听众一点击就可以开始播放。它还拥有一套全面的功能,我们知道Spotify的听众很看重。但是,与此同时,这种架构也给开发者带来了严重的摩擦。

然而,网络播放器的代码库被认为是一个更坚实的基础。它允许我们快速开发新的功能。它在开发时考虑到了网络,这意味着它体积小,性能好,并能在各种浏览器上运行。客户端是连续交付的,允许变化几乎立即到达用户手中。于是,我们决定将网络播放器作为网络播放器和桌面之间共享的单一用户体验的起点。我们遇到的主要挑战之一是,这种方法要求我们将Web Player用户界面与桌面容器一起交付和运行。

网络播放器也与我们的网络服务器紧密相连,所有的数据和认证都依赖于它们。网络播放器使用的播放系统与桌面不兼容。认证的工作方式不同--我们需要在网络播放器上支持我们的网络OAuth登录,在桌面上支持我们的本地登录。Desktop也需要其用户期望的功能,如下载和离线播放,而这些功能是Web Player不支持的。

这种在两个相似但不同的基础设施上运行相同的用户界面的概念是我们开发的架构的依据。为了保持用户界面的不可知性,我们建立了TypeScript平台API,将不同的数据来源和不同的播放堆栈抽象化,并向用户界面提供关于哪些功能可用的有用信息。我们还沿途用TypeScript重写了整个客户端,因为我们正在一点一点地重建这种体验。

虽然在我们团队之外做了一些工作,使某些类型的数据可以通过网络获得,但我们专注于将网络播放器不仅与网络服务器解耦,而且与任何硬编码的依赖关系解耦,使其在普通浏览器中运行。

最终的架构看起来像一层平台API,将底层的Spotify生态系统暴露给客户,有一个基于React的用户界面,平台API通过React Hooks暴露。因此,新的用户界面可以在网络上运行,也可以在我们的桌面容器中运行,而且永远不知道,也不关心,数据是来自我们的C++堆栈还是我们的网络基础设施。

image.png

网络播放器(左)和桌面(右)客户端的新架构。UI被构建为一个React应用程序,通过我们的GraphQL和Web API服务到达后端,在某些情况下,由于其性能和能力的提高,通过本地桌面API实现。

有了这个架构,团队的速度开始迅速增加。我们增加了下载、离线模式、本地文件、歌词、"正在播放 "队列,以及高级功能,如播放列表和专辑的排序和过滤。在短短一年多的时间里,新的共享用户界面包括了原来桌面客户端的所有功能,而且在某些方面实际上更加先进,包括以前只在移动客户端上看到的功能。

image.png

image.png

新旧对比:自项目开始以来,网络播放器的用户界面有了长足的进步。

解决组织上的挑战

从我们决定新的桌面客户端的产品策略的那一刻起,我们就开始着手解决工程上的挑战--但也有组织上的挑战:我们如何才能在合理的时间内真正实现这一目标,而不放弃需要继续进行的日常 "正常业务 "工作?

我们还必须解决一个巨大的信息缺口。现有的桌面应用程序中的哪些功能必须在新的应用程序中实现?新的客户应该是什么样子的?几乎是在第一时间,设计和产品洞察团队开始调查我们的用户是如何使用我们的软件的,这样我们就可以制定一个路线图,以便能够发货。

同时,我们创建了一个由几个团队的工程师组成的小型 "虚拟团队",开始了最初的工程实验,并回答一些基本问题。所期望的解决方案是否可能?它实际上需要多少工作?这个虚拟团队的首要任务是让网络播放器在桌面容器内运行,就像现在这样。他们将解决播放和认证的问题,探索用户界面如何与容器捆绑,并为项目的其余部分制定工程蓝图。该团队得到了Spotify内部其他团队的帮助,创建了一个可以在具有不同功能的多个平台上运行的单一用户界面--例如,电视。由于之前为融合客户所做的努力,这两个代码库共同位于同一个单体中,这是促进这项任务的关键。

三个月后,团队的工作圆满结束。我们确立了我们的路线图和优先事项,我们清楚地知道我们在未来一年里要做什么。这需要我们更广泛的团队中的每个人全力以赴,并不断进行测试和分析,以确保我们走在正确的道路上。

实际上,这个项目之所以能够实现,是因为我们的工程、设计和产品管理团队致力于设想一个工程师能够快速迭代的产品,并且能够完全支持Spotify的愿景。在向用户发货之前,我们不得不比我们希望的时间更长的迭代,但团队能够在新的共享用户界面中实现这些功能的速度给了每个人信心,我们正朝着正确的方向前进。

评估成功

在这个项目开始时,我们有四个主要目标:使我们的代码可重复使用,统一我们的用户体验和视觉设计,提高速度以更快地交付,并在满足桌面和网络播放器用户的需求的同时做到这一切。随着项目结果的出炉,我们在这些指标上的表现如何?

image.png

1. 重用性

在多个客户端(即网络播放器和桌面)中重复使用相同的代码,使我们能够一次性编写代码,并在多个地方获得好处。当我们需要实现一个设计变更时,在一个地方进行变更并将其传播到所有的接收端点会更有效率。我们希望在未来扩大我们的重用性,与更多的客户分享我们的平台API。

2. 统一性

用户体验和视觉设计是一个应用程序中重要而又耗时的改进领域。因此,拥有一套服务于多个客户的组件可以确保我们能够更彻底地实现设计,从而改善用户的体验。

最关键的是,我们已经能够与Spotify生态系统的其他部分实现一定程度的统一,将我们的客户转移到Spotify的共享设计语言。其结果是,当用户在移动和桌面之间切换时,有了更一致的体验,同时也为每个人提供了更现代、更有代入感、更方便、更面向用户的体验。

3.速度

这个项目的一个重要理由是,一个具有单一的、易于理解的架构的现代化代码库将提高我们作为工程师的速度。虽然我们需要更多的时间来最终证明长期的成功,但自项目开始以来,团队已经完成了大量的功能,这是一个积极的指标。然而,速度仅仅是一个结果--有明确目标的工程师与健康的代码库一起工作的结果。我们从测试覆盖率、可维护性、可读性以及代码易于删除等方面来衡量代码的健康程度。我们选择的架构在使UI编码更简单、更容易被开发人员理解方面有意想不到的好处,因此我们希望这个平台能够成为我们在未来几年内的坚实基础。

4. 满意。满足桌面和网络播放器的用户需求

新的体验是以Spotify用户为中心开发的--包括现有的桌面强大用户,以及来自移动应用的新用户或完全陌生的Spotify生态系统。从一开始,我们就一直在评估和测试我们每一步的进展,以确保我们提供的体验能够满足用户的需求。在过去的一年里,我们进行了广泛的用户研究,并进行了持续的测试,这些都让我们知道了我们应该采取的方向。我们使体验比以往任何时候都更容易获得,因此每个人都能享受到使用该应用程序的乐趣。

我们正在密切关注收到的反馈意见,并不断塑造应用程序以满足用户的需求。新的架构让我们的行动更快,用户可以期待客户端比以往更快发展。

作为一个用户,这一切对你意味着什么?

作为一个使用Spotify桌面客户端或网络播放器的音乐听众,我们希望这感觉是一个全新的体验,但所有您使用和喜爱的功能仍然存在。你会注意到一些新的功能,你可能已经在移动端的Spotify上看到了,也是第一次出现。

随着时间的推移,你会开始注意到全新的功能更频繁地出现,使你的音乐和播客的体验更加美好。对我们来说,新桌面的推出并不是结束。这只是一个新的开始,因为这个应用程序是Spotify的起点。

这是你要的吗?加入我们吧!

想加入我们的团队,建立Spotify的未来吗?请到我们的招聘栏看看是否有吸引你的地方。我们刚刚宣布了我们的 "随时随地工作 "政策,允许员工选择全职在家工作,全职在办公室工作,或者两者结合。

向所有为这个项目做出贡献的人致敬,特别是菲利克斯-布鲁斯、彼得-约翰森、阿尔贝托-努涅斯-阿科斯塔、吉多-凯瑟斯、特里格维-吉尔法森、克雷格-斯彭斯、卢卡斯-伦西纳斯和艾玛-博斯蒂安。


通过www.DeepL.com/Translator(免费版)翻译