Angular Material performance problems

Angelo Raso — Thu, 25 Feb 2021 20:25:49 +0000

In the last article we created a card grid with the angular material scrolling help. Although the result was as expected, things began to get complicated.

Requirements:

Minimal knowledge of angularJs and Angular is expected, including javascript and typescript.

Sponsors:

This article has been created thanks to Anura's support.

When Things Go Wrong

Some of the texts that were shown inside the cards were too long, so we had to hide the excess text so as not to affect the design. Therefore, we add material tooltips to all the card internal elements to communicate the hidden content to the user. However, things went wrong.

Suddenly, the scrolling experience was affected. When we analyzed the problem with the chrome dev tools (DevTools > More tools > Performance monitor), we found that we had 100% CPU usage. What happened? We had only added a few simple tooltips?!

The reason behind this problem was that the material tooltips have a few set of animations in their behavior and as you should know, quoting the Google team:

Animating properties is not free, and some properties are cheaper to animate than others. For example, animating the width and height of an element changes its geometry and may cause other elements on the page to move or change size. This process is called layout (or reflow in Gecko-based browsers like Firefox), and can be expensive if your page has a lot of elements. Whenever layout is triggered, the page or part of it will normally need to be painted, which is typically even more expensive than the layout operation itself.

There is nothing wrong with the Angular Material Tooltips. Only that Angular was not expecting us to use them on 5 to 10 elements inside card ... inside grid of cards ... inside virtual scroll.

One of the possible solutions would have been to cancel all the tooltip animation styles. However, because that could cause an overload in css processing work, it was preferred to create a simple tooltip without animations.

Github repository

Conclusion:

To avoid receiving complaints from your customers, whenever you add some changes, always remember to compare the performance before and after those changes. It's a small step for a dev, and a giant leap to become a great professional.

Angular Material Scrolling with multiple columns

Angelo Raso — Thu, 21 Jan 2021 14:46:49 +0000

Pagination has helped combat performance issues for a long time. However, with the massive use of mobile screens, page up and down has become annoying and impractical.

This article will try to move on from this:

To this:

Github repository

Requirements:

Minimal knowledge of angularJs and Angular is expected, including javascript and typescript.

Sponsors:

This article has been created thanks to Anura's support.

From pagination to infinite scroll and beyond

To avoid showing all existing accounts in the system, we used the ui-bootstrap pagination directive. However, the UX of this view was significantly worse on mobile. For this reason, it was decided to use the Angular Material's CDK and implement a view with infinite scroll.

Although the problem had been fixed on mobile phones, too much space was being wasted on the web version. However, implementing a grid was more difficult than expected.

After investigating the library, we discovered that Angular Material expects a single column in its virtual scroll. In this way, solving the problem with only CSS was not going to work.
Testing various alternatives, the following solution was reached:
- The set of "N" elements is obtained
- The set of elements is divided into groups of 4 elements, forming an Nx4 matrix
- A double "ngFor" is applied: the first to loop through the array, and the second to loop through each group of four elements

In this way, it was possible to have a single column with four elements per row, show them as a grid.
Although the victory seemed consecrated, problems appeared:
- Four items per row is a very small number if you have a very large screen
- Certain screen sizes will fit three items in a row and one below.

Therefore, it was necessary to choose a number of elements per row according to the size on the screen, adjusting said quantity in case the screen size changed again.
For this, the following architecture was created:
- A structural directive to get the infinite scroll elements
- A component to calculate the optimal number of elements per row
- The corresponding HTML that will contain the cdk-virtual-scroll-viewport"
- An attribute directive to apply the grid styles
- A module to declare the created entities

Github repository

Perfect! After several hours, an infinite scroll with multiple columns has been obtained. In your face, Google!

Conclusion:

Although creating a virtual scroll with several columns was challenging and fun, it is worth clarifying that if a library has certain limits, as a professional developer you have to ask yourself if the chosen path is really the correct one. On the other hand, there are already created libraries that solve this problem (ngx-virtual-scroller). Thus, reinventing the wheel should be avoided whenever possible.

DEV Community: Angelo Raso

Angular Material performance problems

Requirements:

Sponsors:

When Things Go Wrong

Conclusion:

Angular Material Scrolling with multiple columns

Requirements:

Sponsors:

From pagination to infinite scroll and beyond

Conclusion: