Tu utilises *NgFor? Alors tu connais la fonction TrackBy non?? Savais-tu qu’il est possible de maximiser les performances de ton application Angular lors du parcours d’un tableau avec NgFor . En effet, tu as certainement remarqué que quand tu modifies un élément d’une liste NgFor, tout le DOM se recharge et cela fait clignoter l’interface? Tu veux résoudre ce problème? Je te montre dans cet article comment faire.
Il n’a rien de plus énervant quand tu constates que ton application « lague » et que tu ne sais pas quoi faire pour résoudre le problème. J’ai moi-même plusieurs fois cherché comment faire en sorte que l’affichage des listes de mes applications soit plus fluide et performant lors de la mise à jour d’un élément. Et je me suis rappelé d’un petit trick Angular systématiquement oublié par la plupart des développeurs, c’est la fonction TrackBy.
La fonction TrackBy
TrackBy est une fonction facultative passée dans la directive NgFor qui définit comment suivre les modifications des éléments dans un itérable. La fonction prend l’index d’itération et l’ID d’élément. Lorsqu’il est fourni, Angular suit les changements en fonction de la valeur de retour de cette fonction. Et cela améliore drastiquement les performances! Particulièrement avec de longue liste!
Avec et Sans la fonction TrackBy
J’ai préparé un petit exemple qui présente l’implémentation de la fonction TrackBy. J’ai faits aussi une petite capture vidéo de mon écran pour que tu puisses voir la différence au niveau du DOM. Ainsi tu comprendras instantanément l’avantage et tu ne pourras plus faire l’impasse sur cette fonctionnalité.
Sans TrackBy
C’est le comportement par défaut de la directicve NgFor. Ci-dessous dans la vidéo tu vois bien que quand je modifie la valeur d’un élément du tableau, le DOM est correctement misé à jour.
Mais!….. Remarque que la partie du DOM qui est modifiée n’est pas seulement l’élément de la liste mais la totalité de la liste. Oui regarde bien dans la console… On remarque bien l’élément LI qui est modifié mais aussi l’élément UL. On remarque cela car il change de couleur lors de la modification, tous comme l’élément cible. Cela ne cause pas de problème majeur mais imagine une liste de 50 éléments… 100 éléments… 1000 éléments! Là on perd complètement la tête en constatant que l’application lague et que l’interface clignote!
Avec TrackBy
Avec la fonction TrackBy plus rien à voir! C’est maintenant uniquement l’élément de la liste qui est mise à jour.
Tu peux le remarquer dans la vidéo ci-dessus où tu constates bien qu’il n’y a que l’élément cible qui est modifié. Uniquement le LI.
Conclusion
Je te vois déjà te plaindre et dire:
« Mais pourquoi ceci n’est pas le comportement par défaut de la directive NgFor? »
Pour la simple et bonne raison que cette fonctionnalité n’est utile que pour améliorer le rendu du DOM lors de l’utilisation de longues listes de données. Ce qui n’est pas le case de toutes les situations de NgFor.
Et aussi car comme tu as pu le voir dans le code que j’ai mis à côté des vidéos, la fonction TrackBy est complètement « customisable » pour permettre un tracking en fonction du type de données reçu par la directive.
Tu auras aussi remarqué ma façon de faire un « filtre limit » directement dans le template. Cela n’est pas courant mais fonctionne très bien. L’autre avantage c’est que du coup il y moins d’éléments dans la liste lors du premier chargement et donc cela limite l’effet de clignotant du DOM ou le temps d’Implémentation du DOM qui peut être long pour la longue liste.
Je te montrerai dans les prochains articles quelques autres astuces que j’utilise pour optimiser mes application Angular.
En attendant, je vous laisse consulter les autres articles traitant du même sujet dans la section Angular.
Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.