跳过导航
An illustrated image with two three-dimensional windows sitting perpendicular to each other, on a coral-colored background
Sketch 内幕

幕后揭秘:我们如何在原生 Mac 应用中添加实时协作

了解今年 Sketch 最大新功能背后的挑战和技术

今年早些时候,我们推出了 Sketch 中的实时协作,任何人都可以在现有 Sketch 订阅的基础上免费使用。在开发该功能时,我们知道必须有一个单一的真相来源,人们才能有效地协作。 这就是它作为您的工作区的一部分工作的原因,该工作区包含在订阅中。

如果您已经试用过它,您可能对该功能背后的技术如何工作感到好奇,以及我们如何将实时协作集成到原生 Mac 应用程序中。

“实时”的挑战

我们都使用过 Google Docs 等产品,屏幕上飞舞着多个光标和头像。 最终,这就是我们的目标。 但是,实现这一目标的最大挑战绝对是技术性的。 作为一个原生 Mac 应用程序,Sketch 最初是为了处理本地存储上的文档而构建的,因此假设只有您(用户)会打开和编辑文档。

因此,我们不得不重新审视我们的许多代码。 但我们也坚决不想失去使原生 Mac 应用程序独一无二的东西,例如离线工作的能力。 同时,为了让多人有效地协同工作,更新必须几乎立即出现在每个人面前。

A screenshot showing the Sketch Mac app window and the web app in a browser. The Mac app is covering most of the web app, so only the comments on the right-hand side of the window are visible.

实时协作通过您的工作区进行运作 - 一个存储所有文档并邀请人们与您并肩工作的地方。

使实时成为现实

为了克服这些挑战,我们现在会在您进行更改后立即将补丁流式传输到您的工作区 - 无论是移动对象、更改其填充还是其他任何操作。

Sketch 的内部模型一直表示为对象树。 根部有一个文档,然后是页面、组、图层、样式等。 因此,当您进行更改时,此树中的对象会更改属性。 为了生成补丁,我们将文档的旧状态与新状态进行比较,并且补丁描述了在树上到达对象及其更新属性的路线。

由于这些补丁非常小且有针对性,因此冲突非常罕见。 两个人可以同时处理同一个形状,一个人可以更改它的描边,而另一个人可以更改它的填充,并且不会引起任何冲突。 如果更改确实发生冲突? 到达服务器的最新补丁将获胜。

由于这些补丁非常小且有针对性,因此冲突非常罕见。 两个人可以同时处理同一个形状,一个人可以更改它的描边,而另一个人可以更改它的填充,并且不会引起任何冲突。

细节决定成败

虽然来回发送补丁听起来很简单,但正是这些细节使该功能感觉良好。 我们无法在本篇文章中深入探讨所有细节,但这里仅列出了一些我们想要强调的内容。

撤消还是不撤消?

是什么让这个新世界中的撤消成为一个棘手的问题? 好吧,您只想撤消自己的更改,即使其他人正在处理相同的事情。 例如,假设您在文档中移动一个正方形,然后其他人将其变为蓝色。 如果您点击“撤消”,我们希望最终得到一个位于原始位置的蓝色正方形。

这意味着“撤消”不仅仅是“倒退一步” - 现在是“倒退,然后重播来自其他用户的编辑,并发送我刚刚撤消的内容的补丁”。 实际上,我们在推出实时协作之前几个月就发布了此对“撤消”系统的小更新。 希望你甚至没有注意到!

是什么造就了原生 Mac 应用程序

到目前为止,我们已经讨论了理想的情况 - 每个人都在线并且连接稳定。 但是,作为 Mac 应用程序,我们的一些独特优势意味着实时协作的额外复杂性。

作为 Mac 应用程序,我们的一些独特优势意味着实时协作的额外复杂性。

例如,如果您离线工作一段时间(例如在长途航班上),您需要能够在重新连接时再次共享您的工作。 因此,我们使我们的补丁系统足够灵活以处理此问题。 当然,您拥有文档的完整版本历史记录,因此您可以返回到较早的版本,以防您的编辑覆盖了其他团队成员所做的事情。

让您掌控一切

同样,我们让人们可以自由地随时更新他们的 Sketch 版本。 无论您出于何种原因仍使用旧版本,这都是您的 Mac,并且您应该可以控制在其上运行的软件。 对我们来说,这是一个额外的复杂因素 - 我们不能假设每个人都运行相同的版本,并且某些版本可能彼此不兼容。

无论您出于何种原因仍使用旧版本的 Sketch,这都是您的 Mac,并且您应该可以控制在其上运行的软件。

为了解决这个问题,我们现在允许人们在不同版本之间进行协作,只要我们在表示文档的方式上没有根本性的改变。 如果某个版本包含重大更改(例如新的 OpenType 功能),则可能会发生这种情况,因为如果我们有两个以不同方式构建文本图层的版本,则可能会导致问题。

幸运的是,这些更改很少见,以至于我们可以支持长期以来的协作会话。 因此,即使您的团队坚持使用旧版本,您将来仍然可以进行协作。

存在感的魔力

到目前为止,我们已经讨论了如何使用补丁使文档保持同步。 但是,我们还希望在实时协作中包含存在感 - 因此您可以查看其他人的光标和他们的选择,并与您的协作者一起关注。

在我们的第一个内部版本中,没有用于协作的 UI。 来自您的协作者的更改只是神奇地出现了。 毕竟,我们知道保持每个人文档状态的一致性是最大的技术挑战 - 如果我们不能成功实现这一目标,其余的都无关紧要。

老实说? 感觉真的很奇怪。 从这个过程的开始,我们就知道我们需要存在感信息,但是看到该功能在没有它的情况下工作使情况更加严重。 我们开始工作了,很快就给我们在一个意想不到的地方带来了惊喜。

存在感可帮助您在上下文中查看出现的更改,以及与您合作的人员的姓名。

扩展服务器(并 DDOSing 自己)

我们知道,随着越来越多的人开始使用实时协作,我们将通过我们的服务器来回传输大量的存在感数据和补丁。 尽管不是每个人都会在第一天进行协作,但我们必须有一个可以扩展的系统。

因此,我们开始使用广泛的指标来测试该系统,以便从细粒度级别了解我们服务器的性能。 在我们的第一个 Beta 版之后,这些指标表明我们的存在感系统根本无法扩展。 事实证明,人们会经常移动他们的光标 - 谁知道呢?

因此,对于第二个 Beta 版,我们重写了存在感以适应网络的负载。 当服务器负载较高时,我们发送的存在感更新较少,并平滑了更新之间的移动,以避免画布上出现令人分心的抖动。

它工作得非常好,自适应存在感系统启发我们将课程应用到我们与服务器进行大量通信的其他领域。 我们在这里的工作尚未完成,您可以期待将来会有更多的协作改进。


实时协作可能是我们构建过的最大和最具挑战性的功能。 但是,我们非常自豪它现在掌握在您手中 - 我们真的认为在 Sketch 中实时协作感觉很棒。 我们希望您像我们一样喜欢它。

您可能还喜欢

Sketch 内幕

Sketch 和 AI

我们一直在认真思考人工智能对 Sketch 的意义。以下是我们可能会如何使用它、永远不会如何使用它,以及指导我们思考的内容。

免费试用 Sketch

无论你是 Sketch 的新手,还是回来看看有什么新东西,我们都会让你在几分钟内完成设置并准备好做最好的工作。

免费开始
免费开始