Le 15 février 2023, l’équipe d’Angular a introduit Signals dans le framework avec une simple pull request. 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é à prototyper avec Signals pour tester ses fonctionnalités.
Voyons comment fonctionne cette nouvelle fonctionnalité, sa syntaxe, et comment l’utiliser une fois qu’elle sera pleinement déployée.
Qu’est-ce qu’un signal ?
Le type 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 les signaux comme nouvelle approche pour détecter et déclencher les changements, plutôt que l’approche par défaut actuelle qui consiste à vérifier l’arborescence complète des composants.
Comment utiliser les signaux dans Angular
Un signal ressemble à ceci :
@Component({
selector: 'my-app',
standalone: true,
template: `
<div> Count: {{ count() }} </div>
<div> Double: {{ double() }} </div>
<button (click)="changeCount()"></button>
`,
})
export class AppComponent{
count = signal(0)
double = computed(() => this.count() * 2);
changeCount() {
this.count.set(5)
}
}
Dans ce composant App, la variable count est un signal initialisé avec la valeur zéro. count est ensuite référencé dans double (une valeur calculée) et dans le modèle. Ainsi, lorsque le clic sur le bouton fixe la valeur de count à cinq, la valeur calculée (double) et les valeurs du modèle sont toutes deux mises à jour.
Chaque partie du composant Angular qui dépend du signal sera automatiquement mise à jour lorsque la valeur changera.
Pourquoi l’introduction des signaux est importante
Les signaux facilitent l’apprentissage et le travail avec Angular. Le passage aux signaux comme nouvelle méthode par défaut pour apprendre et 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 voulions apprendre un style de codage plus déclaratif.
La plupart des gens commencent à coder de manière impérative parce que c’est généralement plus intuitif et familier. Mais passer de l’approche impérative à l’approche 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.
Signals va réunir ces deux approches distinctes. Tout le monde peut apprendre les signaux par défaut, commencer à apprendre les concepts derrière la réactivité, et ne même pas se soucier d’incorporer RX.js d’Angular s’ils ne peuvent pas ou ne veulent pas le faire.
Une fois que vous êtes à l’aise avec 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 Angular pour tout le monde
Les signaux sont le nouveau mécanisme réactif d’Angular que vous pouvez utiliser pour créer des valeurs réactives que les consommateurs peuvent lire. Un signal notifie immédiatement tous les consommateurs lorsque sa valeur change. Les signaux harmonisent le processus d’apprentissage d’Angular en réunissant les approches impérative et déclarative du codage.
Angular s’appuiera sur les 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 permettra de mieux comprendre la réactivité d’Angular et de devenir un meilleur développeur. N’oubliez pas de maîtriser les bases d’Angular avant d’apprendre les parties plus avancées.
