Sommaire
Yo les codeurs ! Angular 18 est enfin lâché et franchement, les gars derrière se sont pas foutus de nous. Cette nouvelle version du framework JavaScript/TypeScript open-source nous apporte un joli paquet de nouveautés bien senties. On fait le tour ?
Les deferable views, la petite révolution pour booster les perfs
La fonctionnalité phare, c’est sans aucun doute les deferable views. Un joli nom barbu pour désigner ces blocs de code contrasseignés par @defer. Voici le topo : au lieu de devoir attendre que toute la page soit chargée, ces blocs sont capables de s’afficher après le rendu initial. Résultat, vos apps démarrent au quart de tour, et les trucs un peu plus lourds arrivent dans un second temps.
Les deferable views sont probablement la fonctionnalité la plus intéressante de cette mise à jour. Leurs blocs associés sont marqués par @defer et leur but est d’optimiser les performances de chargement en étant chargés après la phase initiale de rendu de la page.
Bon évidemment, ça ne suffira pas à faire tourner les applis Angular comme des bombes sur un vieux PC poussif (désolé les gars). Mais quand on cumule ça avec le nouveau routeur en mode « EagerLoad », ça peut faire des merveilles. Le chargement de vos apps sera vraiment plus rapide, on a hâte de voir ça en vrai !
Et le rendu ? Pas de soucis !
Pis t’inquiète, Angular a pensé à tout. Si tu veux afficher un petit loader ou un placehobder le temps que les deferable views se chargent, pas de problème ! Les blocs @placeholder et @loading sont parfaits pour ça. Un peu de contenu temporaire pour que l’utilisateur ne se sente pas complètement pris pour un pigeon pendant le chargement, ça fait toujours plaisir.
L’event dispatch, pour ne plus jamais rater un seul clic
Uber-cool aussi, la nouvelle feature d’event dispatch. Un truc qui va vous sauver la vie (enfin surtout celle de vos utilisateurs mais c’est déjà pas mal). Imaginez, vous chargez une page avec des boutons ou autres éléments interactifs. Et là, PAF ! Le javascript qui gère tout ça n’est pas encore prêt. Résultat : les clics et autres interactions de l’utilisateur tombent dans le vide. Rien ne se passe, la foutue page bug… La loose quoi.
Eh bien avec l’event dispatch, c’est terminé ce cauchemar. Angular 18 enregistre les événements, même lorsque la page n’est pas encore complètement opérationnelle, pour les rejouer après. Comme ça, plus aucune chance que l’utilisateur attende, rageux, tout en marmonant des insultes sur votre app pourrie (oups pardon).
Merci Wiz ! Ou le précieux héritage
D’ailleurs, sur ce coup-là, on doit bien avouer que les développeurs d’Angular ont eu un sacré coup de pouce. Cette nouvelle fonctionnalité provient en fait de Wiz, un framework utilisé en interne chez Google, notamment pour leurs outils cloud. Et quand les gars de Moutain View ont décidé de merger Wiz dans Angular, bah c’est nous qui en profitons !
L’hydration arrive, ça promet d’être frais !
Bon, on enchaîne avec une autre nouveauté sympa : le support complet de l’hydration pour les composants Material 3. Ça, mes petits gamins, c’est la capacité à transformer du HTML statique en une interface utilisateur interactive grâce au JavaScript.
Concrètement, imaginez un site web qui s’affiche d’abord sous forme de pages statiques, histoire d’être hyper réactif. Et puis après, au chargement, PAF ! Le JavaScript embarqué prend le relais pour hydrater ces pages et rendre tous les éléments du DOM interactifs. Un peu comme quand on ajoute de l’eau à la poudre de lait pour obtenir du lait liquide. Mais en beaucoup plus puissant (et beaucoup moins dégueulasse).
Angular 18 apporte le support complet de l’hydration pour les composants Material 3. Cette fonctionnalité permet à une page web initialement rendue en HTML statique d’être activée par JavaScript côté client, transformant les éléments statiques du DOM en éléments interactifs.
Bref, ça reste de la magie noire pour nous les devs, mais pour l’utilisateur final, ça se traduit par une expérience plus fluide et réactive. Et au final, c’est bien ça le plus important, non ?
Le contrôle de flux, pour montrer ou cacher ce que tu veux
Last but not least, la nouveauté qui va rendre les devs Angular encore plus feignants (mais dans le bon sens du terme, hein). Je vous présente le contrôle de flux, qui fait son grand retour avec les directives @if, @for et @switch.
Concrètement, ça vous permet d’afficher, de masquer ou de réafficher des éléments du DOM en fonction de certaines conditions. Un peu comme les bonnes vieilles directives ngIf, ngFor et ngSwitch, mais en plus puissantes et en plus simple à utiliser (enfin d’après les dév, on verra bien).
Ah oui, j’oubliais un truc ! Ces nouvelles directives sont capables de contrôler le flux de manière granulaire. C’est-à-dire que vous pouvez jouer sur le rendu d’éléments enfants sans impacter leurs parents. Ça pourrait bien vous faciliter la vie pour optimiser les perfs de vos applis, yesss !
