Midi Amotus - Blazor Overview

Raymond Gauthier

2021/02/04

Blazor - Qu’est-ce que c’est?

Blazor - Qu’est-ce que c’est?

Blazor Logo

CSharp Logo

WASM Logo

[Microsoft]

  • Framework gratuit et open-source.

  • Permet la construction d’interface utilisateur côté client en utilisant C# et fichiers *.razor (mix html et C#).

  • Une abtraction intéressante sur le rendering du DOM qui permet que celui-ci soit rendu autant côté client que server.

  • On va même plus loin en permettant que votre static web app en C# roule completement côté client via compilation Web Assembly.

  • Premier release: 2018, donc assez récent.

Blazor - Pourquoi?

Blazor - Pourquoi?

No JS Logo
CSharp <-> JS

DotNet Core Logo
Linux Logo

  • Permet d’écrire votre code en C# plutôt que Javascript.

    On peut donc partager du code entre le frontend et le backend.

  • Functionne super bien en linux!

    Gracieuseté de .NET core.

  • Très simple à mettre en place et rouler:

    $ dotnet new "Blazor Server App"
$ dotnet restore && dotnet run

  • Interopérabilité Javascript.

    Il est donc possible d’utiliser vos libraries javascript préférées si désiré.

Quelques aspect moins intéressants

  • Itération un peu longue lorsque comparée à des languages qui ne requiert pas de phases de compilation.

    • Peu être un peu annuyant lorsqu’on travail sur aspect ui.
    • Hot reload des fichier *.razor apparament à venir.

  • Framework peut être assez opaque / complexe.

    • Beaucoup de documentation pour setup complexes clé en main.

    • Par contre, lorsqu’on veut quelque chose de plus simple / épuré, on est un peu laissé à nous même. Examples:

      • Login simple basé sur cockie session.

    • Il aura fallu à quelques reprises lorsque documentation déficiente:

      • Chercher dans les examples.
      • Chercher dans le code.
      • Heureusement, open source!

Blazor - Concepts de base

Blazor - Fichiers *.razor & composants

Razor Logo

Razor counter example

  • Permet de mixer le code C# et html à même le fichier *.razor.

  • Le composant est un object C#, pouvant avoir des états, etc.

  • Il est possible de complètement séparer le code C# pour qu’il soit dans un *.cs.

    On utilise alors une petite convention de noms.

Blazor - Razor - Code blocs

@{
    var quote = "The future depends on what you do today. - Mahatma Gandhi";
}

<p>@quote</p>

Blazor - Razor - Looping / iterating

@foreach (var person in people)
{
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

Blazor - Razor - Comments

@*
    blabla
*@

Blazor - Razor - Events

Producer component side:

[Parameter]
public EventCallback<MyEventPayload> OnMyEvent { get; set; }

// ..

public async Task SomeOtherMethod()
{
    // ..
    await OnMyEvent.InvokeAsync(MyEventPayload());
}

Consumer side;

<MyComponent
  OnMyEvent="MyEvent"
>
</MyComponent>
public async Task MyEvent(MyEventPayload payload)
{
    // React here.
}

Blazor - App.razor

App.razor example

Blazor - Concepts avancées

Blazor - Hosting models

HM Blazor Wasm

HM Blazor Server

  • Blazor WebAssembly

    • WASM .NET runtime téléchargé coté client via blazor.webassembly.js.

  • Blazor Server

    • Côté client plus léger blazor.server.js établit une connection SignalR avec le server.
    • Support de plus vieux navigateurs (sans support WASM).
    • C’est le hosting model que nous avons utilsé.

Blazor Server - Rendering mode

Définit dans _Host.cshtml via l’attribut render-mode du app.component.

<!-- ... -->
<body>
    <!-- ... -->
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <!-- ... -->
</body>
</html>

  • Voici les mode que j’ai pu essayé:

    • ServerPrerendered

      • Un rendu du DOM est effectué côté server à l’initialization de l’app (code roulé côté server).
      • Ensuite, l’application blazor effectue le rendu côté client.

    • Server

      • Pas de rendu côté server, rendu DOM complètement côté client.

  • Autres valeures possibles:

    Static, WebAssembly, WebAssemblyPrerendered:

    Voir render-mode - doc pour plus de détails.

Blazor - Validation formulaires

  • 2 tags intéressant à connaître:

    <DataAnnotationsValidator />
<ValidationSummary />

  • Une autre découvert côté validation:

    FluentValidation

Blazor - Authorization

From *.razor / blazor pages and components:

It can be retrived using @context.User (context being of type AuthenticationState) when inside the AuthorizeView which itself should be inside the top level App.razor CascadingAuthenticationState.

<AuthorizeView>
    <Authorized>
        @context.User.Identity.Name
    </Authorized>
</AuthorizeView>

From a blazor component:

Otherwise, from a blazor component (still within a top level CascadingAuthenticationState), it can be retrieve using the cascading parameter of type Task<AuthenticationState>:

[CascadingParameter]
private Task<AuthenticationState> AuthenticationStateTask { get; set; }

protected override async Task MyTask()
{
    AuthenticationState state = await AuthenticationStateTask;
}

Blazor Leçons apprises

Blazor Leçons apprises

  • Session and stockage and le contexte Blazer Server:

  • Pour tout ce qui est stockage session (e.g: login, language), on peut faire un roundtrip vers un controlleur MVC standard de façon à raffraîchir les entête de requête avec de nouvelles données.

Questions?

À-propos

À-propos - Cette présentation