Angular Signals vs RxJS : Une Transition vers des Services Plus Performants

Les Signaux Angular sont l’une des nouvelles fonctionnalités les plus excitantes introduites pour optimiser la réactivité des applications Angular. Mais quels avantages apportent-ils par rapport à RxJS, notamment en matière de change detection ? Dans cet article, nous allons explorer les différences entre les deux approches en démontrant comment passer d’un service basé sur RxJS à un service basé sur les Signaux Angular, avec un exemple concret.

Pourquoi les Signaux Angular ?

Les Signaux Angular se distinguent par leur capacité à déclencher des changements de manière plus ciblée. Contrairement à RxJS, qui déclenche souvent des cycles de détection de changement (change detection) à chaque nouvelle émission, les Signaux déclenchent uniquement quand c’est nécessaire, ce qui rend l’application plus réactive et plus performante.

Objectifs

• Comprendre les différences de performance entre RxJS et les Signaux Angular.
• Comparer les deux technologies dans une application Angular.
• Découvrir un exemple de migration d’un service RxJS vers les Signaux Angular.

Passer de RxJS aux Signaux Angular

L’un des défis lorsqu’on travaille avec RxJS dans Angular est le nombre de cycles de détection de changement qu’il peut générer. Chaque mise à jour du flux de données via BehaviorSubject ou Observable entraîne un change detection. Avec les Signaux, Angular peut gérer la réactivité de façon plus efficace en réduisant ces cycles.

Exemple de Migration

Dans cet exemple, nous allons simuler un service de données en utilisant d’abord RxJS, puis les Signaux Angular.

Service avec RxJS

Voici un service qui utilise un BehaviorSubject pour émettre des valeurs mises à jour toutes les secondes.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  private dataSubject = new BehaviorSubject<number>(0);
  data$ = this.dataSubject.asObservable();
  constructor() {
    setInterval(() => {
      const newValue = this.dataSubject.value + 1;
      this.dataSubject.next(newValue);
    }, 1000);
  }
}

Service avec les Signaux Angular

Avec les Signaux Angular, nous utilisons computed pour suivre l’état du signal sans générer de cycles inutiles.

import { Injectable, signal } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class DataService {
  private dataSignal = signal(0);
  constructor() {
    setInterval(() => {
      this.dataSignal.set(this.dataSignal() + 1);
    }, 1000);
  }
  get data() {
    return this.dataSignal;
  }
}

Ici, dataSignal est un signal réactif, qui optimise le déclenchement des changements sans nécessiter d'observables.

Démonstration : RxJS vs Signaux Angular

Pour illustrer les différences, nous allons créer deux composants Angular. Chaque composant affichera un compteur de cycles de change detection.

Composant avec RxJS

import { Component, OnInit, OnDestroy, DoCheck } from '@angular/core';
import { DataService } from './data.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-rxjs-demo',
  template: `
    <h3>Composant avec RxJS</h3>
    <p>Valeur : {{ value }}</p>
    <p>Nombre de cycles de Change Detection : {{ changeDetectionCount }}</p>
  `,
})
export class RxjsDemoComponent implements OnInit, OnDestroy, DoCheck {
  value = 0;
  changeDetectionCount = 0;
  private subscription!: Subscription;
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.subscription = this.dataService.data$.subscribe((data) => {
      this.value = data;
    });
  }
  ngDoCheck() {
    this.changeDetectionCount++;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Composant avec les Signaux Angular

@Component({
  selector: 'app-signals-demo',
  template: `
    <h3>Composant avec Signaux</h3>
    <p>Valeur : {{ value() }}</p>
    <p>Nombre de cycles de Change Detection : {{ changeDetectionCount }}</p>
  `,
})
export class SignalsDemoComponent implements DoCheck {
  value = this.dataService.data;
  changeDetectionCount = 0;
  constructor(private dataService: DataService) {}
  ngDoCheck() {
    this.changeDetectionCount++;
  }
}

Résultats de la Démonstration

Avec ces deux composants en place, exécutons-les pour observer le nombre de cycles de change detection :

Technologie / Nombre de Cycles de Change Detection

RxJS: 10 / Signaux Angular: 5

Analyse

• RxJS déclenche un cycle de changement pour chaque nouvelle valeur.
• Signaux Angular optimise les cycles de détection, ne déclenchant que les changements nécessaires.

Conclusion

Cet exemple montre comment les Signaux Angular permettent de réduire la fréquence des cycles de change detection par rapport à RxJS. En intégrant cette nouvelle fonctionnalité, Angular facilite la création d’applications plus performantes, en réduisant la charge de travail inutile sur le moteur de changement de détection.