“When working on a large mural with a lot of content and multiple collaborators at the same time, MURAL would become slow” — Unhappy User 😩
By Q4 2019 we decided that it was time to tackle the most common complaint from MURAL power users: input latency. Input latency is that slowness felt by collaborators when they can perceive a time gap between their input and what they see on their display. It’s also called responsiveness — or just “lag.”
We found out that the old rendering engine was not being able to render big murals (those with thousands of elements) fast enough to avoid having the user perceive some slowness.
In order to attack this problem, we had to identify the root cause of it.
What is the rendering engine?
The rendering engine is a key component of the MURAL platform. It is the component in charge of drawing on your screen the content of a mural — i.e. stickies, images, diagrams, files, drawings, arrows, frameworks, areas, everything. The rendering engine must also react to user input (mouse, trackpad, keyboard), moving content when panning or dragging and scaling it when zooming.
In order to make MURAL more responsive to the user and boost performance, we rewrote the whole rendering engine in a different technology, and moved from a DOM rendering engine to a Canvas2D rendering engine, something that allowed us to perform more optimizations — though at the cost of having to deal with more complexity (more on this in a moment).
After nine months of hard work, MURAL’s new rendering engine — an incredible piece of software — has been released for general use and is already adding value to our members. The best part? We managed to make a seamless transition from our old rendering engine to our new rendering engine.
Now, when collaborators open an existing MURAL, they won’t notice any difference in the look of their murals — what they will notice is a big performance boost! We’ve supercharged zooming and panning in a mural, and improved performance when a group is collaborating together. That pesky lag you sometimes experience will now be reduced, and your team will be able to collaborate seamlessly.
While the new MURAL experience will feel seamless “under the hood,” building the new rendering engine was a huge technical challenge.
How did we make it? Here’s where we started.
In a very, very simplified way, the “old” MURAL web app consisted of four key parts:
- Input: Every user interaction, whether a click or a scroll or a zoom or pan (using either the mouse, the trackpad, or a touch screen).
- User Interface: Everything that is drawn in the browser. This includes topbars, toolbars, and editors. It also includes each element contained in the mural. The browser uses the DOM to draw everything (basically using HTML and CSS). It reacts to input and communicates this to the Canvas Business Logic.
- Canvas Business Logic: This is the brain of the mural. Here is where the app decides how to react and behave on each input. Creating elements, duplicating, undo/redo, move mode, or shortcuts and more, this layer knows how everything should work and how to present it on the screen. Every change is saved through communicating with our servers. The Canvas Business Logic also receives the collaborator’s changes to present it in the UI.
- Realtime + MURAL servers: This is everything that connects the web client with the “outside.” The realtime web sockets let us know what other online members are doing. The servers save all the changes you are doing.
What changed from old to new?
Okay, so now to the cool part. You might see the difference from the “old” MURAL web app already. There is a new component: the Canvas2D rendering engine.
What’s the Canvas2D rendering engine? This new app layer’s only objective is to render the mural (each element) in the most performant way possible, making a basic interaction like panning and zooming as fast as possible.
Why did we stop using the DOM rendering engine? Even though rendering everything using the DOM is a plausible solution (it is what we did until now and what most web apps do), we found out after many attempts that the browser can’t handle a DOM tree that is so dense and changes so often. The DOM was saturated. And a saturated DOM starts to lag.
Why is the Canvas2D rendering engine better? Canvas2D technology is optimized for drawing pixels. This type of solution is what is frequently used for video-games or draw-intensive applications. This engine allows us to optimize what to draw, when to draw it, and how to draw it, enabling caching and optimizations that were just impossible with the DOM.
What’s left out of the Canvas2D rendering engine? We only left out the interactive interfaces — like toolbars, buttons, and editors — since the browser DOM is optimized for those functions.
Oh, and one more thing: We now also have an automated testbed to alert us if, in the future, any change or addition to our product might impact the performance of the rendering engine. Now, we have a way to ensure we always provide a fast, robust, and stable experience. We want to make sure our engine stays fast — and even gets faster over time. This automated performance testing framework includes 300+ tests simulating user inputs under different conditions, scenarios, browsers, hardware, and mural configurations. It also tracks and measures evolution over time.
The results — faster by up to 80%
So how did we do? For one, the worst-case scenario improved by 80%. 💥 Now, in some scenarios, performance is close to 60 FPS (frames per second).
Next time you load up a mural, you won’t be able to ignore the performance boost from the new rendering engine — it has a massive impact that we’re so excited for you to experience. 💪
Customers are raving about the new rendering engine:
“It’s smooth like butter.” 🧈
— Robert Skrobe, Dallas Design Sprints
“The new engine is faster than the speed of light!” 💡
— Lisa Weinsberger, [Remote] Design Sprint & Innovation Facilitator
This is not the finish line.
As far as performance of our web app is concerned, the new rendering engine is a major leap forward. There are still more performance improvements coming, too! The team is continuously identifying and implementing ways to improve the performance daily. Every little bit helps. So expect even better responsiveness and loading times in the near future.
Finally, this new engine opens up the door to a number of technological improvements that will eventually benefit every MURAL user. Things like touch-enabled input management for touch displays and mobile phones — for example, soon you might be able to use your fingers or a compatible stylus to draw in a mural. You can also look forward to improved look and feel for mural elements, more polished animations, and improved export functionality.
We’ve been busy making MURAL better. The new rendering engine was one of many other product improvements we just released this last month. Go read about the rest here.
About the author
About the authors
