Estoy utilizando Angular Material prácticamente desde que salió la primer estable de Angular 2+ (que creo que fue en Angular 6 o por ahí). A diferencia de jQuery UI, que hoy se siente muy vieja, Angular Material se actualiza de forma permanente, funciona con componentes nativos de Angular y hace las delicias tanto de programadores como de usuarios finales; por su facilidad y su estética respectivamente. Pero está lejos de ser perfecto, y no me pongo exigente, detrás de Angular está Google. Una cosa es dejar pasar un par de bugs normales y otra muy distinta son errores de rendimiento. Asi que en esa oportunidad vengo a comentar alguna solución (lamentablemente provisorias, al menos hasta que Angular saque soluciones reales) a problemas de rendimiento en Material.
Lag cuando se usan muchos mat-accordion
Creo que es el bug de rendimiento que más me molesta. Muchos habrán visto lo increiblemente útil que resulta el acordeón de Material. Es práctico, bello, y permite tener muchos datos comprimidos en poco espacio. El acordeón está pensado para tener dentro infinitos mat-expansion-panel, y esa misma premisa da varios problemas de rendimiento. Es normal que queramos tener una lista de esos paneles (poca utilidad tiene tener solo uno), en Codize lo usamos en listas de 20 en 20, una cantidad relativamente baja. Y es increible el lag que produce al abrir un panel cuando hay varios en pantalla (y por varios me refiero a 4 o 5). Si se abre el primero de la lista, el lag será muchísimo, en cambio si se abre el último no habrá lag alguno. Esto ocurre porque la simple animación existente al hacer el toggle recalcula el offset de cada panel cada vez que actualiza su posición; de esa manera el último panel no debe calcular más que su propia posición; sin embargo el primero debe calcular la posición de todos, produciendo un lag bestial especialmente detectable en dispositivos móviles. ¿Solución? El rendimiento mejora bastante al utilizar el ya mencionado trackBy, pero al ser un error visual no será suficiente. Si no queremos desactivar las animaciones por completo podremos relajar el rendimiento desactivando el toggle del mat-accordion:
<mat-accordion hideToggle="true" displayMode="flat">
La única diferencia gráfica es que no tendremos el ícono de la flecha (el cual podremos generar sin mucho conflicto); pero a cambio el sistema irá notablemente más fluido.
Bajo rendimiento en ngFor masivos
Esto no se ve a simple vista y ya me ha tocado comentar el problema y la solución en otra entrada. Pero en líneas generales, una dificultad muy común es al utilizar grandes cantidades de datos recursivos mediante ngFor, en muchos casos datos dinámicos. Angular no optimiza de forma automática esa clase de sistemas, por lo tanto nos tocará utilizar el ya mencionado trackBy en esta otra entrada.
