The main problem with this solution was that if you toggled a layer that was covering a significant part of the design, the local rendering could take up to 10s and occasionally even freeze the app. Since the task wasn’t split into more threads, the user couldn’t interact with the app until the call was finished.Ī “quick fix” for this issue was a hybrid rendering architecture that pulled the design preview from the server while enabling local rendering for smaller design adjustments like toggling layers, so we wouldn’t have to download an utterly re-rendered design preview (a PNG or WebP around 5MB). Whenever you opened a design in Avocode or requested a rendering change by toggling layers, the rendering task was one - often very long - synchronous call. This means that when a user requests an action, a single threaded task needs to be finished before it’s possible to continue working in the app The main weakness of web technologies such as JavaScript is the single threaded environment. This is possible thanks to web technologies (React.js, Node.js, Electron) which naturally come with certain limitations. The challenge of web technologiesĪs pointed out, in the beginning, we need Avocode to run everywhere. In short, we needed something more elegant. For example, at 4x scale we would need to render16x the amount of pixels and downloading such a bitmap would significantly decrease the app performance. Generating more bitmap previews at higher scale already on the server would be a brute force fix. When you zoomed above 100%, the design would become pixelated. When you opened the design file on the client, Avocode would download the Octopus file (JSON object), bitmaps from the design, and also a rendered preview of the design.Īll of it needed to happen before you could start inspecting layers.We parsed its data structure and translated it to our universal design format Octopus so we could render it on any platform.Your design file was uploaded to the server.Until the 3.7 update, this is what would happen with every design you imported to Avocode: After we hit 99% design rendering precision across a sample of thousands of design files, we started to look more into a smooth zooming and rendering performance. Our priority when building the rendering engine was precision. This brought in a wave of designers, stakeholders and agency clients who care very much about how crisp the design looks. However, this changed rapidly as Avocode has become more of a design file hub for teams, where you can not only inspect, but also store files with version history and discuss design feedback. As long as the exported assets were rendered correctly, the design preview didn’t have to be crystal sharp after going over 100% zoom. In the beginning, Avocode was a developer-first tool that would help you inspect the design - get specs, code, and assets. When you zoomed in on a design file, it would become pixelated, since we have rendered the design only at 100% at 1x. Up until now, the design canvas in Avocode behaved similarly to the bitmap image editors like Photoshop. The new Avocode is finally powered by design processing and rendering that happens locally in the app and the reworked Monroe rendering engine that works like other vector-based design tools such as Sketch, Figma or Adobe XD. With that in mind, it’s our great pleasure to introduce you to Avocode 3.7 - an update that has cost us the most time, sweat, and merge requests to date. Would we start such a project again if we could travel back in time? Not sure.□ Building this machine was quite a challenge. No really, it’s a design parsing technology combined with the Monroe rendering engine, written in C++ and compiled to WebAssembly via Emscripten, so the engine works on the server as well as on the client. Designers and developers work with all kinds of tools on all types of platforms, so a proper design hand-off tool needs to work with all primary design tools (Sketch, Adobe XD, Photoshop, Illustrator and Figma) and on all platforms (macOS, Windows, Linux, and the web).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |