Lors de l’Angular Connect 2023, Google a confirmé un tournant majeur dans l’évolution d’Angular, amorcé dès la version 15. L’objectif est de moderniser le framework pour le rendre plus léger, plus rapide et plus simple à utiliser.

Avec l’introduction des Standalone Components, d’un nouveau modèle de réactivité avec Signals et d’un système de build ultra-performant grâce à Esbuild et Vite, Angular adopte une approche plus fluide et plus en phase avec les standards du web moderne.

Standalone Components : une refonte de l’architecture

Depuis ses débuts, Angular reposait sur un système modulaire où chaque composant était déclaré dans un NgModule, définissant les dépendances et l’organisation de l’application.

À partir d’Angular 14, il est devenu possible de créer des Standalone Components, qui fonctionnent sans NgModule. Cette nouvelle approche réduit la complexité, facilite l’importation des composants et simplifie la structure des applications.

Avant Angular 15 :

@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule],
  exports: [MyComponent]
})
export class MyModule {}

Avec Angular 17 :

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'app-my-component',
  template: `<h2>Standalone Component</h2>`
})
export class MyComponent {}

Ce changement marque une véritable révolution dans l’architecture d’Angular, initialement pensée pour des projets de grande envergure et souvent jugée trop complexe.

En remplaçant progressivement NgModule, Google allège le framework et lui permet de se rapprocher de ses concurrents comme React et Vue, où l’approche par composants autonomes est la norme.

Signals : une réactivité plus performante

Tandis que les Standalone Components repensent l’architecture d’Angular, les Signals révolutionnent la gestion de la réactivité.

Jusqu’à Angular 16, Angular utilisait Zone.js pour détecter les événements asynchrones et déclencher un cycle de Change Detection, entraînant un re-scanning de l’ensemble de l’arbre des composants. Si cette approche fonctionnait bien, elle pouvait être coûteuse en ressources, notamment dans les applications complexes.

Avec les Signals, Angular adopte un modèle réactif plus précis et performant. Plutôt que de re-scanner toute l’interface, seuls les composants réellement impactés sont mis à jour, réduisant ainsi la charge sur le moteur de rendu et améliorant significativement les performances.

import { signal } from '@angular/core';

export class CounterComponent {
  count = signal(0); // Création d’un signal avec une valeur initiale

  increment() {
    this.count.update(value => value + 1); // Mise à jour du Signal
  }
}

<p>Compteur : {{ count() }}</p>
<button (click)="increment()">+1</button>

En complément, Google introduit computed et effect pour réagir aux changements de données.

• computed crée des valeurs dérivées d’un signal, mises à jour automatiquement.
• effect exécute une action dès qu’un Signal change. Exemple d’un composant calculant automatiquement un pourcentage et l'affichant dans la console :

export class PercentageComponent {
  // Valeurs réactives (Signals)
  currentValue = signal(30);
  totalValue = signal(100);

  // Calcul automatique du pourcentage
  percentage = computed(() => 
    this.totalValue() === 0 ? 0 : (this.currentValue() / this.totalValue()) * 100
  );

  constructor() {
    effect(() => {
      console.log("Nouvelle valeur du pourcentage :", this.percentage());
    });
  }

  // Augmenter la valeur actuelle
  increase() {
    this.currentValue.update(value => Math.min(value + 10, this.totalValue()));
  }
}

Grâce à cette transition, Angular adopte un modèle réactif plus performant, s’inspirant de frameworks comme SolidJS et React, où le rendu est optimisé à un niveau de granularité très fin.

Typed Forms : une meilleure intégration avec TypeScript

Avant Angular 14, les Reactive Forms n’étaient pas entièrement typés. Les valeurs des FormControl étaient de type any, ce qui pouvait entraîner des erreurs de typage et réduire la fiabilité du code.

Avec les Typed Forms, Google renforce la sécurité et la robustesse du framework, tout en offrant une meilleure intégration avec TypeScript.

export class UserFormComponent {
  userForm = new FormGroup({
    name: new FormControl<string>(''),
    age: new FormControl<number | null>(null),
  });

  submit() {
    console.log(this.userForm.value); 
  }
}

Avec cette approche, Angular réduit les erreurs de typage et offre une autocomplétion améliorée dans les IDE.

Esbuild & Vite : un boost de vitesse

Avec Angular 17, Google remplace Webpack par Esbuild et Webpack Dev Server par Vite pour optimiser le développement et la production.

Esbuild offre un build jusqu’à dix fois plus rapide grâce à une compilation multithread ultra-optimisée.
Vite permet un démarrage quasi-instantané du serveur de développement et un rechargement à chaud beaucoup plus efficace.
Cette transition réduit considérablement les temps de compilation, facilite le développement local et améliore l’expérience développeur.

Conclusion : un Angular plus rapide, plus simple et plus moderne

Avec Angular 17, Google transforme progressivement son framework vers une approche plus moderne et performante.

Les Standalone Components simplifient l’architecture, les Signals optimisent la réactivité et Esbuild et Vite accélèrent le build et le développement.

Mais cette transition ne fait que commencer. L’abandon progressif de Zone.js, l’amélioration des Typed Forms et l’évolution du modèle réactif vers un système plus proche de SolidJS et React dessinent déjà le futur d’Angular.

Avec ces innovations, Angular ne se contente plus de suivre l’évolution du web moderne. Il s’impose comme une alternative plus puissante et plus flexible que jamais.