🐘 ⛹🏼 🧔🏿 Blazor WebAssembly 3.2.0 Preview 1 est maintenant disponible 📖 🗜️ 👩🏼‍⚕️

Aujourd'hui, nous avons publié une nouvelle mise à jour d'aperçu pour Blazor WebAssembly avec de nombreuses nouvelles fonctionnalités et améliorations.

Voici les nouveautés de cette version:

Version mise à jour vers 3.2.
Lancement simplifié
Améliorations de la taille du téléchargement
Prise en charge du client .NET SignalR

Début

Pour commencer avec Blazor WebAssembly 3.2.0 Preview 1, installez le SDK .NET Core 3.1 , puis exécutez la commande suivante:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

C'est tout! Vous pouvez trouver des documents et des exemples supplémentaires sur https://blazor.net .

Mettre à jour le projet existant

Pour mettre à niveau une application Blazor WebAssembly existante de 3.1.0 Preview 4 vers 3.2.0 Preview 1:

Mettez à jour tous les liens vers les packages Microsoft.AspNetCore.Blazor * vers 3.2.0-preview1.20073.1.
Dans Program.cs dans le projet client Blazor WebAssembly, remplacez BlazorWebAssemblyHost.CreateDefaultBuilder() par WebAssemblyHostBuilder.CreateDefault().
Déplacer les enregistrements de composant racine du projet client Blazor WebAssembly de Startup.Configure la Program.cs en appelant builder.RootComponents.Add<TComponent>( ).
Blazor WebAssembly Startup.ConfigureServices Program.cs builder.Services.
Startup.cs Blazor WebAssembly client project.
Blazor WebAssembly ASP.NET Core, Server app.UseClientSideBlazorFiles<Client.Startup>(...) app.UseClientSideBlazorFiles<Client.Program>(...).

3.2

Dans cette version, nous avons mis à niveau les versions du package Blazor WebAssembly vers 3.2 pour les distinguer de la version récente de .NET Core 3.1 Long Term Support (LTS). Il n'y a pas de version correspondante de .NET Core 3.2 - la nouvelle version 3.2 s'applique uniquement à Blazor WebAssembly. Blazor WebAssembly est actuellement basé sur .NET Core 3.1, mais n'hérite pas du statut de .NET Core 3.1 LTS. Au lieu de cela, la version initiale de Blazor WebAssembly, prévue pour mai de cette année, sera Current , qui est "maintenue pendant trois mois après la prochaine version de Current ou LTS", comme décrit dans la politique de support .NET Core . La prochaine version à venir de Blazor WebAssembly après la version 3.2 en mai sera avec .NET 5. Cela signifie qu'après la sortie de .NET 5, vous devrez mettre à niveau vos applications Blazor WebAssembly vers .NET 5 pour le prendre en charge.

Lancement simplifié

Dans cette version, nous avons simplifié le lancement et l'hébergement des API pour Blazor WebAssembly. Initialement, les API de lancement et de déploiement de Blazor WebAssembly ont été conçues pour refléter les modèles utilisés dans ASP.NET Core, mais tous les concepts n'étaient pas pertinents. Les API mises à jour permettent également d'utiliser de nouveaux scénarios.

Voici à quoi ressemble le nouveau code de démarrage dans Program.cs :

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

Les applications Blazor WebAssembly prennent désormais en charge les Mainméthodes asynchrones pour le point d'entrée de l'application.

Pour créer un hôte par défaut, appelez WebAssemblyHostBuilder.CreateDefault(). Les composants et services racine sont configurés à l'aide de l'éditeur de liens; une classe séparée Startupn'est plus nécessaire. L'exemple suivant est ajouté WeatherService, il est donc disponible via l'injection de dépendance (DI):

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

Une fois l'hôte créé, vous pouvez accéder aux services à partir de l'ID racine avant la présentation des composants. Cela peut être utile si vous devez exécuter une logique d'initialisation avant que quoi que ce soit ne s'affiche:

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync();

        await host.RunAsync();
    }
}

L'hôte fournit également maintenant une instance de la configuration centrale de l'application. La configuration n'est remplie d'aucune donnée par défaut, mais vous pouvez la remplir comme requis dans votre application.

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync(host.Configuration["WeatherServiceUrl"]);

        await host.RunAsync();
    }
}

Améliorations de la taille du téléchargement

Les applications Blazor WebAssembly exécutent l'éditeur de liens .NET IL dans chaque assembly pour supprimer le code inutilisé de l'application. Dans les versions précédentes, seules les bibliothèques de framework principales étaient coupées. À partir de cette version, les assemblages Blazor sont également coupés, ce qui entraîne une légère réduction de taille - environ 100 Ko. Comme précédemment, si vous devez désactiver la liaison, ajoutez la vôtre <BlazorLinkOnBuild>false</BlazorLinkOnBuild> à votre fichier de projet.

Prise en charge du client .NET SignalR

Vous pouvez maintenant utiliser SignalR à partir de vos applications Blazor WebAssembly à l'aide du client .NET SignalR.

Pour essayer SignalR dans votre application Blazor WebAssembly:

Créez une application Blazor WebAssembly hébergée sur ASP.NET Core.
```
dotnet new blazorwasm -ho -o BlazorSignalRApp
```

Ajoutez le package client ASP.NET Core SignalR au projet Client .

cd BlazorSignalRApp
dotnet add Client package Microsoft.AspNetCore.SignalR.Client

Dans le projet Server , ajoutez la classe Hub / ChatHub.cs suivante .

using System.Threading.Tasks;
using Microsoft.AspNetCore.SignalR;

namespace BlazorSignalRApp.Server.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Dans le projet Server , ajoutez les services SignalR dans la méthode Startup.ConfigureServices.
```
services.AddSignalR();
```

Ajoutez également le point de terminaison pour ChatHubat Startup.Configure.

.UseEndpoints(endpoints =>
{
    endpoints.MapDefaultControllerRoute();
    endpoints.MapHub<ChatHub>("/chatHub");
    endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
});

Mettez à jour Pages / Index.razor dans le projet Client avec le balisage suivant.

@using Microsoft.AspNetCore.SignalR.Client
@page "/"
@inject NavigationManager NavigationManager

<div>
    <label for="userInput">User:</label>
    <input id="userInput" @bind="userInput" />
</div>
<div class="form-group">
    <label for="messageInput">Message:</label>
    <input id="messageInput" @bind="messageInput" />
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send Message</button>

<hr />

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    HubConnection hubConnection;
    List<string> messages = new List<string>();
    string userInput;
    string messageInput;

    protected override async Task OnInitializedAsync()
    {
        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chatHub"))
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = user + " says " + message;
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    Task Send() => hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected => hubConnection.State == HubConnectionState.Connected;
}

Créer et exécuter un projet serveur
```
cd Server
dotnet run
```
Ouvrez l'application dans deux onglets de navigateur distincts pour communiquer en temps réel via SignalR.

Problèmes connus

Voici une liste des problèmes connus de cette version qui seront corrigés dans une future mise à jour.

Le démarrage d'une nouvelle application Blazor WebAssembly hébergée sur ASP.NET Core à partir de la ligne de commande génère un avertissement:
```
CSC : warning CS8034: Unable to load Analyzer assembly C:\Users\user\.nuget\packages\microsoft.aspnetcore.components.analyzers\3.1.0\analyzers\dotnet\cs\Microsoft.AspNetCore.Components.Analyzers.dll : Assembly with same name is already loaded.
```
- Solution: cet avertissement peut être ignoré ou supprimé à l'aide de la propriété <DisableImplicitComponentsAnalyzers>true</DisableImplicitComponentsAnalyzers> MSBuild.

Commentaires

Nous espérons que vous apprécierez les nouvelles fonctionnalités de cette version préliminaire de Blazor WebAssembly! Veuillez nous faire savoir ce que vous pensez lorsque vous signalez des problèmes sur GitHub .

Merci d'avoir utilisé Blazor.

Blazor WebAssembly 3.2.0 Preview 1 est maintenant disponible