Livrée le 8 novembre dernier, le framework de développement d'applications web TypeScript de Google passe en version 17 (accessible sur GitHub). En même temps que cette version, Google a publié une syntaxe de modèle de bloc qui offre des fonctionnalités « puissantes » avec des interfaces utilisateur simples et déclaratives. Cette syntaxe de bloc a été utilisée pour optimiser et intégrer le flux de contrôle et propose une meilleure vérification des types grâce à un Narrowing plus optimal des types. Disponible en avant-première pour les développeurs dans Angular 17, le flux de contrôle offre aussi une syntaxe plus ergonomique et plus proche de JavaScript, donc plus intuitive et nécessitant moins de recherches dans la documentation. Il améliore aussi les performances significativement, et il est automatiquement disponible dans les modèles sans importations supplémentaires.

Angular 17 propose par ailleurs un ensemble de nouveaux crochets de cycle de vie, afterRender, pour enregistrer un callback qui sera invoqué chaque fois qu'une application achève le rendu, et afterNextRender, pour enregistrer un callback qui sera invoqué la prochaine fois que l'application achève le rendu. L’idée est d’améliorer les performances du SSR (rendu côté serveur) et du SSG (génération de site statique) d'Angular en s'éloignant éventuellement de l'émulation du DOM et des manipulations directes du DOM. Google affirme que le flux de contrôle améliore de manière significative les performances, avançant des temps d'exécution jusqu'à 90 % plus rapides avec des boucles de flux de contrôle intégrées, des constructions jusqu'à 87 % plus rapides pour le rendu hybride, et jusqu'à 67 % plus rapides pour les constructions pour le rendu côté client. Angular 17 arrive après Angular 16, sorti en mai, qui mettait l'accent sur la réactivité et les performances.

Hydration et Signals en phase preview

Parmi les autres fonctionnalités d'Angular 17, on peut citer :

- Hydration (hydratation) : activé par défaut, ce processus, qui restaure l'application rendue côté serveur sur le client, était jusqu’à présent disponible uniquement en aperçu pour les développeurs. L'hydration améliore les performances en évitant le travail supplémentaire de recréation des nœuds du DOM.

- Signals : assure le suivi granulaire de l'état d'une application. Également sorti de son statut d’aperçu pour les développeurs, la fonctionnalité donne au framework la capacité d'optimiser les mises à jour de rendu. D'autres fonctionnalités pour Signals seront ajoutées pour améliorer l'expérience des développeurs d'ici la version Angular 18.

- Une capacité de vues différentiables, également en aperçu développeur, permet de charger paresseusement – Lazy Loading - des composants des templates et des dépendances transitives avec une seule ligne de code déclaratif.

- L'expérience de rendu hybride a été revue. SSR et SSG sont plus proches des développeurs grâce à une invite dans ng new.

- Le constructeur d'applications Application Builder introduit dans Angular 16, avec ESBuild et une expérience de build alimentée par Vite, est activé par défaut pour les nouvelles applications. Certains utilisateurs font état d’une amélioration de 67 % du temps de construction.

- L'API View Transitions, qui permet des transitions fluides lors de la modification du DOM, est désormais directement prise en charge dans le routeur Angular via la fonctionnalité ViewTransitions.

- La directive image Angular génère désormais automatiquement des liens de préconnexion pour les domaines fournis comme argument au chargeur d'images.

L'équipe de développement d'Angular lance également un aperçu bêta de angular.dev, avec le projet d’en faire le site web par défaut d'Angular avec Angular 18. Ce nouveau site hébergera la documentation Angular et fournira des conseils pour apporter de l’aide sur les dernières fonctionnalités du framework.