Angular : les nouvelles fonctionnalités des versions 17 et 18

Dans cet article nous parlerons de toutes les fonctionnalités stables et qui ne sont plus en developer preview ou en experimental support. Un autre article parlera des nouveautés en cours de développement.

Principales nouveautés d'Angular 17

Publié fin 2023, Angular 17 a introduit plusieurs fonctionnalités et améliorations importantes visant à améliorer l'expérience des développeurs et les performances.

Contrôle de flux intégré

Pour améliorer l'expérience développeur, Angular 17 introduit une nouvelle syntaxe de modèle de bloc offrant des fonctionnalités puissantes avec des API simples et déclaratives. Le compilateur Angular transforme cette syntaxe en instructions JavaScript efficaces.

• Instructions conditionnelles : simplification de la syntaxe des instructions conditionnelles (*ngIf, *ngSwitch, etc.) pour la rendre plus ergonomique et proche du JavaScript.
• Boucle for intégrée : introduction d'une boucle for intégrée, qui non seulement améliore l'expérience développeur, mais pousse aussi la vitesse de rendu d'Angular à un nouveau niveau : l'instruction @for utilise un nouvel algorithme de comparaison et a une implémentation plus optimale par rapport à *ngFor, ce qui la rend jusqu'à 90 % plus rapide !

Vues différées

Les vues différées, introduites avec Angular 17, représentent une avancée majeure pour le chargement paresseux (lazy loading). En utilisant la nouvelle syntaxe de blocs d'Angular, les vues différées permettent de charger des composants de manière déclarative et puissante, tout en améliorant les performances et l'expérience développeur.

Imaginons que vous ayez un blog et que vous souhaitiez charger paresseusement la liste des commentaires des utilisateurs. Habituellement, cela nécessite l'utilisation de ViewContainerRef et la gestion de divers aspects complexes comme les nettoyages, les erreurs de chargement, les espaces réservés, etc. Avec les vues différées, tout cela se simplifie considérablement.

Dans cet exemple, Angular affiche d'abord le contenu du bloc placeholder. Lorsque celui-ci devient visible dans le viewport, le chargement du composant <comment-list/> commence. Une fois le chargement terminé, Angular remplace le placeholder par le composant.

Expérience de rendu hybride améliorée

Avec Angular 17, le rendu côté serveur (SSR) et la génération de sites statiques (SSG) sont désormais plus accessibles aux développeurs grâce à une nouvelle invite lors de la création d'un projet Angular. Ce changement vise à améliorer l'expérience des développeurs en simplifiant l'activation de ces fonctionnalités dès le départ.

Nouveaux hooks de cycle de vie

Pour améliorer les performances du rendu côté serveur (SSR) et de la génération de sites statiques (SSG), Angular introduit de nouveaux hooks de cycle de vie. À long terme, l'objectif est de s'éloigner de l'émulation du DOM et des manipulations directes du DOM tout en permettant aux applications d'interagir avec les éléments pour instancier des bibliothèques tierces, mesurer la taille des éléments, etc.

Le hook afterRender permet d'enregistrer un callback qui sera invoqué chaque fois que l'application termine de se rendre. Cela permet d'exécuter des actions spécifiques après que le rendu soit complet.

Le hook afterNextRender permet d'enregistrer un callback qui sera invoqué la prochaine fois que l'application termine de se rendre. Cela est particulièrement utile pour exécuter du code après un cycle de rendu spécifique.

Les nouveaux hooks de cycle de vie permettent aux développeurs d'exécuter des tâches spécifiques après les cycles de rendu sans affecter les performances. Ils offrent une plus grande flexibilité et un meilleur contrôle sur l'instanciation des bibliothèques tierces et la gestion des interactions DOM. Ces améliorations permettent de créer des applications plus performantes et plus réactives tout en simplifiant le code.

Vite et esbuild : les nouveaux outils de construction par défaut

Angular 17 intègre Vite et esbuild comme outils de construction par défaut pour les nouveaux projets. Ces outils modernes remplacent les anciennes méthodes de construction, apportant des améliorations significatives en termes de performance et de rapidité.

Des mises à jour ont été apportées au pipeline de construction lors de l'utilisation du rendu hybride. Avec SSR et SSG, vous pouvez observer jusqu'à 87 % d'amélioration de la vitesse de construction (ng build) et en développement (ng serve) jusqu'à 80 % plus rapide.

Principales nouveautés d'Angular 18

Angular 18 marque une étape importante dans l'évolution du framework Angular. Cette version se concentre sur la stabilisation des nouvelles API et l'amélioration des performances.

Angular Material 3 est maintenant stable !

Material 3, également connu sous le nom de "Material You", marque une évolution significative par rapport à Material 2. Une des principales nouveautés est la personnalisation accrue.

Material 3 permet aux utilisateurs de personnaliser l'interface utilisateur avec des schémas de couleurs dynamiques, offrant ainsi une expérience plus personnelle et unique. De plus, les composants ont été mis à jour pour mieux supporter les mises en page adaptatives et les tendances de conception modernes, tout en mettant un accent particulier sur l'accessibilité, ce qui rend les interfaces plus inclusives et utilisables par tous.

L'esthétique a également été raffinée dans Material 3, avec des formes plus organiques et des animations nouvelles qui créent une expérience utilisateur plus fluide et engageante. Contrairement à Material 2, qui mettait l'accent sur des couleurs vives et une typographie audacieuse, Material 3 adopte des couleurs générées dynamiquement en fonction des préférences de l'utilisateur et des paramètres du système, garantissant ainsi une apparence cohérente et personnalisée à travers les applications. Cela se traduit par des interfaces plus harmonieuses et adaptables aux goûts et aux besoins des utilisateurs.

Angular Material est une bibliothèque de composants d'interface utilisateur pour Angular, alignée avec les dernières directives de conception Material Design. Sa version 3 mettant à jour tous les composants Angular pour respecter la nouvelle version de Material est maintenant disponible.

Voici quelques-uns des composants disponibles :

Redirections de routes avec des fonctions

Avec la version 18 d'Angular, la gestion des redirections de routes a été améliorée pour offrir une plus grande flexibilité. Cette fonctionnalité permet maintenant d'utiliser des fonctions pour déterminer dynamiquement la destination d'une redirection en fonction de l'état d'exécution de l'application. Cela permet de créer des logiques de redirection plus complexes et contextuelles.

La propriété redirectTo peut maintenant accepter une fonction qui retourne une chaîne de caractères ou un UrlTree. Cette fonction peut accéder aux paramètres de requête, à l'état de l'application, ou à tout autre service injectable pour déterminer la destination de la redirection.

Événements de changement d'état pour les formulaires

Les classes FormControl, FormGroup et FormArray des formulaires Angular exposent maintenant une propriété appelée events.

Cette propriété permet aux développeurs de s'abonner à un flux d'événements pour chaque contrôle de formulaire, facilitant ainsi le suivi des changements d'état des contrôles.

Amélioration de l'expérience de débogage

Angular DevTools a été mis à jour pour permettre aux développeurs de visualiser le processus d'hydratation des composants Angular. Voici les principales fonctionnalités ajoutées :

1. Icône d'Hydratation : À côté de chaque composant dans Angular DevTools, une icône indique le statut d'hydratation du composant. Cela permet aux développeurs de voir rapidement quels composants ont été hydratés.
2. Mode Overlay : Un mode overlay peut être activé pour prévisualiser quels composants Angular a hydratés sur la page. Cela donne une vue d'ensemble des composants interactifs après le processus d'hydratation.
3. Visualisation des Erreurs d'Hydratation : Si une application rencontre des erreurs d'hydratation, Angular DevTools les visualisera dans l'explorateur de composants. Cela aide les développeurs à identifier et à corriger rapidement les problèmes liés à l'hydratation.

Consultez notre formation Angular qui recevra une grande mise à jour pour la version 19 !