跳过导航
An illustrated image of a cloud to signify the render farm
Sketch 内部

Sketch 内部:将文档保存到云工作区时发生了什么

了解我们的渲染农场如何减轻 Mac 的负担,并使云工作区上传速度更快、更可靠

您可能每天都会多次处理存储在云工作区中的 Sketch 文档。但是,当您实际点击保存时会发生什么?在本文中,我们将深入探讨我们开发渲染农场的原因,以及它如何在将文档上传到云端时处理繁重的工作。


去年,我们着手改进将文档上传到云工作区的方式,并使该过程对每个人都更快、更高效。我们还考虑了如何提供新功能,例如开发者交付实时协作。我们的解决方案是构建我们自己的渲染农场。

等等,您说的是“渲染农场”?

是的,您没看错。在过去的 12 个月里,我们一直在使用渲染农场处理您的文档,以便它们可以在 Web 应用中进行查看、检查和资源导出。

在此之前,每当您将文档上传到工作区时,Mac 应用都需要先在您的计算机上渲染每个页面、画板和符号源(以1x2x)。然后,Mac 应用会对所有这些图像进行哈希处理,并开始将其上传到 Web 应用,以便您可以在浏览器中查看文档。可以想象,每次点击保存时上传文档和一堆图像并不是一个快速的过程。

因此(还有许多其他原因,我们将在下面进一步探讨),我们希望将 Sketch 文档预览的渲染工作从 Mac 应用中分离出来。答案是渲染农场——一个服务器集合,它们接收您的文档,对其进行处理,并尽可能快地生成您在 Web 应用中看到的预览。

但是为 Sketch 构建渲染农场并非易事。我们的渲染引擎构建在 Apple 的技术之上,这意味着它需要在 macOS 服务器上运行。此外,为了有效地执行,我们需要构建一个能够并行渲染数百个文档的协调系统。

为什么要构建渲染农场?

Sketch Web 版的第一个版本仅仅是为了帮助您通过链接与他人共享文档。然而,这仅仅是一个起点。我们的真正目标是改进 Sketch 的协作。为此,我们需要 Sketch 文档真正驻留在服务器上。这不仅可以减轻 Mac 的渲染工作负载,还可以帮助浏览器深入了解 Sketch 文档。

这对我们来说是一个重要的目标,它使我们能够开发一些令人兴奋的功能。第一个是在浏览器中进行开发者交付,它使开发者能够检查设计的任何部分,以及选择下载他们所需的精确资源——包括扁平化的符号。现在,他们无需打开 Sketch 文件即可了解其构建方式。

如果没有渲染农场,这一切都将是不可能的。但这仅仅是第一步。最终,我们希望在服务器上的 Sketch 文档中做真正具有创新意义的事情——例如在我们的原生 Mac 应用中进行实时协作。为此,我们的服务器端系统需要一个“Sketch 大脑”。

构建具有 Sketch 智能的渲染农场

我们希望我们的渲染农场表现得像一个“黑盒”。API 获取输入——一个 Sketch 文档——并将其推送到渲染农场,渲染农场将其转换为输出——出现在 Web 应用中的图像和其他有用的元数据。与此同时,我们的其他服务不需要知道输入和输出之间发生了什么。

我们还希望我们的渲染农场成为一个分布式系统。渲染农场 API 将每个文档推送到渲染队列,然后众多 Mac 服务器之一会拾取任务(同时执行其他渲染任务)。系统监控渲染任务的持续时间并进行负载均衡,以最大程度地减少渲染延迟。而且,当我们配置新的服务器时,它们可以无缝地融入整个系统。

我们使用Go编写了渲染农场,然后将 API 部署到 AWS,并将代理软件部署到一小批安全托管的 Mac mini 上。因为我们使用的是 Mac 硬件,所以我们可以运行sketchtool命令行界面——每个 Sketch 版本中都包含的相同界面。这意味着我们的渲染农场和 Mac 应用使用相同的渲染引擎,因此当我们的工程师为 Mac 应用添加新功能并提高性能时,渲染农场也会从中受益。

我们选择 Go 的主要原因之一是它允许我们交叉编译我们的代码。这意味着我们可以在 Linux 托管的渲染农场 API 和 macOS 托管的代理进程之间共享功能。Go 也被证明是非常高效的,并且可以轻松利用其简洁易懂的并发方法。我们还希望 Go 1.16 能够让我们为 ARM 上的 macOS 编译软件——这将使我们能够利用M1 芯片的强大性能提升

我们今天如何上传和渲染文档

就文件大小而言,Sketch 文档本身通常很小(除非它们包含大型嵌入式位图图像)——即使是包含大量画板和符号的文档也是如此。文档上传到服务器通常是即时的,并且由于渲染农场的存在,您的计算机不再需要在上传 Sketch 文档之前进行任何密集的渲染。相反,Sketch 只需上传文档本身,渲染农场会处理其余工作。

此高级流程图说明了从您在 Mac 应用中保存文档到它在 Web 应用中准备查看之间发生的事情。

A flow chart showing the process that takes place when you save a document to your Workspace — including the work the render farm does to handle the input, render the image, and push the output back to the web app.

正如我们预期的那样,这个新流程大大缩短了上传时间,并且对于网络连接不稳定的用户来说更加可靠。渲染农场还使用与任何给定文档兼容的最新版本的渲染引擎——即使您是从旧版本的 Sketch 上传的。因此,您仍然可以利用 Web 应用的最新功能,例如浏览器中的开发者交付和资源导出。

在过去的一年中,渲染农场已证明自己是一项可靠的服务,并且继续帮助我们模糊 Mac 应用和 Web 应用之间的界限。这对我们来说是一个重要的目标,因为快速、可扩展的渲染农场是我们 Mac 应用中新的实时协作的重要基石。我们对实时协作的实现将实时地将您的更新流式传输到 Web,使我们的服务器端系统能够更好地控制它们如何处理这些细粒度信息。例如,我们将能够利用部分渲染来进一步减少处理时间,目标是在您在 Mac 应用中点击保存的那一刻就在 Web 应用中更新您的文档。

这对我们来说是一个重要的目标,因为我们知道快速且可扩展的渲染农场将是我们新的大型云计划的重要组成部分;Mac 应用中的实时协作,让您的团队中的每个人都能使用。

我们的渲染农场数据

说明我们渲染农场成功的一种方法是与您分享一些数据!

Render farm statistics. 300,000 render farm API requests every weekday. Around 55,000 documents rendered every day this year. 240 rendering processes working concurrently. 20 Mac minis working around the clock.

所有数据均为撰写本文时的数据。

我们对渲染农场对 Sketch 未来意味着什么感到非常兴奋——尤其是在它将如何帮助我们改进 Sketch 平台方面。我们现在知道,如果我们可以在 Mac 上做到,那么我们也可以在 Web 上做到。


这是我们深入探讨 Sketch 技术方面的系列文章中的最新一期。您是否有任何特定方面想了解更多?欢迎在 Twitter 上告诉我们。

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 新手,还是回来查看最新内容,我们都能让您在几分钟内完成设置并准备好完成最佳工作。

免费开始使用
免费开始使用