Avec .NET 5 qui est à notre porte, plusieurs nouvelles fonctionnalités seront bientôt disponibles pour Blazor et tous les utilisateurs de l’écosystème .NET. Dans cet article, j’avais envie de faire un survol de quelques possibilités qui s’ouvrent à nous en ce qui concerne Blazor. D’autres suivront dans une deuxième partie à paraître très bientôt.
CSS Isolation
Avec la version 3.2 de Blazor, la manière par défaut pour écrire notre CSS était de le faire au niveau de fichiers CSS qu’on inclut à notre page index.html. Si nous avions deux composantes voulant appliquer un style sur un h2 par exemple, il fallait préciser le sélecteur au niveau parent de ce h2 pour faire en sorte qu’ils n’entrent pas en conflits. L’isolation de CSS permet d’écrire nos styles pour une composante spécifique, sans se soucier que ces styles entrent en conflit avec ceux d’une autre composante.
Voici donc l’arrivée de cette fonctionnalité avec .NET 5 pour Blazor. On peut donc maintenant ajouter un fichier css portant le même nom que notre composante, par exemple le fichier component.razor.css pour une composante component.razor. Les styles spécifiés dans ce css seront donc appliqués uniquement sur cette composante, sans entrer en conflit avec une autre composante. Ceci est rendu possible à la compilation, en réécrivant les sélecteurs CSS pour qu’ils fonctionnent uniquement avec la composante. Par la suite, tout est regroupé vers un fichier web statique qui est situé dans le dossier _framework/scoped.styles.css.
Lazy Loading
À chaque projet utilisé côté client qu’on ajoute à notre application, on ajoute une charge supplémentaire pour le navigateur. Chaque dll supplémentaire a un poids et tout dépendant du nombre et de leur taille, cela pourrait ralentir le temps de chargement. Le lazy loading, qui arrive pour Blazor avec .NET 5, permet de charger certaines dll uniquement lorsqu’on a besoin de ses composantes, vient régler cette problématique.
On peut aussi le configurer pour utiliser des composantes avec routes. Ceci nécessite quelques ajustements au niveau de la composante Router, que j’aborderai dans un futur blog et/ou vidéo. Donc grâce à tout ceci, certaines sections seront chargées uniquement en cas de besoin. Non seulement cela optimisera le temps de chargement, mais un autre avantage s’ajoute. Dans une optique d’architecture pilotée par le domaine, une meilleure séparation de concepts se fera dans notre projet client.
JavaScript Isolation
Avec Blazor 3.2, ajouter un fichier JavaScript au niveau d’une librairie nécessite de l’ajouter au niveau du index.html pour pouvoir l’utiliser. Et ceci même si nous avons généré notre fichier en faisant du TypeScript, comme je mentionnais dans un blogue précédant. L’isolation du JavaScript permet de charger le script directement de notre librairie et uniquement exposer une classe C# au reste de notre application.
Component Virtualization
L’ayant moi-même vécu dans un projet sur lequel je travaille, notre UI peut grandement souffrir si une grande liste d’éléments est affichée. La page ralentit, ne s’affiche pas complètement et donc rend l’expérience utilisateur mauvaise. Une nouvelle composante, Virtualize est maintenant disponible avec .NET 5. Grâce à elle, plus besoin d’utiliser un for each. La composante va afficher uniquement ce qui peut être visible dans le conteneur.
De plus, plusieurs paramètres permettent d’enrichir son comportement. On peut fournir une méthode qui ira chercher les résultats. Il est aussi possible de donner un nombre d’éléments qui seront rendus avant et après ce qui est présentement visible. D’autres paramètres sont disponibles, que j’explorerai plus en détails prochainement.
À suivre
Ceci n’est qu’une partie des améliorations qu’amène .NET 5 à Blazor. Un prochain article suivra avec d’autres fonctionnalités qui ont été ajoutées. Puis d’autres pour regarder certaines plus en détails. Est-ce qu’il y a certains de ces ajouts qui vous intéressent, que vous aimeriez voir plus en détails ? N’hésitez pas à me laisser savoir dans les commentaires!
Bruno
French 
English