Angular ūüö¶ Signaux ūüď° (L'avenir d'Angular)

Pourquoi et comment utiliser les signaux angulaires

J’ai mis √† jour cet article apr√®s la sortie d’Angular v16.0.0-next.7

Avant de commencer avec Angular Signals ūüö¶, vous √™tes-vous d√©j√† demand√© comment les modifications apport√©es √† votre mod√®le se refl√©taient dans la vue¬†?

Si vous savez comment Angular d√©tecte les changements et met √† jour les vues, vous pouvez passer √† la section suivante sur les signaux !¬†ūüí®

Lorsque vous apportez des mises à jour à votre modèle, Angular applique automatiquement ces modifications à la vue correspondante. Cela permet une interaction transparente et synchronisée entre le modèle et la vue, permettant une expérience utilisateur fluide.

Croyez-moi, ce n’est pas par magie !¬†ūüßô‚Äć‚ôāÔłŹ‚ú®

La clé de cette synchronisation est Change Detection et Zone js .

Bien que CD et Zone js ne soient pas au centre de cet article, nous allons brièvement explorer comment Angular utilise ces outils pour synchroniser la vue avec les modèles.

Les applications angulaires sont construites √† l’aide d’une architecture bas√©e sur des composants, o√Ļ chaque composant repr√©sente une caract√©ristique ou une fonctionnalit√© sp√©cifique.¬†L’application angulaire est un arbre de composants.

En utilisant¬†des zones¬†et en ex√©cutant du code √† l’int√©rieur de celles-ci, le framework peut obtenir une meilleure visibilit√© sur les op√©rations en cours d’ex√©cution.¬†Cela lui permet de g√©rer plus efficacement les erreurs et, surtout, de d√©clencher¬†la d√©tection des changements¬†chaque fois que quelque chose se passe dans l’application (op√©ration asynchrone, √©v√©nement DOM …)

  • 1 :¬†Zone.js¬†d√©tecte quand quelque chose se passe dans l’application.
  • 2 :¬†Zone.js¬†d√©clenche la d√©tection de changement pour mettre √† jour l’√©tat de l’application.

Lorsque¬†la d√©tection de changement¬†d√©marre ūüĒ•, le framework parcourt tous les¬†composants de l’arborescence¬†pour v√©rifier si leur √©tat a chang√© ou non et si le nouvel √©tat affecte la vue.¬†Si tel est le cas, la partie DOM du composant qui est affect√©e par la modification est mise √† jour.

Cette fonctionnalit√© a un impact significatif sur les performances de l’application, elle effectue des travaux qui peuvent ne pas √™tre n√©cessaires, puisque la majorit√© des composants peuvent ne pas √™tre affect√©s par l’√©v√©nement.

Nous pouvons optimiser les performances de l’application en modifiant la strat√©gie de d√©tection des changements dans le composant √† l’aide de la¬†strat√©gie¬†OnPush .¬†Cependant, cette approche n√©cessite une attention particuli√®re.

Mais pourquoi expliquez-vous cela ?¬†Cet article concerne les signaux angulaires, n’est-ce pas¬†?¬†ūüėē

Oui, car¬†Angular Signals¬†peut nous aider √† √©viter ces v√©rifications inutilesūüėä et √† ne mettre √† jour que la partie de l’application qui a chang√©.

Alors maintenant, nous allons en apprendre davantage sur¬†les signaux angulaires¬†ūü•≥ūü•≥ūü•≥.¬†Allons-y ūüŹÉ‚Äć‚ôÄÔłŹ ūüŹÉ ūüŹÉ‚Äć‚ôÄÔłŹ ūüŹÉ

Angulaire ūüö¶ Signaux ūüď°

Que sont les signaux angulaires¬†ūü§Ē¬†?

Les signaux¬†sont¬†une valeur r√©active, techniquement une fonction sans argument¬†[(¬†() => T)]¬†, lorsque nous l’ex√©cutons, ils renvoient la valeur.¬†Nous pouvons dire que le signal est un type particulier de valeur qui peut √™tre observ√© ūüßź pour les changements.

Comment crée-t-on un signal ?

Nous créons et initialisons un signal en appelant la fonctionsignal()

// Signature de la fonction signal 
export function signal<T>( initialValue : T, options?: CreateSignalOptions <T>): WritableSignal <T>

//Signature de l'interface
d'export CreateSignalOptions CreateSignalOptions <T> { /** * Une fonction de comparaison qui définit l'égalité des valeurs de signal. */ égal ? : ValueEqualityFn <T> ; } //Comment l'utiliser const movies = signal< Movie []>([]);






La signalfonction est une fonction TypeScript qui crée un S ignal . Il prend deux arguments :

  • initialValue: Repr√©sente la valeur initiale du¬†signal¬†, et il peut √™tre de n’importe quel typeT
  • optionsest un objet du¬†CreateSignalOptionstype qui inclut une¬†equalm√©thode pour comparer deux valeurs de type¬†T.¬†Si l’¬†optionsobjet n’est pas fourni lors de la cr√©ation d’un signal, la¬†defaultEqualsfonction sera utilis√©e √† la place.¬†La¬†defaultEqualsfonction compare deux valeurs du m√™me type¬†Ten utilisant une combinaison de l’¬†===op√©rateur et de la¬†Object.ism√©thode

La signalfonction renvoie un WritableSignal<T>.Signal est une fonction getter, mais le type donne la possibilité de modifier la valeur par trois méthodes :WritableSignal

  • set¬†[¬†set(value: T): void¬†]¬†for replacement (¬†r√©glez le signal sur une nouvelle valeur et informez les personnes √† charge¬†)
  • update[¬†update(updateFn: (value: T) => T)¬†] pour d√©river une nouvelle valeur (¬†mettre √† jour la valeur du signal en fonction de sa valeur actuelle et notifier les personnes √† charge¬†), l’ op√©ration¬†de mise √† jour¬†utilise l’ op√©ration¬†set()¬†pour effectuer mises √† jour dans les coulisses.
  • mutate[¬†mutate(mutatorFn: (value: T) => void)¬†] pour effectuer une mutation interne de la valeur actuelle (¬†mettre √† jour la valeur actuelle en la mutant sur place et notifier toutes les personnes √† charge¬†)

Signal est donc une valeur réactive qui peut être observée, mise à jour et notifiée à toute personne à charge.

Mais qu’est-ce que cela signifie d’avertir les personnes √† chargeūüėē¬†?

C’est la partie magique ūü™Ą de¬†Signal¬†.¬†Nous allons maintenant voir quelles sont¬†les personnes √† charge¬†pour les signaux et comment les¬†notifier¬†.

Signal¬†n’est¬†pas seulement une valeur qui peut √™tre modifi√©e, c’est plus que cela,¬†Signal¬†est une valeur r√©active ūüĒÉ et est un producteur qui avertit les consommateurs (personnes √† charge) lorsqu’il change.

Ainsi,¬†les personnes √† charge¬†dans¬†Signal¬†sont tout code qui a enregistr√© un int√©r√™t pour la valeur¬†de Signal¬†et souhaite √™tre averti chaque fois que la¬†valeur¬†de Signal change.¬†Lorsque la¬†valeur¬†du Signal est modifi√©e, le¬†Signal¬†avertira tous ses¬†d√©pendants¬†, leur permettant de r√©agir au changement de la valeur¬†du Signal¬†.¬†Cela fait du¬†Signal¬†l’√©l√©ment central d’une application r√©active, car il permet √† diff√©rentes parties de l’application de se mettre √† jour automatiquement en r√©ponse aux modifications des donn√©es.

Alors, comment peut-on ajouter des dépendants (consommateur) à Signal ?

Nous pouvons ajouter des consommateurs en utilisant des fonctions¬†d’effet¬†et¬†calcul√©es¬†.

effet

Parfois, lorsqu’un signal a une nouvelle valeur, nous pouvons avoir besoin d’ajouter un effet secondaire.¬†Pour ce faire, nous pouvons utiliser la fonction¬†effect()¬†.

Effect planifie et exécute une fonction à effet secondaire dans un contexte réactif.

Signature de la fonction effet :

 effet d'exportation de la fonction  (     effectFn: () => EffectCleanupFn | void , options?: CreateEffectOptions ): EffectRef
Comment utiliser l’effet

La fonction √† l’int√©rieur de l’¬†effet¬†sera r√©√©valu√©e avec tout changement qui se produit dans les¬†signaux¬†appel√©s √† l’int√©rieur.¬†Plusieurs signaux peuvent √™tre ajout√©s √† la fonction¬†d’effet¬†.

ūüĒć Je vais essayer d’expliquer le travail derri√®re la fonction¬†d’effet¬†: ūüĒć

lorsque nous d√©clarons une fonction¬†d’effet¬†, le¬†effectFn¬†pass√© en argument sera ajout√© √† la liste des¬†consommateurs¬†de tous¬†les signaux¬†utilis√©s par le¬†effectFn¬†, comme¬†les films¬†dans notre exemple.¬†(¬†Les signaux¬†utilis√©s par l’¬†effectFn¬†seront les producteurs).

Ensuite, lorsque le¬†signal¬†a une nouvelle valeur en utilisant les op√©rateurs¬†set¬†,¬†update¬†ou¬†mutate¬†, l’¬†effetFn¬†sera r√©√©valu√© avec la nouvelle valeur du signal (le producteur informe tous les consommateurs des nouvelles valeurs).

La effect() fonction renvoie un EffectRef, qui est un effet réactif global qui peut être détruit manuellement. An EffectRefa une opération de destruction .

  • destroy()¬†: ūüßĻ Arr√™tez l’effet, en le supprimant de toutes les ex√©cutions planifi√©es √† venir.

calculé

Que se passe-t-il s’il existe une autre valeur qui d√©pend des valeurs d’autres¬†signaux¬†et qui doit √™tre recalcul√©e ūüĒĄ chaque fois que l’une de ces d√©pendances change¬†?

Dans ce cas, nous pouvons utiliser une computed()fonction pour créer un nouveau signal qui se met automatiquement à jour chaque fois que ses dépendances changent.

computed()cr√©e un signal de m√©morisation, qui calcule sa valeur √† partir des valeurs d’un certain nombre de signaux d’entr√©e.

Signature de la fonction calculée :

 fonction d'exportation calculée<T>( 
calcul : () => T, égal : ValueEqualityFn <T> = defaultEquals) : Signal <T>
Comment utiliser calculé

Ainsi, la fonction calcul√©e renverra un autre¬†signal,¬†tous¬†les signaux¬†utilis√©s par¬†le calcul¬†seront suivis en tant que d√©pendances et la valeur du nouveau¬†signal¬†sera recalcul√©e chaque fois que l’une de ces d√©pendances changera.

Notez que la¬†computedfonction renvoie a¬†Signal¬†et non a¬†WritableSignal, ce qui signifie qu’elle ne peut pas √™tre modifi√©e manuellement √† l’aide de m√©thodes telles que¬†set,¬†updateou¬†mutate.¬†Au lieu de cela, il est mis √† jour automatiquement chaque fois que l’un de ses parents d√©pendants signale des changements.

et maintenant nous pouvons ajouter et effectuer ou créer un autre signal avec une fonction calculée basée sur ce nouveau signal.

Tout changement de valeurs sera maintenant propag√© dans le graphique des d√©pendances ūüĆ≥.

C’est √ßa ūü§©!¬†Dans cet article, nous avons d√©couvert les signaux angulaires, ce qu’ils sont, pourquoi nous en avons besoin et comment les utiliser dans nos applications.¬†J’esp√®re que cela vous a aid√© √† comprendre la puissance des signaux.

Pour illustrer ces concepts, j’ai cr√©√© un projet ūüéĮ qui explique les signaux angulaires et montre comment cr√©er et mettre √† jour des signaux, utiliser des effets et cr√©er des valeurs calcul√©es.¬†Dans le GIF suivant, vous pouvez voir l’application en action, et vous pouvez trouver le code complet dans ce¬†r√©f√©rentiel GitHub¬†.¬†Si vous trouvez le code utile, n’h√©sitez pas √† lui donner une √©toile‚≠źÔłŹ.

Merci d’avoir lu, n’oubliez pas de soutenir cet article avec votre ūüĎŹ pour aider √† le partager avec plus de personnes.¬†Et assurez-vous de me suivre sur¬†twitter¬†ou medium pour des articles plus passionnants √† l’avenir¬†!¬†ūüĒ•

 

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *