Présentation des signaux: le nouveau primitif d'Angular pour la réactivité

Le 15 février 2023, l'équipe d'Angular a introduit Signals dans le framework avec une simple demande d'extraction. Depuis lors, il y a eu de vives discussions au sein de la communauté Angular sur son utilisation et ses avantages. Beaucoup ont même commencé le prototypage avec des signaux pour tester ses fonctionnalités.

Voyons comment cette nouvelle fonctionnalité fonctionne, sa syntaxe et comment l'utiliser une fois qu'elle est entièrement déployée.

Que sont les signaux?

Le type de signal est le nouveau type primitif réactif d'Angular. Son but est de contenir une valeur, tout comme une variable standard, mais la caractéristique distinctive d'un signal est son comportement unique. Si un signal change, il notifiera tout ce qui en dépend.

De plus, Angular peut utiliser des signaux comme nouvelle approche pour détecter et déclencher des changements, plutôt que l'approche par défaut actuelle consistant à vérifier l'intégralité de l'arborescence des composants.

Comment utiliser les signaux dans Angular

Un signal ressemblera à ceci :

@Composant({
 sélecteur: 'mon-application',
 autonome: vrai,
 modèle: `
 Compte: {{ compte() }} </div>
 Double: {{ double() }} </div>
"changeCount()"></button>
`,
})
exporterclasse Composant d'application{
 compte = signal(0)
 double = calculé(() =>ce.compter() * 2);

 changeCount() {
ce.count.set(5)
 }
}

Dans ce composant App, la variable count est un signal initialisé avec la valeur zéro. count est alors référencé à l'intérieur de double (une valeur calculée) et du modèle. Ainsi, lorsque le clic sur le bouton définit la valeur de count sur cinq, la valeur calculée (double) et les valeurs du modèle sont mises à jour.

Chaque partie de la Composant angulaire qui dépend du signal sera automatiquement mis à jour une fois la valeur modifiée.

Pourquoi l'introduction de signaux est importante

Les signaux facilitent l'apprentissage et le travail avec Angular. Le passage aux signaux comme nouveau moyen par défaut d'apprendre et de construire avec Angular harmonisera le processus d'apprentissage. Que nous préférions un style de codage plus impératif avec Angular ou que nous souhaitions apprendre un style de codage plus déclaratif.

La plupart des gens commencent à coder impérativement parce que c'est généralement plus intuitif et familier aux gens. Mais passer de l'approche impérative à la voie déclarative implique un changement de paradigme et un changement total de notre modèle mental. C'est pourquoi RX.js, la bibliothèque réactive, est difficile à apprendre pour beaucoup.

Les signaux réuniront ces deux approches distinctes. Tout le monde peut apprendre les signaux par défaut, commencer à apprendre les concepts derrière la réactivité, et même ne pas se soucier de l'incorporation RX.js d'Angular s'ils ne peuvent pas ou ne veulent pas.

Une fois que vous êtes à l'aise avec le les bases d'Angular et que vous souhaitez passer à un style de codage plus déclaratif, vous pouvez facilement ajouter RX.js aux concepts que vous comprenez déjà.

Les signaux devraient améliorer la programmation angulaire pour tout le monde

Signals est le nouveau mécanisme réactif d'Angular que vous pouvez utiliser pour créer des valeurs réactives à lire par les consommateurs. Un signal avertit immédiatement tous les consommateurs dès que sa valeur change. Les signaux harmonisent le processus d'apprentissage d'Angular en réunissant les approches impératives et déclaratives du codage.

Angular s'appuiera sur des signaux pour rendre la détection des changements plus légère et plus robuste. Par conséquent, en tant que développeur Angular, apprendre à utiliser les signaux vous donnera une meilleure compréhension de la réactivité dans Angular et fera de vous un meilleur développeur. N'oubliez pas de maîtriser les bases d'Angular avant d'apprendre les parties les plus avancées.