Top 10 des fonctionnalités de Blazor que vous ne saviez probablement pas

En tant que framework relativement nouveau, il y a probablement beaucoup de choses que vous ne savez pas encore sur Blazor. Voici 10 fonctionnalités intéressantes de Blazor que vous devriez connaître.

Vous avez peut-être déjà entendu parler de Blazor, le nouveau framework Web .NET qui fonctionne sur WebAssembly. Il est relativement nouveau dans l'écosystème du développement Web et a parcouru un long chemin en peu de temps. Bien que Blazor ait gagné en popularité ces derniers mois, il existe encore de nombreuses idées fausses sur ce dont Blazor est capable. Dans cet article, nous explorerons certaines des fonctionnalités les moins évidentes, mais tout aussi importantes (sans doute les plus importantes) du framework Blazor.

Blazor peut faire tout ce que HTML et CSS peuvent faire

Une question qui est souvent posée à l'approche Blazor concerne l'utilisation d'un cadre d'interface utilisateur, d'une bibliothèque CSS ou d'une fonctionnalité CSS spécifique. La réponse est un oui retentissant. Alors que Blazor utilise des modèles Razor pour créer des composants, le résultat est rendu HTML dans le navigateur. Le HTML et le CSS générés par Blazor ne diffèrent pas du navigateur de tout autre HTML ou CSS. Cela signifie que tous les HTML et CSS valides sont valides dans une application Blazor. Cela signifie que vous pouvez utiliser toutes les fonctionnalités CSS, y compris les requêtes multimédias pour la conception réactive, les propriétés personnalisées CSS (variables) et même les pré-processeurs comme Sass.

Form Components

Blazor a des fonctionnalités supplémentaires pour aider à la génération HTML, comme le build dans les composants Form et Input. Ce sont des composants facultatifs qui résument la tâche courante de création d'un formulaire avec validation. En fin de compte, les composants rendent le HTML standard. Ces composants peuvent utiliser pleinement les attributs HTML standard tels que: class, id et aria -.

Isolation CSS

Blazor a intégré l'isolation CSS qui permet d'éviter les conflits de style entre les composants et les bibliothèques. L'isolation CSS est générée au moment de la construction. À ce stade, Blazor ajoute un identifiant unique aux sélecteurs CSS qui correspondent à un attribut HTML dans le balisage rendu par le composant.

Cette fonctionnalité exploite les attributs CSS et HTML qui sont toutes des technologies Web standard et compris nativement par le navigateur. Le résultat est des sélecteurs CSS avec un haut niveau de spécificité qui ne peut pas être remplacé par une cascade CSS normale.

Fun Fact

Telerik UI for Blazor a été écrit de A à Z pour tirer parti de l'ensemble complet des fonctionnalités du framework Blazor. La logique des composants, les modèles et les API ont été écrits en C #, mais Telerik UI pour Blazor partage une bibliothèque CSS commune avec son frère basé sur JavaScript, Kendo UI. Telerik UI pour Blazor et Kendo L'interface utilisateur est alimentée par une bibliothèque Sass très intuitive et point-and-cl ick générateur de thèmes .

Blazor peut faire tout ce que JavaScript peut faire

Ce n'est pas parce que Blazor utilise .NET et WebAssembly qu'il est limité lorsqu'il travaille avec le navigateur. Le framework Blazor facilite les tâches courantes, telles que l'utilisation du DOM (composants de rendu et HTML), la récupération de données via HTTP et le routage côté client. Bien que Blazor soit activé par .NET et WebAssembly, il n'est pas limité par ceux-ci. Blazor dispose également d'un accès complet aux API JavaScript du navigateur via l'interopérabilité JavaScript (interopérabilité JS). Une application Blazor peut appeler des fonctions JavaScript à partir de méthodes .NET et de méthodes .NET à partir de fonctions JavaScript. L'interopérabilité JavaScript est utilisée lorsque le framework Blazor ne dispose pas d'une API ou d'un composant pour une fonctionnalité souhaitée, ou lorsque les développeurs souhaitent utiliser l'écosystème JavaScript.

Blazor ne peut pas faire ce que JavaScript ne peut pas

Les normes Web et les capacités du navigateur ont évolué pour devenir un environnement riche en fonctionnalités et sécurisé. Les technologies Web standard comme WebAssembly activent non seulement Blazor, mais le limitent aux mêmes critères que JavaScript. Tout simplement parce que Blazor fonctionne sur .NET et WebAssembly ne lui confère pas de capacités spéciales qui vont en dehors du bac à sable de sécurité du navigateur (JavaScript). Cela signifie que Blazor et le code .NET ne peuvent pas lire le registre, détecter l'utilisateur Windows actuellement connecté ou accéder aux comptes Outlook.

Combinaison de MVC + Blazor dans le même projet

Existe-t-il un moyen officiel d'utiliser MVC et Blazor (côté client) dans le même projet?

Si vous vous travaillez actuellement sur une application de pages ASP.NET Core MVC ou Razor, vous pouvez toujours utiliser Blazor. Étant donné que Blazor fait partie d'ASP.NET Core, il peut s'intégrer assez bien aux applications existantes. Ce comportement peut fournir un chemin de migration vers Blazor ou simplement ajouter une flexibilité supplémentaire à votre base de code. Pour utiliser cette fonctionnalité, vous utiliserez l '«assistant de balise de composant » pour rendre le composant Razor souhaité (modèle de composant de Blazor) dans une application MVC.

Cette vidéo YouTube présente l'assistant de balise de composant, et mélanger MVC et Blazor.

Pré-rendu et authentification

Non seulement vous pouvez utiliser Blazor dans une application de pages MVC ou Razor, mais il fait partie de la pile technologique qui permet le pré-rendu du serveur dans Blazor comme ainsi que l'authentification d'identité Microsoft. Lorsque vous utilisez une application Blazor Server ou Blazor WebAssembly avec le pré-rendu activé, l'application utilisera des pages cshtml pour démarrer l'application. Dans une application Blazor Server classique, un fichier _host.cshtml initialise le client Blazor à l'aide d'un assistant de balise de composant, comme illustré dans l'exemple de code ci-dessous.

En outre, les pages d'authentification d'identité sont écrites en cshtml et rendues sur le serveur, même dans un Application Blazor.

SignalR sans JavaScript

Lorsque Blazor est sorti pour la première fois, il n'était possible d'utiliser SignalR que par le biais de bibliothèques JavaScript. Cela a changé et Blazor dispose désormais d'un package NuGet qui active SignalR sans avoir besoin de JavaScript. Le package Microsoft.AspNetCore.SignalR.Client est tout ce dont vous avez besoin pour connecter votre application Blazor à un hub SignalR et la meilleure partie est que vous pouvez tout faire via du code C #. Avec la classe SignalR HubConnection, une application Blazor peut se connecter à un concentrateur, envoyer et recevoir des commandes.

 // Créer une connexion
hubConnection = nouveau HubConnectionBuilder ()
    .WithUrl (NavigationManager.ToAbsoluteUri ("/ chathub"))
    .Construire();

// Démarrer une connexion
attendre hubConnection.StartAsync ();
// Action entreprise à la réception d'une commande
hubConnection.On  ("ReceiveMessage", (utilisateur, message) =>
{
    var encodedMsg = $ "{utilisateur}: {message}";
    messages.Add (nouveau message {Text = encodedMsg});
});

// Appelle une commande hub
Tâche Send () => hubConnection.SendAsync ("SendMessage", userInput, messageInput);

Avec seulement quelques lignes de code, il est possible de créer une application de chat en temps réel en utilisant ASP.NET Core et Blazor WebAssembly .

gRPC et Protobuf

.NET prend entièrement en charge gRPC (Remote Procedure Call), un framework RPC haute performance open source moderne. Avec la sortie de .NET 5.0, ASP.NET Core et Blazor ont reçu une prise en charge intégrée de gRPC. Le support inclut une bibliothèque pour créer un serveur gRPC dans ASP.NET et un client gRPC dans Blazor WebAssembly. Les applications gRPC communiquent entre le client et le service via un canal. Tooling générera automatiquement des classes partielles .NET à partir de fichiers protobuf (.proto) qui représentent des clients et des services concrets. Des classes partielles sont utilisées afin qu'elles puissent être facilement étendues par les développeurs si nécessaire.

Un client gRPC est créé à l'aide d'un canal, qui représente une connexion de longue durée à un service gRPC . Un canal est résolu par injection de dépendances à l'aide de l'objet GrpcChannel.

 @inject GrpcChannel Channel



 @code {
    IList privé ? prévisions;

    Tâche async de remplacement protégé OnInitializedAsync ()
    {
        // Créer un client pour cette chaîne
        var client = new WeatherForecasts.WeatherForecastsClient (Channel);

        // Appelez la méthode WeatherService GetWeatherForecast
        var emptyRequest = new Google.Protobuf.WellKnownTypes.Empty ();
        var response = wait client.GetWeatherForecastsAsync (emptyRequest);

        // Récupère la propriété prévisions
        prévisions = réponse. Prévisions;
    }
}

Ce nouveau protocole permet aux développeurs de choisir entre les API JSON RESTful, les WebSockets avec SignalR ou la communication binaire utilisant gRPC. L'utilisation de gRPC dans une application Blazor est assez simple, il suffit de suivre les étapes de Comment ajouter gRPC à votre application Blazor pour commencer.

Bibliothèques de classes Razor: routage et services

Non seulement c'est Il est facile de partager du code .NET avec les bibliothèques de classes, mais il est tout aussi simple de partager des composants Razor et des ressources Web avec les bibliothèques de classes Razor. Les bibliothèques de classes Razor (RCL) peuvent inclure du CSS, du JavaScript, des fichiers statiques tels que des images et des composants. Les composants d'une RCL peuvent contenir des directives de route et ces routes sont facilement ajoutées à toute application Blazor qui souhaite les consommer.

Configuration du routage partagé

Dans le composant racine d'une application Blazor, App.razor est l'endroit où le routage est configuré par le composant Router. Le composant Router a un paramètre AdditionalAssemblies facultatif qui est utilisé pour localiser les routes à partir d'autres assemblys. Faites simplement référence à l'assembly et Blazor localisera toutes les routes et les ajoutera à l'application. Les routes dupliquées entraîneront une erreur du compilateur, donc à utiliser avec prudence.

     ...
 

Interfaces de service pour les bibliothèques de classes Razor

Outre le partage de routes, les composants des RCL peuvent également utiliser des interfaces pour partager des services. Compte tenu de la nature de Blazor, les applications peuvent s'exécuter côté client dans WebAssembly ou sur le serveur. La principale différence entre les composants exécutés dans WebAssembly et côté serveur réside dans la manière dont ils obtiennent les données. Pour WebAssembly, l'application nécessitera une requête HTTP pour récupérer ses données, mais une application serveur peut interagir avec les services directement sans HTTP. Ecrire un composant indépendant du contexte en cours d'exécution est aussi simple que d'utiliser une interface. L'utilisation d'une interface donne à un composant la flexibilité de tout partager, tout en laissant l'application en cours d'exécution fournir les détails d'implémentation d'un service de données.

Dans la figure ci-dessus, nous pouvons voir un diagramme de la façon dont deux applications peuvent utiliser un composant partagé tout en déléguant un service de données via une interface.

Lazy Loading .NET [19659004] Les performances sont un problème pour toute application et la taille de la charge utile des applications Web fait l'objet d'un examen approfondi. Dans .NET 5.0, une nouvelle infrastructure a été ajoutée pour que Blazor charge les bibliothèques à la demande. Le chargement d'assemblys à la demande réduit le temps de chargement initial de l'application en différant la demande de la ressource jusqu'à ce qu'elle soit nécessaire. Bien que la prise en charge soit incluse dans l'infrastructure Blazor, elle n'est pas activée par défaut et Blazor doit savoir quand charger la ressource. L'un des avantages de la configuration manuelle impliquée est que les spécifications pour le chargement de l'assemblage est personnalisé selon les besoins de l'application. [19659005] Configuration du chargement différé

Quelques étapes sont nécessaires pour activer le chargement différé dans une application. Tout d'abord, les assemblys qui seront chargés tardivement doivent être prédéfinis dans le fichier de configuration csproj de l'application. Le type d'élément BlazorWebAssemblyLazyLoad empêche l'assembly inclus d'être chargé lors du lancement de l'application.

Ensuite, l'application requiert qu'un service soit enregistré pour les assemblys de chargement différé. La classe LazyAssemblyLoader est un service de singleton fourni par le framework pour le chargement d'assemblys. Ce service est enregistré par injection de dépendances et peut donc être injecté dans le composant racine de l'application, App.razor.

 services.AddScoped  ();

Enfin, dans le composant racine de l'application App.razor, la navigation est interceptée à l'aide d'OnNavigateAsync. L'événement OnNavigateAsync est déclenché à chaque navigation de page et peut être utilisé pour charger des assemblys différés en fonction des informations d'itinéraire. Lorsque l’événement est déclenché par la méthode LoadAssembliesAsync de LazyAssemblyLoader, les assemblys sont extraits via un appel réseau et les chargent dans le moteur d’exécution s’exécutant sur WebAssembly dans le navigateur.

 @inject LazyAssemblyLoader assemblyLoader

…
@code {
Tâche asynchrone privée OnNavigateAsync (arguments NavigationContext)
    {
        essayer
        {
            if (args.Path.EndsWith ("/ lazy-assembly"))
            {
                var assemblies = attendre assemblyLoader.LoadAssembliesAsync (
                    nouvelle liste  () {"LazyLoadMe.dll"});
                lazyLoadedAssemblies.AddRange (assemblys);
            }
        }
        catch (Exception ex)
        {
            ...
        }
    }
} 

Chargement différé de JavaScript

Dans .NET 5.0, Blazor a reçu une mise à jour qui fait des modules JavaScript un citoyen de première classe. Avec les modules JavaScript, il est possible de charger des modules paresseux via l'interopérabilité JavaScript, le service JSRuntime. Pour tirer parti de la capacité de chargement dynamique de JSRuntime, la méthode InvokeAsync est utilisée. Le type IJSObjectReference est utilisé car le type de retour attendu de la méthode est une référence au module JavaScript chargé.

Voici l'interopérabilité JavaScript (C #) et le code JavaScript équivalent qui s'exécuterait dans le navigateur pour charger dynamiquement un module.

 // C #
module = attendre JS.InvokeAsync  ("import", "./exampleJsInterop.js");

 // Code JavaScript
let module = wait import (modulePath) 

Une fois le module chargé, ses fonctions JavaScript peuvent être appelées via sa propre méthode InvokeAsync.

 // exampleJsInterop.js
fonction d'exportation showPrompt (message) {
    return prompt (message, 'Tapez quelque chose ici');
}

 // Exemple.razor
@code
{
    Module IJSObjectReference;
    résultat de la chaîne;
    Tâche async de remplacement protégé OnAfterRenderAsync (booléen firstRender)
    {
        if (firstRender)
        {
            module = attendre JS.InvokeAsync  (
                "import", "./exampleJsInterop.js");
        }
    }
        Invite de tâche (message sous forme de chaîne)
        {
            result = attendre module.InvokeAsync  ("showPrompt", message);
        }
    private async ValueTask IAsyncDisposable.DisposeAsync ()
    {
        attendre module.DisposeAsync ();
    } 

Lors de l'utilisation de modules JavaScript, il est important de disposer de leurs ressources une fois qu'elles ne sont plus nécessaires. Dans l'exemple ci-dessus, le composant utilise l'interface IAsyncDisposable pour supprimer le module pendant la méthode de cycle de vie DesposeAsync.

Utiliser des bibliothèques .NET préexistantes

Il y a de fortes chances que le code .NET existant s'exécute dans Blazor sans aucune modification. Étant donné que Blazor exécute du code .NET standard, cela signifie que votre application peut utiliser des DLL .NET et des packages NuGet qui ont été écrits avant la publication de Blazor. Les bibliothèques qui prennent en charge .NET Standard ou .NET Core et ne ciblent pas une API de plate-forme spécifique (ex: Xamarin ou Desktop) fonctionneront probablement dans Blazor. Certaines bibliothèques qui font d'excellents exemples incluent Markdig une bibliothèque pour convertir des chaînes de démarques en HTML, ou FluentValidation pour créer des règles de validation à l'échelle de l'application.

Le moment est venu d'expérimenter avec code que vous avez déjà dans votre bibliothèque personnelle.

Test Full Stack et QA

Blazor est un nouveau framework d'application Web qui promet de fournir des expériences client Web natives sans avoir besoin d'écrire du JavaScript. Les développeurs peuvent facilement créer des applications Web complètes avec le framework et les outils .NET. Beaucoup soulignent cette fondation .NET comme la force de Blazor, mais l'histoire des tests de Blazor pourrait bien être son plus grand potentiel. Dans l'article Blazor Stability Testing Tools for Bulletproof Applications vous trouverez les concepts de base qui font de Blazor un candidat idéal pour les tests et les outils qui prennent en charge: les tests unitaires, les tests d'intégration et les tests système automatisés. [19659003] 5 choses que l'interface utilisateur Telerik pour Blazor peut faire