Blazor

framework web gratuit et open-source qui permet aux développeurs de créer des interfaces utilisateur web (UI) basées sur des composants, en utilisant C# et HTML . Il est développé par Microsoft , dans le cadre du framework d'application web ASP.NET Core .

Blazor peut être utilisé pour développer des applications monopages , mobiles ou rendues côté serveur à l'aide des technologies .NET.

.NET . La démonstration comprenait une application interactive exécutée dans le navigateur grâce à WebAssembly et une interface de développement rudimentaire dans Visual Studio. Sanderson a montré comment créer des composants interactifs en utilisant C# et la syntaxe Razor . L'application était ensuite compilée en assemblys .NET exécutés sur DotNetAnywhere, un environnement d'exécution .NET open source tiers léger, lui-même compilé en WebAssembly.

Le nom « Blazor », comme l'explique Steve Sanderson, est un mot-valise formé à partir des mots « browser » et « razor » (issu de la syntaxe Razor utilisée).

Blazor a été officiellement reconnu comme projet open source par Microsoft et, en 2018, dans le cadre de .NET Core 3.0, Blazor Server a été mis à la disposition du public . Il permettait de créer des applications web interactives pilotées par serveur, mettant à jour le navigateur client via WebSockets . Peu après, Blazor WebAssembly a été publié. Contrairement au prototype, il utilisait le runtime Mono .NET sur WebAssembly. Il s'agit du même runtime que celui utilisé pour le développement d'applications mobiles avec .NET MAUI (anciennement Xamarin ).

Le code source de Blazor était initialement hébergé dans son propre dépôt sur GitHub, avant d'être intégré au monorepo d'ASP.NET Core . Le développement s'y poursuit depuis.

Avec la sortie de .NET 5, Blazor a cessé de fonctionner sur Internet Explorer et l' ancienne version de Microsoft Edge .

En 2023, avec .NET 8, Blazor côté serveur a subi des modifications fondamentales afin de permettre le rendu côté serveur (SSR) de pages non interactives par nature, ce qui a permis d'utiliser Blazor comme alternative aux pages Razor de MVC . Grâce à cette évolution, les développeurs peuvent choisir, pour chaque composant (ou page), s'il doit être interactif et s'il doit s'exécuter côté serveur ou dans le navigateur via WebAssembly. Ces options sont appelées « modes de rendu interactifs ».

Composants

Les composants sont officiellement appelés composants Razor .

Un composant Razor est principalement constitué de HTML mélangé à une syntaxe de modèle Razor qui permet l'utilisation en ligne de C# pour influencer le rendu.

Le modèle de composants Blazor garantit que le balisage rendu est mis à jour lorsque l'état du composant change, généralement en réponse à une action de l'utilisateur.

Bien que le balisage et le code C# puissent être placés dans le même .razorfichier, il est également possible d'avoir un fichier code-behind séparé avec une classe partielle.

Les composants sont compilés en classes .NET. Le balisage HTML et Razor d'un composant est traduit en code qui construit un arbre de rendu, lequel pilote ensuite le rendu proprement dit.

Exemple

L'exemple suivant montre comment implémenter un compteur simple qui peut être incrémenté en cliquant sur un bouton :

Incrémenter " > Incrémenter </button> @code { compte entier privé = 0; privée void Incrémenter() { compte++; } }

Modèles d'hébergement

Les applications Blazor peuvent être hébergées de plusieurs manières. Voici les modèles d'hébergement disponibles avec .NET 8.

Application Web Blazor (Serveur)

Une application Blazor hébergée sur un serveur, faisant partie d'une application ASP.NET Core.

Rendu statique côté serveur (SSR)

Par défaut, les composants sont rendus par le serveur sous forme de HTML statique, sans interactivité. L'interactivité peut être activée pour chaque composant en définissant un mode de rendu.

Cela équivaut à la manière dont les vues MVC et les pages Razor sont rendues.

Modes de rendu

Source :

Dans .NET 8, Blazor a introduit le concept de modes de rendu qui configurent si les composants Razor sont interactifs et ce qui pilote cette interactivité.

Le mode de rendu est hérité au sein d'une hiérarchie de composants, depuis son composant parent le plus élevé possédant un mode de rendu défini. Ce mode ne peut être modifié par les composants enfants, sauf si leur mode de rendu est le serveur statique par défaut.

Serveur statique – Le composant est rendu statiquement sur le serveur, sans aucune interactivité. Il s'agit du comportement par défaut.
Serveur interactif – Le composant s'exécute sur le serveur en mode interactif. L'interactivité est gérée par le serveur et les modifications sont transmises au client via WebSocket , à l'aide de SignalR .
WebAssembly interactif – Le composant s'exécute en mode interactif dans le navigateur à l'aide de WebAssembly.
Mode interactif automatique : le composant sera initialement chargé en mode de rendu serveur interactif pendant le téléchargement du bundle Blazor. Lors des visites suivantes, WebAssembly interactif sera utilisé côté client.

Prérendu

Les composants interactifs sont pré-rendus sur le serveur avant d'être matérialisés sur le client et que l'interactivité ne soit activée. Ce comportement est activé par défaut, mais peut être désactivé.

Navigation améliorée

Cette fonctionnalité rend la navigation sur un site statique beaucoup plus fluide, donnant l'impression d'utiliser une application monopage (SPA).

Lors du passage d'une page statique à une autre, l'application intercepte la navigation, récupère uniquement le contenu de la page cible, puis applique uniquement les modifications au DOM . Ainsi, la page ne scintille pas comme c'est généralement le cas lors d'un rechargement complet lors du passage à une autre page.

WebAssembly (Autonome)

Il s'agit d'une application WebAssembly interactive autonome s'exécutant dans le navigateur client.

Lorsqu'on accède à l'application dans un navigateur, le paquet de l'application est téléchargé, puis chargé et exécuté dans l'environnement isolé du navigateur.

Une application WebAssembly peut également être transformée en application web progressive (PWA).

Avant .NET 8, il existait un modèle de projet dans lequel une application Blazor WebAssembly était hébergée au sein d'une application ASP.NET Core contenant des API Web. Ce modèle a été supprimé au profit du modèle de projet d'application Web Blazor, mais ses fonctionnalités restent disponibles.

Hybride

Permet aux applications Blazor de s'exécuter au sein d'une application native à l'aide d'une WebView. Le rendu est effectué dans le processus d'hébergement, sans serveur web.

Les applications hybrides peuvent être hébergées dans une application Windows Presentation Foundation ou WinForms .

Cette approche est utilisée pour créer des applications mobiles natives avec Blazor, en utilisant .NET MAUI .

Serveur (Legacy)

L'objectif était de permettre l'utilisation de composants interactifs pilotés par serveur, les modifications étant envoyées au client via WebSockets.

Un composant a été rendu dans une page Razor MVC.

Il permettait également le prérendu des composants WebAssembly.

Ce modèle d'hébergement était officiellement appelé « Blazor Server ».

Elle a été dépréciée au profit de l'application Web Blazor.