Présentation : Réactivité avec Angular

La Réactivité en Bref

Qu’est-ce que la programmation réactive ?

C'est l'art de construire un système qui s'adapte tout seul.
Au lieu de vérifier constamment si une donnée a changé, votre code attend simplement d'être notifié de ce changement.

Pourquoi c’est important ?

Aujourd’hui, Angular 19 propose une nouvelle façon de gérer tout ça :

Les Signaux.

Les Fondamentaux : Pull vs. Push

Imaginez un chef cuisinier (le producteur) et un client (le consommateur).

Pull vs. Push en Code

Comment ces modèles se traduisent-ils en code Angular ?

              // Le producteur contient une valeur.
              const nom = signal('Théo');

              // Le consommateur "tire" la valeur.
              console.log(`Bonjour, ${nom()}`); // -> Bonjour, Théo

              // La mise à jour est aussi explicite.
              nom.set('Alice');
              console.log(`Bonjour, ${nom()}`); // -> Bonjour, Alice
            

              // Le producteur émet des valeurs dans le temps.
              const horloge$ = interval(1000);

              // Le consommateur s'abonne et réagit aux valeurs poussées.
              horloge$.subscribe(seconde => {
                console.log(`Il est ${seconde} seconde(s).`);
              });
              // -> Il est 0 seconde(s).
              // -> Il est 1 seconde(s). (1s plus tard)
              // -> ...
            

Un peu d'histoire

La réactivité n'est pas une idée nouvelle.

🤔 Mais à votre avis, d'où vient-elle ?

L'origine : les tableurs

Imaginez une feuille de calcul : vous changez une cellule, et comme par magie, toutes les cellules qui en dépendent se mettent à jour instantanément.

C'est le principe fondamental de la réactivité : une chaîne de dépendances qui se met à jour automatiquement, sans effort manuel.

RxJS et le modèle "Push"

Le web a apporté son lot de défis : comment gérer des flux de données continus comme les clics de souris ou les réponses de serveurs ?

RxJS a apporté la solution avec les Observables. C'est le modèle "Push" : le producteur de données (l'Observable) pousse activement les informations vers les consommateurs qui se sont abonnés, dès qu'elles sont disponibles.

Signaux Angular et le modèle "Pull"

Avec les Signaux, Angular revient à la simplicité et à l'efficacité du tableur.

C'est le modèle "Pull" : la valeur n'est pas "poussée" en permanence. Au lieu de cela, le consommateur "tire" (demande) la valeur uniquement lorsqu'il en a besoin.

Cette approche est incroyablement performante pour synchroniser l’état de l’interface utilisateur.

Pourquoi les Signaux maintenant ?

1 : Préparer le futur sans Zone.js

Historiquement, Angular utilisait Zone.js pour la détection de changements.

2 : Les signaux permettent des gains de performance significatifs

Avec les Signaux, la détection des changements est chirurgicale. Seuls les composants qui écoutent un signal sont mis à jour.

👉 On ne met à jour que ce qui est nécessaire.

3 : Améliorer la DX (Developer Experience)

Le code est plus facile à lire : on voit clairement où une valeur est définie (.set()) et où elle est lue (monSignal()). Plus besoin de RxJS pour les besoins simples de réactivité locale.

4 : S’aligner avec les standards modernes du web

D’autres frameworks modernes (comme Vue, React, etc.) utilisent déjà des approches réactives avec des Signaux. Angular veut rester compétitif en adoptant une API réactive déclarative et explicite.

Les bases des Signaux

Trois concepts clés :

1. `signal()` : La source de vérité

Une boîte qui contient une valeur.

const counter = signal(0);
// Pour changer la valeur
counter.update(v => v + 1);
// Pour lire la valeur
console.log(counter());

2. `computed()` : La valeur dérivée

Une valeur calculée automatiquement à partir d'autres signaux.

const quantity = signal(2);
const price = signal(10);

// La valeur totale est toujours à jour
const total = computed(() => quantity() * price());

3. `effect()` : L'effet de bord

Une fonction qui s'exécute quand un signal qu'elle utilise change. Pour les actions qui ne modifient pas d'autres signaux (DOM, logs, etc.).

const statusSignal = signal('loading');
effect(() => {
  // Ce code s'exécute quand 'statusSignal' change
  console.log(`Le statut est ${statusSignal()}`);
});
        

`effect()` avec Chart.js

const chartValueSignal = signal(50);
const myChart = new Chart(ctx, { ... });
effect(() => {
    // Ce code s'exécute quand 'chartValueSignal' change
    const newValue = chartValueSignal();
    myChart.data.datasets[0].data[0] = newValue;
    myChart.update(); // Mettre à jour le graphique
});
// Changer la valeur du signal pour déclencher l'effet
chartValueSignal.set(75);
          
        

Signaux vs. RxJS : Choisir le bon outil

Les Signaux et RxJS ne sont pas en concurrence. Pensez-y plutôt comme à une boîte à outils : chaque outil a son utilité. Utilisez ce guide pour savoir lequel choisir en fonction de votre besoin.

Tableau Comparatif

Interopérabilité avec RxJS

`toSignal` permet de convertir un Observable en Signal.

const counter$ = interval(1000);

// On le convertit en signal.
// La valeur initiale est `null` jusqu'à la première émission.
const counterSignal = toSignal(counter$, { initialValue: null });

Pièges à éviter

Piège n°1 : Modifier un objet directement

La réactivité ne sera pas déclenchée. Il faut créer une nouvelle instance.

// À éviter :
const user = signal({ name: 'Bob' });
user().name = 'Alice'; // Ne fonctionne pas !

// La bonne pratique :
const user = signal({ name: 'Bob' });
user.update(u => ({ ...u, name: 'Alice' }));

Piège n°2 : Oublier `computed`

Ne recalculez pas une valeur dérivée à la main. C'est le rôle de `computed`.

// À éviter :
let sum = a() + b();
// Ne se met pas à jour

// La bonne pratique :
const sum = computed(() => a() + b());
// Toujours à jour !

Piège n°3 : Utiliser `effect` pour modifier un autre signal

Un `effect` est pour les "effets de bord", pas pour changer l'état. Risque de boucles infinies.

// À éviter :
effect(() => {
  b.set(a() * 2); // Risqué !
});

// La bonne pratique :
const b = computed(() => a() * 2);
// Correct et performant