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 )
  • updateupdate(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.
  • mutatemutate(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 setupdateou 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 *