New Layers in UXPin – as fast as they come

Staying in line with our UXPin 2.0 initiative our dev team is heavily focusing on delivering a better user experience to all UXPin users. One thing we decided to look through and improve is speed – and our New Layers exemplify this perfectly.

The code behind Layers has been rewritten to ensure that whatever the asset and element load is, your work experience in UXPin does not suffer from stutters or delays. With that said, let us take you on a more detailed, technical journey to exemplify what has exactly changed and how it influences your work.

A detailed performance comparison

Our dev team took the time to run a series of tests on both versions of layers, the old one and the new one. These tests aimed to clearly show what has changed, since visually in the editor it might be unnoticed.

The comparison was done manually using Chrome DevTools with 774 layers in the layers panel – all visible without nesting. On the canvas there were 1482 elements (as counted using document.querySelectorAll(‘.ng-element’).

Drag and Drop

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/09/DragAndDrop_UXPin2-0.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

In the Old Layers, the LayersTree component had to be refreshed with every drag of an element on the canvas. Because of the already complicated structure of layers, it could take about 250ms to 500ms to update depending on the position of an element in the layers tree.

On the other hand, New Layers take a more streamlined approach and due to the simplified structure of the component and a flat structure in redux, the update takes much less time – down to about 60ms. It is also worth considering that much of this time is spent rendering the view.

Scrolling to the end of the layers list

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/09/LayersScroll@60fps.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

With the Old Layers, this action within the parameters of our test took about 15s, with rendering taking a large portion of that time (4s). This was due to lazy-loading, which meant that layers created elements with every scroll.

The New Layers take much less time to scroll through (about 10s), saving you time. The implementation of New Layers assumes that single elements are updated as you scroll and their quantity stays the same.

Selecting the last element in the layers list

Before the change, selecting the last element on the list was very time-consuming as all elements from the layers list would load. As you can see on the screen, this action used to take 1.45s – and this surely got noticed by many of our users. 

New Layers render only visible elements. As a result, selecting the last element is simply much faster. The action itself lasts about 70ms, most of which is rendering.

Comparing Old Layers and New Layers using performance tests

With dragging and dropping elements on the canvas, we also wanted to measure how the frame rate was influenced when working on a large project. With the test parameters described above, the average framerate went up significantly with the New Layers implemented.

The difference is akin to what might be the case of switching off the layers panel with the old system. So the difference when working on large and lengthy projects is clearly visible and it benefits the user experience immensely.

Other improvements that have seen a significant decrease in time are opening the layers panel (a gain of at least 60ms) and selecting elements on the canvas.

With the latter, the time of selecting an element on canvas has also improved. Choosing a group (i.e. an element that is directly on canvas) takes about 300ms less (429ms vs 733ms) and is only 100ms longer than with a closed layers panel. Selecting the input (i.e. the element which is nested) takes around 300ms less (586ms vs 864ms) and is only around 100ms longer than with closed layers panel.

This change signifies what we consider to be UXPin 2.0 – a long hard look at what we can improve to make your experience better. If you want to learn more leave an email and we’ll keep you up to date.