Récemment, Angular a publié une fonctionnalité indépendante de développement « expérientiel » appelée Zone.js. Bien que la fonctionnalité soit encore expérimentale, l’équipe d’Angular travaille sur cette innovation importante depuis longtemps. Les primitives réactives deviennent de plus en plus importantes pour les développeurs, ce qui indique qu’Angular entre dans une nouvelle ère. Dépendances angulairesLes avantages des signaux et des Rxjs sont encore plus marqués, éliminant le besoin d’écouter constamment les changements dont Zone.js dépendent, et a fini par agir comme intermédiaire pendant le développement.
Angular continuera d’être un cadre audacieux et puissant à l’avenir et amorcera une nouvelle transformation.
Tout d’abord, mon article n’a pour but d’enseigner quoi que ce soit à qui que ce soit. J’espère que mes lecteurs ne se sentiront pas comme si passifs méritent d’être aussi passifs. J’essaie de partager mes expériences et apprentissages autant que possible et de m’ouvrir aux discussions. Il est important de discuter ensemble, d’échanger des idées et d’évaluer en se basant sur la pensée critique. Il ne faut pas oublier qu’il subsiste encore une certaine confusion sur leur fonctionnement exact, surtout lorsque les technologies évoquées dans cet article sont encore en cours d’expérience, et je dirais que même le mécanisme de détection des changements peut encore semer une certaine confusion au sein de l’équipe centrale d’Angular.
Qu’est-ce que Zone.js et à quoi sert-il ?
Zone.js est une petite bibliothèque développée par Brian Ford en 2010 sous le nom de « Zones » pour gérer le travail asynchrone en JavaScript. Inspiré par des langages comme Erlang et Dart, il vise à apporter une concurrence structurée à l’environnement monothread de JavaScript. L’équipe d’Angular a pris de l’élan en adoptant les Zones comme mécanisme de détection des changements dans Angular 2, et l’équipe d’Angular a commencé à y contribuer sous forme de Zone.js, offrant une participation communautaire plus large et un développement accru. Aujourd’hui, bien qu’il soit encore étroitement lié à Angular, Zone.js peut être considéré comme un outil puissant pour surveiller et intervenir dans des tâches asynchrones, permettant l’analyse des performances, la gestion des erreurs et de nombreuses fonctions discutables.
Alors pourquoi Angular a-t-il abandonné Zone.js ?
En tirant parti de la capacité de l’IA à transformer sans effort nos images imaginaires en dessins, nous avons utilisé la métaphore de « l’éponge sous le lit » pour créer un visuel facile à comprendre.
Imaginez le lit sur l’image ci-dessus, qui n’est pas posé par terre, mais sur une grande éponge. Zone.js est comme une éponge dans une application Angular. Cette éponge garantit que le lit repose sur une base confortable et soutenante tout en offrant un confort relatif au dorsoir. L’éponge absorbe chaque mouvement du lit, empêchant le mouvement à l’intérieur de se refléter vers l’extérieur.
Les patches Monkey dans Zone.js écoutent toutes les API asynchrones du navigateur, telles que : événements, engagements, observables, setTimeout, setInterval, etc.
En écoutant ces éléments, l’application Angular peut détecter tout changement et ainsi mettre à jour l’interface utilisateur, en fait, tout comme un lit de support en éponge, Zone.js permet également à l’application Angular de fonctionner sans problème. Dans ce cas, des problèmes de performance que nous ne ressentons pas dans de très grands projets peuvent survenir.
D’un autre côté, cette structure complexe semble nous empêcher de percevoir certains changements spécifiques au fil du temps. Chaque caractéristique et développement précédents, ainsi que son propre développement interne et besoins changeants, deviennent soudainement un obstacle à l’autre et au développement suivants.
Lorsque nous retirons l’éponge de sous nous, nous voyons que la liberté naturelle de mouvement commence à émerger lorsque le lit est en contact direct avec le sol. Lorsque l’effet limitant le confort de l’éponge commence à s’user, cela signifie que le mouvement sur le lit se réfléchira directement au sol.
Une telle métaphore peut signifier que l’éponge offre une zone de confort et un sommeil relativement plus confortable. Zone.js comme cette éponge, elle offre une véritable zone de confort qui nous permet de ressentir chaque changement à la surface. Cependant, avec le temps, cette structure complexe peut nous empêcher de percevoir certains changements spécifiques. Des douleurs lombaires peuvent survenir lorsque nous retirons l’éponge de sous nous, et ces douleurs indiquent que nous sommes passés d’un sol artificiel à un sol naturel, et bien que cette transition puisse être un peu douloureuse, au final, avec un bas du dos droit, un sommeil plus confortable et une meilleure circulation, ainsi qu’une meilleure acuité physique et mentale. Lorsque nous passons à une zone sans zone, c’est-à-dire des douleurs au dos et aux articulations dues à un lit sans éponge, c’est un bon signe que nous passons d’un sol artificiel à un sol naturel. Bien que cette expérience de transition soit un peu douloureuse, la douleur disparaît également lorsque le bas du dos commence à reprendre son état naturel d’origine, offrant une meilleure circulation ; L’exemple de transition ici correspond à l’expérimental Zoneless que nous avons entendu dans Angular v18.
Zone.js est censé ajouter une charge supplémentaire car il suit les opérations asektron et les transmet aux mécanismes de détection angulaire tels que les appels, événements, erreurs, etc. Aujourd’hui, en termes de performance d’Angular, on ne voit ni ressent la charge supplémentaire ici. Zone.js pourrait être développée davantage et certains problèmes de débogage pourraient être résolus, mais la base ici est la feuille de route d’Angular. Nous constatons que les primitives réactionnantes Signals développées en interne par Angular Zone.js nuisent désormais aux plans futurs d’Angular. Bien que la structure Signals soit très utile en termes de mécanismes de détection et aussi bonne en termes de performances, facile à utiliser et puissante, Zone.js n’est plus nécessaire, mais ce n’est pas une bibliothèque qu’on peut abandonner du jour au lendemain.
Nous comprenons qu’Angular ne veut pas limiter ses rêves, mais souhaite plutôt construire une application plus flexible et fiable avec un cadre plus autonome en éliminant autant que possible les processus intermédiaires. Nous voyons Angular se diriger vers un état plus pragmatique et essayer de saisir l’opportunité de revenir dans la tendance haussière à l’avenir. Malheureusement, d’après l’enquête actuelle StateofJS, on ne peut pas dis-le dans une telle tendance, mais on voit aussi qu’Angular est ouvert à toutes les innovations possibles.
Comment puis-je passer en mode sans zone dans Angular 18 ?
Angular 18 propose une étape qui nous permet de passer en mode sans zone et de se débarrasser de l’éponge. Comme montré ci-dessous, nous pouvons désormais offrir cette expérience en utilisant le mécanisme de détection sans changement de zone lors de la phase de démarrage.
Avec la fonction ci-dessus ajoutée au fournisseur, nous pouvons désormais utiliser la commande npm uninstall zone.js pour supprimer les zone.js définis dans le tableau polyfills ci-dessous depuis le angular.json.
Maintenant, on peut utiliser Angular Zoneless !
Quels sont les avantages de Zoneless ?
Zoneless offre un écosystème plus rationalisé pour nos applications en éliminant les opérations d’écoute inutiles. Cela signifie un rendu plus rapide, des performances supérieures, des chargements de pages plus rapides, des formats de paquets plus petits et un débogage plus facile.
Faites un test classique où vous ajoutez un compteur en cliquant sur un bouton et vous voulez augmenter ce chiffre en cliquant sur le bouton. Dans ce cas, on peut voir que la valeur modifiée est affichée lorsque chaque fonction est déclenchée, et que cette valeur change dans le HTML. Comme c’est déjà une fonction et que nous la déclenchons directement, elle est affichée ici. Mais que se passe-t-il si cette valeur change à cause d’influences extérieures et que nous voulons voir une valeur changer sans que nous devenions à la déclencher manuellement ? S’il y a un Zone.js, il écoute constamment tous les changements et informe Angular en notre nom. Cependant, comme il n’existe pas de tel mécanisme pour l’instant, il faut soit déclencher le mécanisme de détection de changement après une opération asynchrone, soit utiliser directement Signals ou RxJS, afin que le changement puisse être détecté directement à cause de cette réactivité.
La disparition de Sponge nous apprend que ce n’est pas seulement Zone.js qui disparaît, c’est aussi la « zone de confort ».
Si nous utilisons Zone.js comme module avec JavaScript brut, cela ressemblera à ceci.
Dans Angular, nous n’avons pas besoin de gérer ces situations ; Avec ngZone, ces opérations fonctionnent déjà en tandem avec le mécanisme de détection.
Par exemple, dans le cas du DOM direct, des auditeurs d’événements, des observables et engagements, des requêtes HTTP et des flux de contrôle synchrones, nous devons déclencher manuellement le mécanisme de détection des changements pour les opérations asynchrones.
Puisque les signaux ou R xjs détectent automatiquement les changements, il n’est pas nécessaire de déclencher le mécanisme de détection des changements.
Exemple de signal :
Écrivons maintenant une application pour tester les mécanismes de détection des changements sans zone et angulaire et voyons comment cela fonctionne.
Après avoir commencé l’intervalle défini ci-dessus comme standard, on constate qu’il commence à fonctionner, mais que le DOM n’est pas rafraîchi et les changements ne sont pas reflétés. Lorsque nous utilisons l’intervalle de démarrage du signal, nous voyons qu’il fonctionne sans déclencher le mécanisme de détection de changement d’Angular. Comme vous pouvez le voir, lorsque l’événement de clic et l’intervalle de signal commencent, Angular remarque le changement, capture immédiatement le changement dans notre intervalle standard, puis le relâche.
Lorsque nous envoyons la valeur d’une variable au composant parent, nous constatons qu’elle est perçue différemment dans les cas push et par défaut.
Lorsque nous lions l’entrée à gauche, le changement est réfléchi lorsqu’il n’y a pas de zone, et de même, nous pouvons voir que le changement est réfléchi après avoir cliqué à cause de la promesse.
Ici, on voit qu’après un appel HTTP sans détection de modifications, les changements ne sont pas reflétés, seulement lorsque nous les déclenchons manuellement. Bien sûr, Signals reflète facilement les nouveaux venus sur l’écran souhaité. Certains éléments du code sont les suivants :
app.component.ts
change-detection-demo.component.ts
L’application a été publiée sur Stacklibitz, et vous pouvez consulter le reste des tests. Vous pouvez aussi suivre les résultats dans l’interface utilisateur via du code.
Stackblitz :La connexion hyperlientérée est visible.
GitHub :La connexion hyperlientérée est visible.
Il y a aussi ci-dessous une application d’exemple qui montre comment fonctionne le mécanisme de détection des changements d’Angular, et vous pouvez l’essayer à partir de là.
La connexion hyperlientérée est visible.
Points à considérer lors du passage au mode sans région
Il est important de noter que, comme son nom l’indique, ExperimentalZonelessChangeDetection reste expérimental.
Lors de quelques tests, nous avons remarqué certaines bizarreries dans le mécanisme de détection des changements. Par exemple, lorsque certains changements ne sont pas déclenchés manuellement, nous ne voyons aucun changement dans le DOM et l’état n’est pas rafraîchi. Cependant, lorsqu’un autre signal ou variable de réaction fonctionne en dehors du mécanisme de détection de changement et provoque un rafraîchissement du DOM, on peut observer que l’état précédemment non rafraîchi est également rafraîchi.
Si vous souhaitez implémenter cette fonctionnalité dans un projet existant, vous devez tester soigneusement toutes les actions et le comportement de l’application. En particulier, les bibliothèques tierces peuvent s’appuyer sur Zone.js, ce qui peut entraîner certaines erreurs et des problèmes de rendu.
Langue source:La connexion hyperlientérée est visible. |
Publié le 30-12-2024 à 11:02:42
|
|
|
|
Propriétaire|
Publié le 30-12-2024 à 11:04:13
|
