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

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

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

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


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

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

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

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

出于这个原因(以及我们在下面将进一步探讨的许多其他原因),我们希望将渲染 Sketch 文档预览的责任从 Mac 应用程序中移除。答案是渲染农场——一组服务器,它们接收您的文档、处理它并尽快生成您在 Web 应用程序中看到的预览。

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

为什么要构建渲染农场?

最早版本的 Sketch for 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 与 AI

一段时间以来,我们一直在思考 AI 对 Sketch 的意义。 以下是我们可能使用它的方式,我们永远不会使用它的方式,以及指导我们思考的内容。

免费试用 Sketch

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

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