Google a annoncé une nouvelle version de son framework de développement d'applications Web : Angular 16. Cette mouture très riche se distingue par une réactivité repensée et un rendu et une hydration côté serveur améliorés. Ces deux points étant d'autant plus importants qu'ils constituent un tremplin pour les améliorations futures du framework, explique Google.

Un nouveau modèle de réactivité

Angular vient donc avec un tout nouveau modèle de réactivité pour Angular qui apporte des améliorations significatives aux performances et à l'expérience des développeurs, selon Google. Ce nouveau modèle est entièrement rétrocompatible et interopérable avec le système actuel, et permet :

• Meilleures performances d'exécution en réduisant le nombre de calculs lors de la détection des modifications. Une fois les signaux angulaires complètement déployés, Google s'attend à des améliorations significatives de la métrique INP Core Web Vital pour les applications construites avec des signaux.
• Apporte un modèle mental plus simple pour la réactivité, indiquant clairement quelles sont les dépendances de la vue et quel est le flux de données via l'application
• Permet une réactivité fine , qui dans les versions futures nous permettra de vérifier les changements uniquement dans les composants concernés
• Rend Zone.js facultatif dans les futures versions en utilisant des signaux pour notifier le framework lorsque le modèle a changé
• Fournit des propriétés calculées sans la pénalité de recalcul à chaque cycle de détection de changement
• Permet une meilleure interopérabilité avec RxJS en décrivant un plan pour introduire des entrées réactives

Dans Angular 16, vous pouvez trouver une nouvelle bibliothèque de signaux qui fait partie de @angular/core et un package d'interopérabilité RxJS - @angular/core/rxjs-interop, l'intégration complète des signaux dans le framework arrivera plus tard cette année.

La bibliothèque de signaux angulaires vous permet de définir des valeurs réactives et d'exprimer des dépendances entre elles.  Voici un exemple simple d'utilisation avec Angular :

@Component({
  selector: 'my-app',
  standalone: true,
  template: `
    {{ fullName() }} <button (click)="setName('John')">Click</button>
  `,
})
export class App {
  firstName = signal('Jane');
  lastName = signal('Doe');
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    effect(() => console.log('Name changed:', this.fullName()));
  }

  setName(newName: string) {
    this.firstName.set(newName);
  }
}

Plus tard Google travaillera sur des composants basés sur des signaux qui seront une manière alternative plus simple de déclarer les entrées et les sorties.

Rendu côté serveur et hydratation améliorés

Une enquête menée par Google a établi que le rendu côté serveur est la première opportunité d'amélioration pour Angular. En conséquence, au cours des deux derniers mois, l'équipe d'Angular s'est associée à l'équipe Chrome Aurora pour améliorer les performances et le DX de l'hydratation et du rendu côté serveur. Angular 16 présente aperçu développeur de cette nouvelle hydratation non destructive de l'application complète.

Dans la nouvelle hydratation non destructive de l'application complète, Angular ne restitue plus l'application à partir de zéro. Au lieu de cela, le framework recherche les nœuds DOM existants tout en créant des structures de données internes et attache des écouteurs d'événements à ces nœuds.

Les avantages sont (selon Google):

• Aucun scintillement de contenu sur une page pour les utilisateurs finaux
• Meilleur Web Core Vitals dans certains scénarios
• Une architecture à l'épreuve du temps qui permet un chargement de code fin avec des primitives qui seront publiées plus tard cette année.
• Intégration facile avec les applications existantes, en quelques lignes de code seulement (voir l'extrait de code ci-dessous)
• Adoption incrémentielle de l'hydratation avec l'attribut ngSkipHydration dans les modèles pour les composants effectuant une manipulation manuelle du DOM

Google indique que les premiers tests font état d'une amélioration de 45% du rendu des applications. Pour mettre en oeuvre cette nouvelle hydratation, il suffit d'ajouter quelques lignes au fichier main.ts de l'application: