Les Signaux Angular, une Révolution React-ive

Les signaux sont un changement radical en approche pour Angular, un framework connu pour... eh bien, ne pas faire de changements radicaux. Angular est-il en train d'abandonner ses valeurs fondamentales ? Ce changement signale-t-il une résurgence du framework basé sur Typescript ? Quelle est la nouvelle primitive réactive introduite ? Cela changera-t-il la façon dont Angular est perçu ?

Nous allons nous pencher sur tout cela et bien plus encore. En particulier, nous explorerons les points suivants :

• comment la détection des changements basée sur zone.js fonctionne dans Angular
• comment fonctionne la nouvelle primitive réactive des signaux
• et surtout, l’impact de ce changement

Parce qu'il faut bien l'avouer, Angular n'est pas... à la mode. Mais être à la mode n'a jamais été son but. Le but d'Angular est d'être solide, fiable et sûr. Le framework fournit une structure, et il cadre comment faire les choses. Il cible les cas d'utilisation où la fiabilité est la première exigence.

La conséquence de cet état d'esprit est double :

• Premièrement : Angular ne se prête pas naturellement aux environnements où l'agilité** est la première exigence. Comme les startups.
• Deuxièmement : Angular lui-même est lent à adopter de nouveaux paradigmes.

Cependant, l'équipe Angular a récemment signalé qu'elle se préparait à mettre en œuvre un changement radical dans le framework. Étant donné qu'il s'agit d'Angular, tout se fera de manière sûre et sans disruption.

Et dans un sens, en ne sautant pas sur tous les modes de Javascript, l'équipe Angular a été capable d'être sélective. Ils ont décidé d'aller de l'avant avec un concept inspiré par un framework récent. Et je me demande dans quelle mesure l'équipe Angular a été inspirée par le nom de ce framework et la façon dont il s'accorde avec leurs valeurs fondamentales.

Pour être en mesure de comprendre ce qu'est ce changement, regardons d'abord...

Comment fonctionne la détection des changements dans Angular ?

Angular utilise une bibliothèque appelée zone.js. Cette bibliothèque fait principalement deux choses :

• Premièrement, elle triche en réécrivant les API du navigateur pour détourner tous les événements asynchrones. Fondamentalement, elle intercepte les événements de clic, les timeout, les appels d'API et autres.
• Deuxièmement, elle enveloppe ces événements (et le code qui les appelle) dans un objet JavaScript (appelé "zone") qui préserve le contexte d'invocation

Angular utilise cette bibliothèque pour envelopper ses composants et pour déclencher des mises à jour chaque fois qu'un événement externe se produit.

Cette bibliothèque était révolutionnaire lorsqu'elle a été introduite... en 2014. Et pour être équitable : À l'époque, JavaScript manquait de nombreuses fonctionnalités dont il dispose aujourd'hui, comme les promesses et la syntaxe “fat arrow”, qui permet de mieux préserver le contexte... L'équipe a fait ce qu'elle a pu avec les outils dont elle disposait.

Mais compte tenu de l'ampleur et de l'ambition des applications d'aujourd'hui, cette approche relève de la force brute : elle manque de granularité. Angular avait besoin d'un moyen de faire de la réactivité atomique. Il fallait un moyen de faire des mises à jour sélectives. Et c'est là que les signaux entrent en jeu.

Que sont les signaux ?

Vous avez peut-être déjà entendu ce terme. Les signaux sont un concept poussé en particulier par le framework Solid, que j'ai exploré précédemment. Dans Solid JS, les signaux permettent aux développeurs de déclarer des dépendances fines entre différentes parties de l'état de l'application.

Les signaux permettent de suivre les dépendances entre les composants. Chaque fois que la valeur d'un signal est mise à jour, SolidJS déclenche automatiquement un nouveau rendu de tous les composants qui dépendent de ce signal. Cela facilite la création d'interfaces utilisateur réactives qui se mettent à jour en temps réel en fonction des modifications de l'état de l'application.

La principale caractéristique des signaux est qu'ils permettent un suivi fin des dépendances. Cela signifie que SolidJS peut détecter exactement quelles parties de l'interface utilisateur doivent être mises à jour lorsqu'un signal change. Il ne peut alors effectuer de manière sélective le rendu des parties de l'interface impactés. Cela permet d'améliorer les performances et de réduire les rendus inutiles.

Qu'est-ce que les signaux vont changer dans Angular ?

Dans une longue discussion sur GitHub annonçant le changement, l'équipe Angular a déclaré qu'elle pensait que les signaux débloqueraient de nombreuses nouvelles capacités. Il s'agit notamment :

• d’un modèle plus clair de la façon dont les données circulent dans l'application,
• une** granularité plus fine des mises à jour**,
• un code plus propre et plus lisible,
• et la** simplification de nombreux concepts du framework**, tels que les requêtes et les crochets de cycle de vie.

J'ai le sentiment que faire des Signals le mode par défaut de propagation des changements rendra Angular** plus facile à apprendre** pour les personnes familières avec d'autres frameworks. Je ne pense pas que ce changement rendra soudainement Angular à la mode. Mais cela n'a jamais été le but. Cependant, cela pourrait faciliter la prise en main d'Angular et, par conséquent, l'écriture d'un code propre. Et cela contribuera à rendre Angular... encore plus solide.