Angular 18, nouveautés et améliorations

Les améliorations de performances apportées par Angular 18

On le sait, Angular n'est pas parfait (malheureusement...) mais cette nouvelle version apporte de nombreuses améliorations en termes de performances.

Zoneless : Amélioration de la détection des changements

On ne va pas se mentir, AngularAngular est un framework de développement JavaScript populaire basé sur TypeScript. est historiquement connu pour sa piètre gestion de la détection des changements du DOM. Jusqu'à présent, on utilisait une bibliothèque appelée Zone.js, chargée d'intercepter tous les événements du DOM afin de permettre à Angular d'appliquer les modifications nécessaires. Le problème de zone.js, et de NgZone (l'encapsulation de zone.js par Angular) réside dans le fait que ces cycles de détection sont continus, et interceptent le moindre changement (clique, scroll, changement d'onglet, de style d'un élément graphique, ouverture de modal, etc.). Ce processus est trop lourd, car même lorsqu'il n'y a rien à changer au niveau de l'affichage, Angular s'efforce à constamment vérifier l'état de tous ses composants.

Pour pallier ce problème, Angular a introduit lors de sa version 16, les Signaux, déjà présents dans de nombreux frameworks comme ReactReact est un framework de développement JavaScript populaire. ou Vue. Ces derniers sont des wrappers sur des valeurs permettant d'avoir la logique inverse de zone.js. En français, ça veut dire qu'au lieu de vérifier constamment ce qui peut changer, on notifie un changement dès qu'il se produit.

Avec cette méthode, on réduit grandement la quantité de vérifications à effectuer, ce qui améliore naturellement les performances. Les Signeaux ne représentent cependant qu'une première transition pour s'affranchir de Zone.js et ne règlent donc pas tous les problèmes liés à la détection. Avec cette dernière version, Angular 18 introduit Zoneless (littéralement "sans Zone.js" en français) en version expérimentale, afin de se détacher une bonne fois pour toutes de cet ancien système.

Voici comment l'importer :

bootstrapApplication(App, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

C'est parfaitement compatible avec les signaux et ça permet de gagner en performance, en taille de bundle, de faciliter le debugging !

Construire ses templates HTML avec le nouveau Control Flow d'Angular 18

Introduit dans la version précédente, Angular a mis en place un nouveau système pour la construction de ses templates HTMLHTML (HyperText Markup Language) est un langage permettant de décrire le découpage d'une page web.. On passe alors de ce type de syntaxe :

    <ng-container *ngIf="condition; else elseBlock">
      Affichage si vrai
    </ng-container>

    <ng-template #elseBlock>
      Affichage si faux
    </ng-template>

À ça :

@if (condition) 
{
  Affichage si vrai
}
@else 
{
  Affichage si faux
}

Ça permet de simplifier les anciens templates certes, mais ce n'est pas tout ! Ce nouveau Control Flow permet également de bénéficier de nouvelles fonctionnalités permettant de gagner en performance !

Faire du lazy loading avec Deferrable Views

Parmi ces nouvelles fonctionnalités, nous pouvons citer les Deferrable Views permettant d'effectuer facilement du lazy loading directement au niveau du composant :

@defer (when cond) {
  <large-component />
} @placeholder {
  <img src="placeholder.png" />
}

Dans cet exemple, le @defer permet de charger le composant <large-component /> uniquement si la condition cond est vraie. Avant cela, on affiche un placeholder (une image). De cette façon, on gagne en performance et la page est chargée plus rapidement ! Il est possible de définir tout un tas de conditions pour le @defer: que ce soit à l'affichage dans le viewport, lors d'un chargement, au bout d'un certain temps, etc...

Avec Angular 18, ce nouveau système est désormais stable, c'est-à-dire qu'on est plus sur une version expérimentale !

Les nouvelles versions à jour avec Angular

Material 3 : une version stable et compatible avec Zoneless

La version 3 d'Angular Material est également devenue une version stable ! Pour rappel, Angular Material est un ensemble de composants graphiques pour Angular, basés sur le Material Design de Google.

Ces composants sont bien sûr compatibles avec le fonctionnement Zoneless dont nous avons parlé au début de cet article !

Vous pouvez retrouver la documentation officielle de material à l'adresse suivante : https://material.angular.io/.

Angular 18 compatible avec TypeScript 5.4

Angular 18 embarque toutes les nouvelles fonctionnalités de TypeScript 5.4 pour bénéficier notamment de renforcement sur les typages et de nouvelles méthodes permettant de simplifier vos développements.

La nouvelle documentation d'Angular 18

Pendant longtemps, la documentation officielle d'Angular était trouvable sur le site https://angular.io/, mais depuis la version 17, celle-ci a fait peau neuve et une version bêta a été rendu disponible à l'adresse suivante : https://angular.dev/ !

Angular profite de sa nouvelle version pour officialiser cette documentation ! Désormais, c'est à cette adresse que vous retrouverez toutes les informations nécessaires !

Toutes les autres nouveautés d'Angular 18

Nous nous sommes concentrés ici sur les fonctionnalités que nous considérons comme les plus importantes, mais, bien sûr, plein d'autres ont été ajoutées avec cette nouvelle version, parmi lesquelles il y a :

• L'amélioration sur server-side rendering
• L'ajout de fonctionnalités provenant du framework Web Wiz de Google et vice-versa
• L'amélioration du debuggage

Pour obtenir une liste exhaustive et se tenir informé, nous vous conseillons les références suivantes :

• Le github officiel d'Angular : https://github.com/angular/angular
• La release note de la version 18 : https://github.com/angular/angular/releases/tag/18.0.0
• Le blog d'Angular : https://blog.angular.dev/
• La nouvelle documentation officielle d'Angular : https://angular.dev/

Que faut-il retenir de cette nouvelle version d'Angular ?

Cette nouvelle version d'Angular ne révolutionne pas le framework, mais apporte tout de même son lot d'améliorations, à la fois en termes de performance et de paradigme. L'équipe du projet Angular continue de prendre en compte les avis des utilisateurs pour offrir une meilleure expérience dans la conception d'applications web.

Et de notre côté, nous restons disponibles pour tous vos besoins de développement web ou d'audits de vos applications Angular !