Fonctionnement de Blazor
Blazor met à votre disposition de nombreuses fonctionnalités pour vous aider à vous lancer et à livrer votre prochain projet d’application web dans les plus brefs délais. Faisons le tour des principales fonctionnalités de Blazor pour vous aider à déterminer s’il est dans votre intérêt d’utiliser Blazor pour votre prochaine application web.
Composants Blazor
Les applications Blazor sont créées à partir de composants. Un composant Blazor est un élément réutilisable de l’interface utilisateur web. Un composant Blazor encapsule à la fois sa logique d’affichage et sa logique de gestion des événements d’interface utilisateur. Blazor compte divers composants intégrés pour la gestion des formulaires, la validation des entrées utilisateur, l’affichage des jeux de données volumineux, l’authentification et l’autorisation. Les développeurs peuvent également créer et partager leurs propres composants personnalisés, et de nombreux composants Blazor prédéfinis sont disponibles dans l’écosystème Blazor.
Utiliser des technologies web standard
Les composants Blazor sont créés en utilisant la syntaxe Razor, mélange pratique de HTML, CSS et C#. Un fichier Razor est constitué de code HTML brut et de C# pour définir une logique d’affichage éventuelle, par exemple pour les instructions conditionnelles, le flux de contrôle et l’évaluation d’expression. Les fichiers Razor sont ensuite compilés en classes C# qui encapsulent la logique d’affichage du composant. Sachant que les composants Blazor créés en Razor sont de simples classes C#, vous pouvez appeler du code .NET arbitraire depuis vos composants.
Gestion des événements d’interface utilisateur et liaison de données
Les composants Blazor interactifs peuvent gérer les interactions d’interface utilisateur web standard à l’aide de gestionnaires d’événements C#. Les composants peuvent mettre à jour leur état en réponse aux événements d’interface utilisateur et ajuster leur affichage en conséquence. Blazor assure également la prise en charge de la liaison de données bidirectionnelle aux éléments d’interface utilisateur. De ce fait, l’état des composants reste synchronisé avec les éléments d’interface utilisateur.
L’exemple suivant est un simple composant de compteur Blazor implémenté dans Razor. Le contenu est constitué essentiellement de HTML, tandis que le bloc @code contient du C#. Chaque fois que l’utilisateur appuie sur le bouton, la méthode C# IncrementCount est appelée, le champ currentCount est incrémenté, puis le composant affiche la valeur mise à jour :
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Affichage côté serveur et côté client
Blazor prend en charge l’affichage côté serveur et côté client des composants de façon à gérer différentes architectures d’interface utilisateur web. Les composants affichés depuis le serveur peuvent accéder aux ressources du serveur, telles que les bases de données et les services back-end. Par défaut, les composants Blazor sont affichés statiquement depuis le serveur, générant du code HTML en réponse aux requêtes.
Vous pouvez également configurer des composants serveur de façon à les rendre interactifs et à leur permettre ainsi de gérer les événements d’interface utilisateur arbitraires, de préserver l’état d’une interaction à l’autre et d’afficher les mises à jour dynamiquement. Les composants serveur interactifs gèrent les interactions et les mises à jour de l’interface utilisateur via une connexion WebSocket avec le navigateur.
Les composants Blazor peuvent également être affichés de manière interactive depuis le client. Le composant est téléchargé sur le client et s’exécute depuis le navigateur via WebAssembly. Les composants WebAssembly interactifs peuvent accéder aux ressources du client via la plateforme web, comme le stockage local et le matériel, et peuvent même fonctionner en mode hors connexion une fois téléchargés.
Vous pouvez choisir d’afficher différents composants depuis le serveur ou le client au sein de la même application. La plupart des pages de votre application ne nécessitent peut-être aucune interactivité, et peuvent être affichées de manière statique à partir du serveur. Alors que d’autres parties plus interactives de votre application peuvent être gérées à partir du serveur ou du client. Vous pouvez choisir le mode d’affichage de composant à utiliser au moment du design ou de l’exécution. Avec Blazor, vous avez la possibilité de créer l’architecture d’application web qui convient à votre scénario.
Utilisation de Blazor pour créer un magasin à pizzas
L’interface utilisateur de l’application de magasin à pizzas se décompose en plusieurs composants réutilisables : une mise en page dotée d’une barre de navigation, des pages individuelles, un catalogue et un éditeur de pizzas, un composant de commande, etc. Blazor offre une prise en charge intégrée de la plupart de ces composants, notamment ceux relatifs aux formulaires et à la validation. Une grande partie des pages de l’application peut être gérée depuis le serveur à l’aide de l’affichage côté serveur statique, si bien que le site est majoritairement sans état et prêt à être mis à l’échelle. Là où il est nécessaire d’avoir plus d’interactivité, vous pouvez rendre les composants interactifs en appliquant un mode d’affichage interactif. Pour alléger la charge de travail du serveur, les composants interactifs sont affichés sur le client via WebAssembly. Comme l’ensemble de l’application repose sur une pile de développement web unique, elle s’assemble rapidement et peut gérer l’afflux de commandes de pizzas à venir.