Zoneless par-ci, Zoneless par-là... Mais qu'en est-il concrètement ?

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.

👉 Le Problème : La Magie de Zone.js

Pour 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.

👉 La Solution : Le Zoneless ou le Contrôle Manuel

Le 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.js nous 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).

👉 Le Rôle Central des Signals

Les 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'un Signal qui devient le déclencheur principal de la détection de changement, et non plus un événement asynchrone arbitraire intercepté par Zone.js.

Angular aura besoin de déclencher une détection de changement en mode Zoneless :

• Quand un Signal est mis à jour.

• Quand un événement DOM se produit (comme un clic), Angular peut toujours les détecter.

• Quand vous utilisez markForCheck() sur un ChangeDetectorRef (pour les cas où vous ne travaillez pas avec des Signals ou avez des données asynchrones non basées sur des Signals).

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