Blazor

9.8 KiB

Raw Permalink Blame History Unescape Escape

sidebar_position	title
3	Introduction

Qu'est-ce que Blazor ?

Blazor est un framework Web open source de Microsoft. Il est sorti en 2018. Il permet aux développeurs de créer des applications à l'aide de C# et des bibliothèques .Net au lieu de JavaScript côté client. Il aide à exécuter l'application dans le navigateur et peut être hébergé avec plusieurs techniques. Les principales techniques sont Blazor Web Assembly (WASM) et Blazor Web Server (Server).

Comme son nom l'indique, Blazor repose sur la syntaxe Razor pour générer des application web.
Pour cela, l'écriture de fichier .razor et .cs, ainsi que les classiques fichiers .css pour la partie design sera nécessaire.
Point le plus évident : Étant donné que l'application Blazor est écrite en C#, le partage de code entre les parties clientes et serveurs sont évidemment très simples, et l'on obtient accès aux packages NuGet également, etc.!

Plusieurs versions de Blazor ?

Blazor WebAssembly

Vos dlls .Net sont envoyées directement au navigateur web et exécutées depuis celui-ci, comme n'importe quel fichier statique.

Non pris en charge sur IE11 et d'anciens navigateurs
Appel API éventuellement refusé par le pare-feu
Exécuté sur le client

Blazor Server

Basé sur la technology SignalR, propose de conserver toute l'exécution de votre application côté serveur.

Code source non accessible
Tous les accès exécutés sur le serveur
Nécessite des serveurs performants

Blazor WebAssembly, plus de détail

Blazor Web Assembly (WASM) est sorti en mai 2020. Il fonctionne de manière très similaire aux frameworks d'application à page unique (SPA) (Angular, React, Vue..). Ici, les composants C# et Razor sont compilés en tant qu'assemblies .Net, puis téléchargés et exécutés côté navigateur (côté client).

Une fois que l'application est téléchargée côté client et qu'elle commence à s'exécuter, il n'y a aucune exigence de SignalR ici pour maintenir la connexion entre le serveur et le client. Les fonctionnalités côté serveur ne peuvent pas être intégrées à cette application et nécessitent une API Web pour communiquer et échanger les données requises.

Voici quelques-uns des avantages de l'utilisation de Blazor Web Assembly

Après le chargement initial, l'interface utilisateur réagit plus rapidement aux demandes des utilisateurs (à l'exception des appels d'API externes), car l'intégralité du contenu du site Web est téléchargée côté client.
Étant donné que l'application est téléchargée côté client, une utilisation hors ligne est possible en cas de problèmes de réseau.

Voici quelques-uns des inconvénients de l'utilisation de Blazor Web Assembly

Le temps de chargement initial élevé de l'application.
La manipulation des fichiers.
L'intéraction avec d'autre système.

Blazor Server, plus de détail

Blazor Server est une technique d'hébergement publiée avec .Net Core. Il utilise l'application ASP.Net Core, qui permet d'intégrer la fonctionnalité côté serveur.

Parallèlement à cela, les pages côté client sont créées à l'aide de composants Razor. Lors de l'exécution de l'application, une connexion est établie entre le navigateur et le côté serveur à l'aide de SignalR (une bibliothèque open source pour les applications basées sur ASP.Net utilisée pour envoyer des notifications asynchrones aux applications Web côté client).

Le serveur envoie ensuite les charges utiles au client, qui met à jour la page. Il permet également une communication bidirectionnelle entre le serveur et le côté client.

Voici quelques-uns des avantages de l'utilisation de Blazor Server

L'application est chargée et rendue rapidement car les utilisateurs ne téléchargent pas les bibliothèques d'applications.
Le code backend est isolé car les fichiers C# ne sont pas envoyés côté client.
Il prend en charge et fonctionne également dans les anciennes versions des navigateurs.

Voici quelques-uns des inconvénients de l'utilisation de Blazor Server

Comme les pages sont envoyées du serveur au côté client, chaque fois qu'il y a des instabilités de réseau, le support hors ligne sera un problème.
Comme l'application crée de nouveaux WebSockets pour chaque connexion, l'évolutivité sera difficile car la quantité de mémoire consommée sera énorme.

Récapitulatif des différences

Caractéristiques	Blazor WebAssembly	Blazor Server
Peut utiliser le code C # pour les applications Web	✔️	✔️
Petite taille de téléchargement	Il faut télécharger .NET Runtime + dépendances	✔️
Fonctionne bien avec les appareils aux ressources limitées	Tout le code doit être exécuté dans le navigateur	✔️
Vitesse d'exécution	✔️	Peut avoir des latences
Sans serveur	✔️	Besoin d'un serveur
Indépendant d'ASP.NET Core	✔️	Besoin d'ASP.NET Core
Indépendant de WebAssembly	Besoin de WebAssembly	✔️
Scabilité	✔️	Peut être un défi après un millier d'utilisateurs en fonction des capacités du serveur
Peut être servi à partir d'un CDN	✔️	Besoin d'un serveur
Mode hors-ligne	✔️	Nécessite une connexion continue
Les codes sensibles sont protégés	Le code est disponible de l'utilisateur	✔️
Utiliser la prise en charge des outils .NET	Non	✔️

Blazor Hybrid (.NET MAUI Blazor app) ???

.NET Multi-platform App UI (MAUI) est un framework multiplateforme. Il vous permet de créer des applications multiplateformes avec une base de code partagée pouvant s'exécuter de manière native sur Android, iOS, macOS et Windows.

Prêt à l'emploi, .NET MAUI prend en charge la liaison de données ; API multiplateformes pour accéder aux fonctionnalités natives de l'appareil telles que le GPS, l'accéléromètre, la batterie et les états du réseau ; un moteur de mise en page (pour concevoir des pages) et une fonctionnalité graphique multiplateforme (pour dessiner, peindre des formes et des images).

La promesse de .NET MAUI est que vous pourrez créer une seule application et la faire fonctionner sur les quatre systèmes d'exploitation. Mais cela va encore plus loin lorsque vous ajoutez Blazor au mélange.

Créer ma première application

dotnet new blazorwasm -o MyBeautifulFirstApp

Lancer ma première application

cd MyBeautifulFirstApp
dotnet run

Ouvrir dans le navigateur : https://localhost:5001

Anatomie de l’application

Basé ASP.NET Core classique, un fichier Program.cs appellera un fichier Startup.cs. En charge de référencer le composant racine Blazor, appelé par convention App.
Pour la partie Blazor, un fichier App.razor définissant le composant racine, ainsi qu'une page par défaut, généralement appelée Index.razor, placée à l'intérieur d'un dossier Pages.
Pour finir, un fichier liant tout ça index.html, contenu dans le dossier wwwroot.
Dans ce fichier, on trouvera notamment une référence vers le framework blazor.webassembly.js qui permettra de charger le runtime dans sa version webassembly, ainsi que toutes les librairies .NET (.dll).
Ci-dessous un petit récapitulatif de tous les fichiers mentionnés :
- Un fichier .csproj de projet C#.
- Un fichier d'entrée Program.cs.
- Un fichier Startup.cs.
- Un composant Blazor racine défini dans un fichier App.razor.
- Une page Index.razor définie dans un dossier Pages (par convention).
- Puis finalement un fichier index.html à l'intérieur du dossier wwwroot qui sera le point d'entrée.

Héberger une application Blazor

Serveur IIS
- Blazor offre une intégration "out-of-the-box", et fournit un fichier web.config nécessaire pour l'hébergement, retrouvable directement parmi les fichiers de publication de notre application. l'installtion du module URL Rewrite est nécessaire.
Docker conteneur
- Grâce à un fichier Dockerfile, utiliser les serveurs Nginx ou Apache.
Azure Blob Storage
- Utilisation de la fonctionnalité Static website qui permet d'exposer les fichiers contenus dans le stockage en http.
Github pages
- Avec quelque modification, il est possible d'heberger des applications Blazor (WASM).
ASP.NET Core
- La meilleure option pour héberger Blazor reste l'application aspnetcore avec un serveur Kestrel.