Search for a command to run...
Indeed 😂
Depuis l'arrivée des Signals dans Angular, une question revient sans cesse dans les équipes : comment continuer à profiter de la puissance de RxJS, de ses opérateurs, de sa gestion fine des flux async
Si vous avez l’habitude de manipuler des formulaires réactifs (Reactive Forms) dans un projet Angular, vous connaissez certainement la méthode patchValue(…). Cette méthode, permet de mettre à jour les valeurs de votre formulaire. Cependant, son utili...
Depuis la sortie de la version 17 du framework Angular, on parle de la renaissance de Angular. Il y a eu beaucoup de changements majeurs depuis la version 16 du framework pour préparer le terrain à cette renaissance. Ces changements majeurs ont rendu...
Dans notre précédent article, nous avons vu ensemble ce qu'est un Signal Input et comment l'utiliser. Nous avons particulièrement remarqué sa similarité avec le décorateur @Input(). Dans ce nouvel article, nous verrons ensemble un nouveau type de inp...
Si vous suivez l'actualité d'Angular avec la sortie de la version 20 du framework, vous avez probablement entendu de plus en plus ce terme. Mais au-delà du jargon, qu'est-ce que le Zoneless concrètement pour vos applications Angular ? Pourquoi est-il si important ?
Bien que cette fonctionnalité soit actuellement en phase expérimentale, plongeons-nous quand-même ensemble dans ce concept qui promet de révolutionner la gestion des performances dans l'écosystème Angular.
Zone.jsPour comprendre le Zoneless, il faut d'abord saisir le rôle de Zone.js, le compagnon silencieux d'Angular depuis ses débuts.
Zone.js est une bibliothèque qui “patch” le moteur d'exécution JavaScript dans le navigateur. Son objectif principal est de détecter quand des changements pourraient se produire dans votre application. Comment fait-il ça ? En interceptant les événements asynchrones courants :
Timers (
setTimeout,setInterval) ;Requêtes HTTP (
fetch,XMLHttpRequest) ;Événements du DOM (clics, saisies, etc.) ;
Promesses (
Promise.then,async/await).
Chaque fois qu'une de ces opérations se termine, Zone.js notifie Angular qu'un "tick" s'est produit. Angular, à son tour, déclenche son mécanisme de détection de changement pour s'assurer que l'interface utilisateur reflète le nouvel état de vos données.
C'est ce qui donne à Angular sa réactivité "magique" : vous modifiez une variable, et l'affichage se met à jour sans que vous ayez à le dire explicitement.
Cependant, cette magie a un coût : la performance. Chaque détection de changement initiée par Zone.js doit parcourir l'arbre des composants pour vérifier les potentielles mises à jour. Dans les grandes applications complexes, avec de nombreux événements asynchrones, cela peut entraîner des cycles de détection de changement inutiles et coûteux, ralentissant l'application et impactant l'expérience utilisateur.
Zoneless ou le Contrôle ManuelLe terme Zoneless fait référence à la possibilité de faire fonctionner une application Angular sans Zone.js, ou du moins en réduisant considérablement sa portée. L'idée n'est pas de se débarrasser complètement de la détection de changement, mais de la rendre plus explicite et optimisée.
Au lieu que
Zone.jsnous dise quand un changement a potentiellement eu lieu, le développeur prend le contrôle et signale explicitement à Angular quand il doit vérifier les changements.Comment cela fonctionne-t-il concrètement ? Principalement grâce aux
Signals(Signaux).
SignalsLes Signals sont une nouvelle primitive de réactivité introduite dans Angular 16 (et améliorée dans les versions suivantes).
Lorsque vous utilisez des Signals, Angular sait exactement quels composants dépendent de quelles données. Si vous modifiez un Signal, Angular ne mettra à jour que les composants (et les parties de ces composants) qui sont directement affectés par ce Signal. Cela contraste fortement avec l'approche de Zone.js qui vérifie l'ensemble de l'application ou de grandes parties de celle-ci.
En mode
Zoneless, c'est la modification d'unSignalqui devient le déclencheur principal de la détection de changement, et non plus un événement asynchrone arbitraire intercepté parZone.js.
Angular aura besoin de déclencher une détection de changement en mode Zoneless :
Quand un
Signalest mis à jour.Quand un événement DOM se produit (comme un clic), Angular peut toujours les détecter.
Quand vous utilisez
markForCheck()sur unChangeDetectorRef(pour les cas où vous ne travaillez pas avec desSignalsou avez des données asynchrones non basées sur desSignals).
En somme, le Zoneless n'est pas un mystère insaisissable, mais une évolution logique de la stratégie de détection de changement d'Angular. En s'appuyant sur les Signals, Angular nous offre la possibilité de reprendre le contrôle sur la réactivité de nos applications, menant à des performances accrues, un code plus prévisible et une expérience de développement améliorée.
Pour plus d'informations 👉 Zoneless