Français

Qu'est-ce que le framework Web Blazor de Microsoft et devriez-vous l'utiliser ?

Aug 6, 2021

199

Blazor est un nouveau framework Web de Microsoft conçu pour concurrencer les plateformes leaders du secteur comme React. Sauf qu'au lieu d'utiliser JavaScript, il s'exécute sur l'environnement d'exécution .NET et permet aux développeurs de créer des applications Web interactives avec C# et HTML.

Qu'est-ce qu'ASP .NET Même ?

Si vous venez du monde des frameworks JavaScript, vous pourriez être confus quant à la relation de Blazor avec ASP.NET. Ce sont tous les deux des “infrastructures Web,” mais Blazor n'est qu'une partie de l'écosystème ASP.NET.

Bien que la plate-forme ASP.NET ait presque 20 ans à ce stade, ce n'est pas un framework de dinosaure, il s'améliore constamment aux côtés de C# et .NET dans son ensemble, car Microsoft l'utilise en interne. Il est entièrement multiplateforme et toujours aussi performant.

Au début, il n'y avait qu'ASP.NET, qui peut être utilisé pour créer toutes sortes d'applications Web. Il y avait ASP.NET MVC (Model-View-Controller), qui crée des pages Web basées sur les données, et ASP.NET WebAPI, qui se spécialise dans les API backend. Ceux-ci ont récemment été fusionnés dans un package unifié avec ASP.NET Core modernisé.

Il y a cinq ans, Razor Pages (qui est une chose distincte de Blazor et dont le nom prête à confusion) a été publié pour simplifier la syntaxe expressive de MVC, qui nécessite beaucoup de passe-partout et, en tant que tel, ne fonctionne pas bien avec le composant. conception ciblée d'applications modernes. MVC vous oblige à créer une vue et un modèle pour chaque page dans des fichiers séparés :

Publicité
< p>Pendant ce temps, avec Razor, vous pouvez créer des pages ou des composants plus rationalisés avec du code intégré sur la page elle-même. Cela fonctionne mieux lorsque les pages sont plus simples, mais les deux sont disponibles en tant qu'options que vous pouvez utiliser.

< p>Toutes ces fonctionnalités font partie de “ASP.NET” écosystème. La grande partie à ce sujet est les packages et le support. Tout comme NPM pour JavaScript, C# dispose également d'un environnement de package sain avec le gestionnaire de packages NuGet.

Alors, qu'est-ce que Blazor ?

Blazor ne change rien à la syntaxe de ces pages. Vous utiliserez toujours les pages Razor et/ou MVC. En fait, ce n'est même pas une mauvaise chose, car il existe déjà de nombreuses bibliothèques d'interfaces utilisateur et de composants conçues pour les pages Razor basées sur C#.

Ce que Blazor ajoute, c'est l'interactivité. Les pages MVC/Razor traditionnelles utilisant ASP.NET ont toujours été maladroites et ont eu du mal à suivre les applications Web en temps réel comme React. Les applications Web en temps réel sont si rapides qu'elles commencent également à prendre le dessus sur le bureau, avec des frameworks comme Electron exécutant des applications dans un conteneur Chromium, avec des utilisateurs non avertis.

Ainsi, Blazor a été créé pour répondre à cette demande. Cela fonctionne un peu comme React, où les actions modifient l'état et les accessoires et déclenchent des mises à jour de l'application. Le framework gérera la mise à jour du DOM pour vous en fonction des composants à mettre à jour. Cela permet des applications en temps réel où la page peut être mise à jour ou même complètement redessinée sans avoir à actualiser réellement le navigateur.

L'avantage de Blazor par rapport à un cadre établi comme React est le langage. Il vous permet de créer des applications Web avec C#, et cela seul le rend attrayant pour de nombreux développeurs. Quelle que soit votre opinion sur le débat sur la dactylographie dynamique et statique, il y a certainement des avantages à “desktop” langages comme C#, et le Web manque cruellement d'alternatives à JavaScript.

Si vous avez un backend qui nécessite des performances élevées, C# s'exécutera également beaucoup plus rapidement que JavaScript. Même si JS n'est en aucun cas lent et s'est beaucoup amélioré au fil des ans, il finira toujours par être moins performant que C#, qui fonctionne en fait assez proche des performances natives du C++.

Blazor permet une meilleure interopérabilité. De nombreuses applications utilisent également déjà C# sur le backend. Par exemple, vous pouvez avoir une API ASP.NET qui interagit avec votre interface React. Vous aurez besoin de modèles distincts pour le serveur et le client, ainsi que d'un code distinct pour interagir avec eux. S'ils sont dans la même langue, cela vous permet de partager facilement du code et des bibliothèques entre le client et le serveur. C'est la seule raison pour laquelle NodeJS existe côté serveur, même si JavaScript n'est pas le langage de bureau idéal, le fait d'avoir des applications intégrées dans un seul langage réduit le temps de développement.

L'avenir de Blazor

Il existe en fait différents types de Blazor, car Microsoft a récemment fait un gros effort de développement pour moderniser l'écosystème ASP.NET. Actuellement, deux versions ont été publiées :

Blazor Server, qui fonctionne comme React Server Side Rendering et effectue la plupart du traitement sur le serveur.
Blazor WebAssembly, qui utilise la magie de WebAssembly pour exécuter du code .NET réel dans un navigateur Web client réel.

Microsoft prévoit également de publier trois autres versions de Blazor, qui sont toujours en développement et disponibles en avant-première :

PWA de Blazor, qui est conçu autour de la publication du site en tant qu'application Web progressive (PWA) installable.
Blazor Desktop/Hybrid, qui permet aux applications Blazor d'être empaquetées dans des applications de bureau et est fondamentalement comme Electron mais avec de meilleures performances.
Blazor Native,qui remplace l'interface utilisateur Web par une interface native de la plate-forme. Il n'est pas clair à quel point cela est même utile en plus de l'interopérabilité avec les outils Blazor existants, et cette version est encore en phase de planification.

Dans son annonce pour Blazor Desktop, Microsoft a déclaré que “Blazor est un modèle de programmation d'applications. Il est très adaptable et peut être exécuté de plusieurs manières (selon les besoins).”

Microsoft semble considérer Blazor comme son prochain standard pour créer des interfaces d'applications. Leur travail en vaut également la peine, car à mesure que les applications deviennent de plus en plus dépendantes du Web, il est plus difficile de justifier la création d'interfaces distinctes pour le Web et le bureau. Blazor a un bel avenir et les applications Web créées aujourd'hui sur Blazor Server et WebAssembly auront beaucoup de place pour se développer.

Blazor Server contre Blazor WebAssembly

Blazor Server utilise une connexion SignalR pour communiquer entre le client et le serveur. Il s'agit simplement d'une couche sophistiquée au-dessus d'une connexion WebSocket, qui peut éventuellement se rabattre sur d'autres connexions si nécessaire. Cela conserve tout le traitement sur le serveur et laisse au client une vue simple avec un moyen basique de manipuler le DOM.

Blazor WebAssembly est l'endroit où ça devient vraiment cool. WebAssembly (WASM) n'est pas vraiment un langage dans lequel vous écrivez, mais une cible de compilateur. Il fonctionne en fait presque exactement comme le Microsoft Intermediary Language (MSIL) avec lequel tous les C#, F# et VB.NET sont compilés. Sauf que, plutôt que de s'exécuter avec un runtime .NET, il s'exécute à l'aide du runtime WebAssembly dans le navigateur.

La partie intéressante de WebAssembly est qu'il s'agit d'une cible de compilateur relativement facile à atteindre. Tout comme la façon dont C# peut compiler vers MSIL, C# peut également compiler vers WebAssembly. Eh bien, techniquement, il s'agit de la compilation MSIL vers WebAssembly (car c'est plus simple), mais le point est le même.

N'importe quel langage peut compiler vers WASM, même des langages de bureau entièrement natifs comme C++. Ce n'est pas théorique, cela fonctionne en pratique. AutoDesk a pu porter AutoCAD, une base de code C++ vieille de 30 ans, vers une application Web basée sur WebAssembly, en quelques mois avec une relative facilité. Quelqu'un a même porté Doom 3.

Blazor WebAssembly prend essentiellement l'intégralité du serveur ainsi que l'environnement d'exécution .NET et l'exécute au-dessus de WASM. Ensuite, au lieu de parler au serveur via SignalR, il parle directement au DOM. Cela supprime le traitement côté serveur, ce qui peut être idéal pour certaines applications.

Cela le place dans une position unique pour concurrencer des frameworks comme React, car il s'agit essentiellement du premier véritable concurrent de JavaScript pour les applications Web clientes. Bien que vous deviez ajouter quelques balises de script pour charger le runtime et que vous deviez peut-être plonger vos orteils dans le code JavaScript pour certaines choses, vous devriez, pour la plupart, être capable de créer une application Web de production entière sans écrire une seule ligne de JavaScript.

C'est à vous de décider si vous utilisez Blazor Server ou Blazor WebAssembly. Ils ont tous les deux leurs avantages. Blazor Server exécute tout le code de traitement dans un environnement de confiance et ne nécessite pas que vous ayez une API publique. Blazor WASM est réactif et rapide, et peut même être déployé en tant que site statique servi avec uniquement NGINX.

Comment Blazor fonctionne-t-il avec JavaScript ?

Dans les deux cas, vous disposez en fait d'une interopérabilité JavaScript complète. Blazor peut appeler des fonctions JS à partir de code managé :

private async Task ConvertArray() { text = new(await JS.InvokeAsync<string>(“convertArray”, quoteArray)); }

Et vice versa :

DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});

Cependant, gardez à l'esprit que cela utilisera bien sûr la réflexion, et n'est certainement pas la chose la plus performante au monde.

Vous pouvez techniquement utiliser tous les packages NPM avec Blazor, bien que la configuration et l'interaction avec celui-ci depuis le côté .NET puissent être un peu un casse-tête, vous devriez donc préférer un package NuGet la plupart du temps.

Pouvez-vous utiliser Blazor sur le bureau (Electron) ?

Étonnamment, la réponse à cette question est oui. Alors que Microsoft prévoit de publier Blazor Desktop/Hybrid, qui fait la même chose, en attendant, vous pouvez simplement utiliser Electron normal. En effet, Electron ne se soucie pas vraiment de la page Web qu'il sert et peut simplement servir une application Blazor.

Vous pourriez penser qu'il utiliserait une application Blazor WebAssembly, mais il est en fait plus facile d'ajouter simplement Electron à un serveur ASP.NET Core existant. WASM a une certaine surcharge, donc cette méthode est plus rapide. C'est ce que fait Electron.NET, et cela fonctionne étonnamment bien. Tout ce que vous avez à faire est de l'installer et d'ajouter Electron en tant que service ASP.NET. Vous pouvez également appeler les fonctions natives d'Electron à partir de C#.

Cependant, Microsoft a des projets plus ambitieux pour Blazor Desktop. Ils prévoient de se débarrasser complètement de la dépendance à l'égard d'un navigateur et de JavaScript et d'exécuter simplement un conteneur natif avec une vue Web entièrement en .NET.

“Blazor desktop va être structuré de la même manière que le fonctionnement d'Electron. Il y aura un contrôle WebView qui restituera le contenu d'un serveur Web Blazor intégré, qui peut servir à la fois Blazor et d'autres contenus Web (JavaScript, CSS, etc.).”

Ceci la vue Web utiliserait Safari, WebKitGTK ou WebView2, selon le système d'exploitation. WebView2 utilise Chromium sous le capot, il fonctionnerait donc un peu comme Electron, sauf qu'il est plus performant et utilise moins de mémoire.

Quelle que soit l'implémentation finale, c'est excitant de voir une autre plate-forme en concurrence avec JavaScript et Electron pour la création d'applications Web et de bureau multiplateformes. Blazor Desktop devrait sortir en novembre 2021 avec le premier aperçu de .NET 6.