Extension Blazor pour Visual Studio permettant de gagner du temps

Vue d'ensemble rapide : Faciliter le développement de Blazor

Tim commence par expliquer l'objectif : aider les développeurs qui utilisent Blazor dans Visual Studio à rationaliser leur flux de travail. Il précise que cette extension cible les petits désagréments tels que la gestion des fichiers razor, les espaces de noms et la séparation du code-behind - des tâches qui peuvent devenir répétitives lorsqu'on travaille avec plusieurs composants Blazor ou pages razor.

Cette extension de Visual Studio n'est pas seulement une question de commodité ; il s'agit d'améliorer les performances de rendu, de simplifier l'interactivité de l'interface utilisateur et d'accélérer votre cycle de développement .NET, en particulier pour les applications web de Blazor.

Installation de l'extension par Jimmy Engström

Tim présente une extension de Visual Studio appelée BLM, créée par Jimmy Engström. Vous pouvez la trouver via Extensions > Gérer les extensions dans Visual Studio en recherchant "BLM extension" Une fois installé, Visual Studio doit être redémarré.

Tim note que l'extension comprend une excellente documentation, directement tirée du fichier README de GitHub. Cela signifie que même les nouveaux développeurs peuvent comprendre comment l'utiliser sans avoir besoin de quitter l'IDE.

Mise en place d'un projet Blazor

Après l'installation, vous devrez soit créer un nouveau projet Blazor, soit ouvrir un projet existant. Tim charge un exemple de projet appelé "SuggestionApp", un projet Blazor Server utilisant .NET Core. Cet exemple est excellent car il montre un mélange de syntaxe Razor et de logique code-behind dans les composants.

Travailler avec Razor Files et Code-Behind

Tim ouvre un fichier Profile.razor et explique qu'il contient à la fois du balisage Razor et de la logique C#. Si vous souhaitez séparer la logique dans un fichier code-behind, l'extension rend la chose aussi simple qu'un clic droit > Créer un code-behind. Cela génère un fichier .razor.cs lié au composant .razor.

Bien que l'exemple contienne déjà du code, Tim le supprime pour simuler un nouveau départ et crée un nouveau composant nommé Test.razor.

Écrire et lier des composants Razor

Dans Test.razor, Tim définit une simple variable de type chaîne :

string test = "hello world";

string test = "hello world";

Il utilise ensuite l'expression @test dans le balisage Razor pour le rendre dans le navigateur. Après compilation du projet, le composant est entièrement fonctionnel. Cet exemple présente le comportement par défaut du rendu de contenu dynamique dans les composants Blazor à l'aide du runtime .NET et des assemblages compilés.

Fonctionnalité Extract to Code-Behind de Visual Studio

Tim fait la démonstration d'une fonctionnalité native de Visual Studio : l'extraction de la logique Razor en ligne dans un fichier code-behind à l'aide de Quick Actions > Refactor > Extract to Code Behind. Cette traduction sépare la couche logique de l'interface utilisateur, ce qui est une bonne pratique pour la maintenabilité et les tests.

L'extension ajoute la fonctionnalité inverse

C'est ici que l'extension montre sa véritable valeur. Si Visual Studio permet de déplacer du code vers un fichier .razor.cs, il ne permet pas de le renvoyer. Avec l'extension, Tim fait un clic droit sur le fichier .razor.cs et choisit "Move Code Behind to Razor" Instantanément, la logique C# est ramenée dans le fichier Razor.

Bien que cette fonctionnalité soit en version bêta, Tim la trouve stable et utile pour les développeurs qui souhaitent simplifier les fichiers ou déboguer la logique en ligne.

Création de fichiers CSS et JS isolés

Tim présente un autre moyen de gagner du temps : clic droit > Créer une feuille de style CSS isolée. Cela crée un fichier nommé Test.razor.css, un modèle que Blazor utilise pour le style spécifique des composants. Tim explique que sans l'extension, vous devez créer manuellement le fichier via Ajouter > Nouvel élément, et veiller à ce que le nom corresponde.

La même fonctionnalité existe pour l'isolation JavaScript, qui permet d'attacher facilement un comportement à des composants individuels - un élément important du développement web lorsqu'il s'agit de créer des composants interactifs et sécurisés.

Trouver l'utilisation des composants dans l'ensemble de l'application

Autre fonctionnalité utile, Tim fait un clic droit sur le composant NotAuthorized et sélectionne "Find Component Usages" Cela permet d'afficher rapidement tous les fichiers dans lesquels ce composant est référencé. Il est incroyablement utile pour le remaniement, en particulier dans les grands projets .NET où les composants sont réutilisés à travers les pages et les mises en page.

Générer des tests BUnit à partir de composants

Les tests sont un élément essentiel de toute application web. Tim montre comment générer automatiquement des tests BUnit, un cadre de test pour Blazor. En cliquant avec le bouton droit de la souris sur un composant et en choisissant "Generate BUnit Test", vous pouvez choisir entre la syntaxe Razor ou C#.

L'outil génère l'échafaudage de test nécessaire, permettant une configuration rapide des tests d'interface utilisateur. Cet outil est parfait pour les développeurs qui souhaitent mettre en œuvre la sécurité, la validation des réponses ou le comportement de l'interface utilisateur par le biais de tests automatisés.

Extraire l'interface utilisateur partagée en composants réutilisables

Ensuite, Tim montre comment vous pouvez mettre en surbrillance n'importe quel bloc de Razor UI et choisir "Extraire vers un composant" Dans sa démonstration, il extrait un bouton à l'intérieur d'un conteneur dans un nouveau composant appelé TestButton. Cela permet un code plus propre, une meilleure réutilisation et une conception modulaire de l'interface utilisateur, ce qui est particulièrement important lors du développement d'applications mobiles, d'applications hybrides Blazor ou d'applications web à grande échelle.

Visualisation des itinéraires dans votre application Blazor

Une autre fonctionnalité remarquable est Show Blazor Routes, accessible via Extensions > BLM > Show Blazor Routes. Cet outil répertorie toutes les routes définies dans votre projet - celles définies avec la directive @page dans les fichiers Razor.

Tim démontre que la modification de la directive @page dans Test.razor met instantanément à jour la liste des itinéraires. Vous pouvez double-cliquer sur n'importe quelle route de la liste pour ouvrir le composant correspondant. Ces outils rendent la gestion de la navigation beaucoup plus efficace, en particulier dans les applications utilisant une navigation améliorée, des modes de rendu multiples ou des composants profondément imbriqués.

Exécuter le projet avec .NET Watch

Tim partage un conseil important en matière de performances : utiliser .NET Watch via PowerShell au lieu de se fier au rechargement à chaud intégré de Visual Studio. Il explique que le rechargement traditionnel est plus lent et moins cohérent. Mais avec l'extension, vous pouvez faire un clic droit sur votre projet et sélectionner "Run .NET Watch"

Cela permet de lancer une fenêtre PowerShell et d'exécuter l'application à l'aide de la commande suivante :

dotnet watch

dotnet watch

Cela permet un rechargement en direct, un démarrage plus rapide et un développement plus réactif. Pour les développeurs qui déploient sur un serveur web, ou qui construisent des applications dites progressives, ce gain de vitesse peut considérablement améliorer l'expérience de développement.

Pensées finales : Pourquoi vous devriez installer cette extension

Dans la dernière minute, Tim récapitule la puissance de cette extension Visual Studio pour le développement de Blazor. Que vous construisiez une application Blazor WebAssembly, un projet côté serveur ou quoi que ce soit entre les deux, cet outil fournit :

• Création plus rapide de fichiers et de composants

• Séparation plus nette du code Razor et du code C#

• Tests et découverte d'itinéraires plus faciles

• Meilleure compréhension de l'arbre de rendu

• Meilleure gestion de la syntaxe et du balisage compilés

Tim recommande vivement à tous ceux qui travaillent avec des applications .NET, C# ou Blazor d'installer cette extension et d'envisager de l'intégrer à leur chaîne d'outils par défaut.

Conclusion : Blazor + Visual Studio = encore mieux avec cette extension

Si vous développez des applications web modernes à l'aide de Blazor dans Visual Studio, la présentation de Tim Corey montre à quel point cette petite extension peut être puissante. Avec des fonctionnalités qui améliorent la gestion des fichiers, les tests, le routage et l'efficacité de la construction, il offre des gains importants avec une configuration minimale.

Grâce au travail de Jimmy Engström, les développeurs ont désormais accès à un outil qui s'aligne parfaitement sur l'écosystème Blazor et .NET Core - réduisant le travail manuel, permettant une meilleure conception des composants et améliorant l'interactivité et la maintenabilité globales du projet.

Que vous travailliez sur des applications mobiles, de bureau ou web, cette extension vous aide à exploiter tout le potentiel de Blazor, de Visual Studio et du runtime .NET. Pour plus de détails, regardez la vidéo de Tim et abonnez-vous à sa Channel pour d'autres vidéos perspicaces sur le C# et le développement.