# 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](https://angular.dev/guide/zoneless)