Angular fournit un système de templating qui permet de binder une donnée depuis le contrôler (TS) à la vue (HTML). Ce système permet de gérer l’état de la donnée en déterminant les modifications à apporter au DOM lors d’une détection de changement. C’est donc important de comprendre c’est quoi le Change détection dans angular.
C’est quoi la change detection?
Angular adopte une approche déclarative dans la façon de gérer le modèle et la vue afin de maintenir en synchronisation ceux-ci. Le change détection c’est donc le système d’événement qui permet de mettre à jour la donnée entre les composants lorsque celle-ci est modifiée. Pour détecter ce changement le framework s’appuie sur la librairiezone.js dont le rôle est d'encapsuler et d'intercepter tous les appels asynchrones (setTimeout, event listeners etc...).
Comment ça marche dans angular?
Avant que le framework soit chargé, la magie de zone.js est exécutée. La lib va procéder au Monkey Patchin des Fonction native de Javascript afin d’ajouter des callbacks associés à des traitements asynchrones (ex setTimeout). Cette association va permettre à zone.js de détecter les changements et de notifier Angular de toutes les modifications.
Mais comment ça marche?
- - Lorsque zone.js détecte un changement, la lib notifi agular qui déclenche la change détection depuis le Root component.
- - Le change detector passe dans le composant pour comparer les anciennes et nouvelles valeurs qui sont présentes dans les bindings.
- - En cas de changement, le binding concerné est mis à jour dans la vue.
- - De manière récursive, il va parcourir l’ensemble de l’arborescence des composants enfants pour répéter la 2e étape.
- - (Cette étape sera lancé uniquement en de) Angular relance la changée détection pour s’assurer que toutes les données sont bien à jour afin de permettre de révéler les problèmes de conception ou d’implémentation (changement du modele par effet de bord par exemple)
C’est quoi la change detection strategy et comment je l’utilise?
Angular nous expose 2 stratégies pour gérer la change detection dans notre application, celle par default et la stratégie onPush.
La stratégie par défaut (ChangeDetectionStrategy default)
Par défaut, Angular n’aura aucune hypothèse sur la dépendance du composant et vérifiera chaque composant de l’arborescence du composant de haut en bas chaque fois qu’un événement déclenche la changée détection. Ce type de comportement peut avoir un impact négatif sur les performances d’une application de grande taille qui comporte de nombreux composants.
La stratégie onPush (ChangeDetectionStrategy.OnPush)
Avec la stratégie OnPush, nous pouvons sauter les vérifications pour les composants qui utilisent la stratégie OnPush et tous ses composants enfants. Avec cette stratégie, Angular ne mettra à jour le composant que si une ou plusieurs de ces conditions se produit:
- - La référence entrée a changé.
- - Un événement du composant ou de l’un de ses enfants.
- - Le flux asynchrone lié au modèle émet une nouvelle valeur.
- - Un déclenchement manuel de la change détection.
Pour conclure, cette simple modification dans nos composants, permet d’optimiser les performances de notre application en réduisant le coût exorbitant que peut avoir le hêtre et le render des données dans une app Angular. ça permet aussi de comprendre un peu plus en profondeur les entrailles du framework et sa façon d’interagir avec le DOM pour gérer son état.