Les signaux angulaires expliqués : un guide complet pour les développeurs

Que sont les signaux angulaires ?

Les signaux angulaires sont une nouvelle fonctionnalité introduite dans Angulaire 17. Ils offrent une nouvelle approche de la gestion données réactives dans vos candidatures. Les signaux agissent comme des flux de données dans lesquels vous pouvez lire et écrire. Essentiellement, ils simplifient le traitement des valeurs réactives.

Points clés concernant les signaux :

• Wrapper autour des valeurs: Un signal entoure une valeur et informe les consommateurs intéressés lorsque cette valeur change. Vous pouvez le considérer comme un conteneur réactif.
• Lisible et inscriptible: Les signaux peuvent être en lecture seule ou en écriture. Vous pouvez lire la valeur d’un signal en utilisant sa fonction getter. Les signaux inscriptibles vous permettent de mettre à jour leur valeur directement. Les signaux peuvent contenir des valeurs primitives de base ou des structures de données complexes.

Pourquoi des signaux ?

• Performance: Traditionnellement, lorsque quelque chose change dans une partie de votre application Angular, Angular vérifie toutes les autres parties pour voir si elles sont affectées. Les signaux améliorent l’efficacité en permettant des contrôles ciblés uniquement là où cela est nécessaire.
• Tests rendus plus faciles : Les signaux fournissent un moyen prévisible de déclencher la détection des changements, rendant les tests plus fiables.

Comment créer des signaux

Nous pouvons créer des signaux en utilisant signal() la méthode et les signaux doivent contenir une valeur initiale 👇

Comment lire et mettre à jour les valeurs des signaux

Les valeurs des signaux sont lues via des fonctions getter telles que : firstSignal()la raison en est de détecter à quels endroits les signaux sont utilisés

Signaux calculés

Les signaux calculés sont en lecture seule et dérivent leur valeur d’autres signaux. Ces signaux sont définis à l’aide du computed fonction, où vous spécifiez la logique de dérivation

signal calculé

Le z le signal dépend du x signaler et y signal. Chaque fois que x ou y est mis à jour, Angular sait que z peut également mettre à jour.

Quelques points clés Computed Signaux

Computed les signaux ne sont pas inscriptibles (signifie qui sont des signaux en lecture seule)

• Nous ne pouvons pas attribuer directement de valeur aux signaux calculés.
• Si nous exécutons z.set(12)nous obtiendrons une erreur de compilation car z n’est pas un WritableSignal.

Computed les signaux sont à la fois évalués et mémorisés paresseusement.

z's la fonction de dérivation ne s’exécute pas pour calculer sa valeur avant la première lecture z. La valeur calculée est ensuite mise en cache, et si vous lisez z encore une fois, il renverra la valeur mise en cache sans recalculer.

Effets

Les signaux jouent un rôle crucial pour alerter les consommateurs intéressés des changements. À l’inverse, un effet désigne une opération qui se déclenche chaque fois qu’il y a un changement dans une ou plusieurs valeurs de signal. Pour créer un effet, vous pouvez utiliser la « fonction effet ».

Effects sont des fonctions qui s’exécutent en réponse aux changements de signal. Ils ont d’abord courir au moins une foiset toute mise à jour ultérieure de la valeur du signal entraînera leur exécution à nouveau.

Pendant le processus de détection des changements, les effets s’exécutent toujours de manière asynchrone.

Dans divers scénarios d’utilisation, un effet peut être extrêmement bénéfique.

• Mises à jour des données de journalisation :

  • « Les effets fournissent un moyen d’enregistrer les modifications de la valeur du signal pour le débogage ou le suivi. Vous pouvez accéder à la nouvelle valeur dans la fonction d’effet et la connecter à la console, à un fichier ou à un service de surveillance.

• Persistance des données :

  • « Les effets peuvent être utilisés pour lancer des actions associées à la persistance des données. Par exemple, vous devrez peut-être stocker la quantité mise à jour du panier (qui est stockée dans un signal) dans le stockage local chaque fois que la quantité change. Cela garantit que les données du panier restent intactes même après une actualisation de la page.

• Effets secondaires basés sur les changements de signal :

  • Mise à jour d’autres composants de l’interface utilisateur en fonction de la nouvelle valeur du signal, par exemple, mise en surbrillance d’un bouton en fonction de la sélection de l’utilisateur.
  • Effectuer des appels API pour récupérer des données supplémentaires ou mettre à jour un serveur distant lorsqu’un signal change, par exemple, récupérer les détails d’un produit après avoir sélectionné un produit dans une liste.

• Panier d’achat de commerce électronique avec mises à jour automatiques :

Imaginez que vous créez une application de commerce électronique. Traditionnellement, la gestion de l’état du panier et la mise à jour de l’interface utilisateur en conséquence peuvent impliquer :

• Stockage des éléments du panier dans une propriété ou un service de composant.
• Mise à jour manuelle de la vue du composant chaque fois qu’un article est ajouté, supprimé ou que la quantité est modifiée.
• Utiliser des techniques comme ngOnChanges ou ChangeDetectorRef.detectChanges pour déclencher la détection des changements et mettre à jour l’interface utilisateur.
• Cette approche peut présenter des défis, en particulier lorsque plusieurs composants doivent refléter l’état du chariot. (par exemple, résumé, page de paiement).
• Pour résoudre ce problème, nous pouvons utiliser des signaux.
• Bien sûr, vous pouvez trouver le code de l’exemple suivant ici : Composant du panier

• Voici d’autres exemples où les signaux pourraient être utiles
  • Application de chat en temps réel,
  • Thématisation dynamique
  • Journalisation et analyse pour surveiller les changements

Problème de performances

Problème: Dans un scénario traditionnel de détection des changements, imaginez une hiérarchie de composants complexe avec composants imbriqués. Angular déclenche un cycle de détection de changement qui passe par le arborescence complète des composants lorsqu’un changement d’état se produit, par exemple lorsqu’un utilisateur clique sur un bouton. Cette méthode peut entraîner des problèmes de performances dans les applications volumineuses, en particulier avec des changements d’état fréquents, car le processus de détection prend plus de temps avec un plus grand nombre de composants et des origines de changement plus profondes.

Avec signaux : Les changements d’état utilisant les signaux sont contenus dans le signal lui-même. Seuls les composants spécifiquement abonnés à un Signal sont avertis lorsque sa valeur change.

Taille du paquet

Problème: Pour détecter les changements au sein de l’application, angulaire s’appuie sur zun.js, qui est une bibliothèque tierce.

Avec des signaux: Depuis Angular 18, vous pouvez configurer des applications, qui peuvent s’exécuter sans zone.js

Réduit le passe-partout

Une grande quantité de code passe-partout est fréquemment impliquée dans la gestion de l’état avec des observables et des sujets, notamment la gestion des flux asynchrones et des abonnements et désabonnements.

Signaux fournir une API plus compacte et expressive, ce qui réduit cette complexité.

Conclusion

Les signaux angulaires fournissent un mécanisme robuste pour gérer les données au sein de vos applications angulaires. Adoptez une approche réfléchie en évaluant ces aspects pour vérifier si les signaux correspondent aux exigences de votre cas d’utilisation particulier.

Voici une perspective équilibrée :

Adoptez les signaux lorsque: Vous avez des données qui changent fréquemment, des flux de données complexes ou avez besoin d’une approche plus réactive. Leurs améliorations de performances et leur gestion rationalisée des données peuvent bénéficier de manière significative à votre application.
Procédez avec prudence lorsque : Vous avez affaire à des données simples ou êtes nouveau dans la programmation réactive. Tenez compte de la courbe d’apprentissage et des défis potentiels en matière de tests avant de plonger tête première dans Signals.

Essentiellement, les signaux sont un ajout précieux à la boîte à outils du développeur Angular, mais ils doivent être utilisés judicieusement en fonction des besoins et de la complexité du projet.

Pour votre référence, j’ai partagé un pertinent

Dépôt Git ici : Dépôt GitHub

Démo en direct : https://kashif-ali-khan.github.io/signal-project/home

Si vous voulez jouer avec le code et voir comment il fonctionne : URL de Stackblitz

Référence: https://angular.io/guide/signals

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE