×

Rotterdam

Benjamin Franklinstraat 513
3029 AC Rotterdam

Building Sketch Mirror

May 19th, 2016

For the past months, we’ve been working on Sketch Mirror: the preview tool for Sketch. Sketch previews your artboards on Mirror iOS App. The latest version of the iOS App introduces some features that might sound small, but had a large impact on the development team.

Sketch will not only send the current artboard image to the client, but all artboard images that exist in the document. They are queued to be rendered and sent, so that a visual overview of all artboards can be created on iOS. This introduces a significant complexity increase.

Queueing priorities

All images inside a Sketch document need to be rendered on the Mac first, before they can be previewed on an iOS device. This can’t be done all at once, so we use a queue to render them one by one. When you open a document, this queue will be filled with every artboard image. Each image can be assigned a priority. For example, the current selected artboard will get the highest priority in the queue. The iOS App can request additional increased priorities for artboard images. This is used for current, additional images on screen. When an artboard changes, a certain area within the image will be re-rendered and placed in the image queue. An image-update like this has a dependency on the original full-image update. Multiple image updates get squashed in the image queue. This way, we can deliver a continuous stream of full-blown artboard images, without any loss of pixel quality.

Communicating between processes

Connecting to external devices introduces some theoretical vulnerability risks. For example, it’s possible that delivered packages aren’t in the format that they’re supposed to be. This might be an external bug, but can also be intentional by hackers. There are also developers that build software on top of private Sketch APIs. When we change these private APIs, this software will crash Sketch. In order to make the Mirror integration as reliable as possible, we chose to run it in a separate process on OS X. Sketch is responsible for communicating any document changes and rendering, while the Sketch Mirror Helper process is responsible for discovering Mirror clients and communicating with them. When something goes wrong and the communication process crashes, the user will hardly notice anything. Sketch won't be affected at all. The process automatically relaunches and reconnects to the clients.

To learn more about running code in a separate OS X process and communicate with it, make sure to read this great article from objc.io about XPC. Read our showcase for more information on Sketch Mirror.