Blazor : Framework Web .NET

Introduction

Depuis les premiers navigateurs, Javascript a beaucoup évolué pour permettre de développer des applications web plus complexes. L’émergence récente des Web Assembly ouvre la possibilité de compiler du code que les navigateurs pourront exécuter directement sans avoir à parser le code source. Ceci offre une alternative à Javascript pour les développeurs qui souhaitent dynamiser leurs applications avec des langages comme C, C++ ou C#.

Web Assembly est un standard W3C qui consiste en un bytecode s’exécutant dans une sandbox compatible avec Javascript. L’objectif est d’exécuter du code à une vitesse proche du natif avec des fonctionnalités avancées tout en conservant la sécurité et la rétrocompatibilité. L’écosystème Web Assembly est toujours en développement et il est supporté par la plupart des navigateurs web.

Présentation

Microsoft a publié plusieurs versions beta de Blazor, un Framework Web .NET qui s’exécute au sein du navigateur. Blazor se base sur le moteur de rendu Razor pour simplifier la création d’application web monopage aussi appelée Single Page Application.

Frontend

Blazor s’appuie sur les technologies HTML et CSS, mais le C# vient remplacer le Javascript. En effet, la runtime C# .NET est embarquée dans le WASM (Web Assembly) et le navigateur exécute le bytecode du WASM. Il comporte toutes les fonctionnalités d’un Framework moderne tel que le modèle de composant, le routage, la mise en page, l’injection de dépendances, le rendu côté serveur, le débogage .NET et le rechargement à chaud pendant le développement.

blog ai3 Blazor_frontend-300x275 Blazor : Framework Web .NET

Backend

Si le navigateur ne supporte pas Web Assembly, Blazor permet de faire fonctionner l’application dans un environnement asm.js. L’exécution de Blazor côté serveur vous permettra d’écrire votre application web entièrement en C# avec ASP.NET Core, mais il présente quelques inconvénients. Chaque interaction avec l’UI gérée par SignalR nécessite un saut réseau, ceci implique que l’application ne fonctionnera pas hors-ligne et qu’il pourrait y avoir quelques latences en fonction du nombre de connexion.

blog ai3 blazor_backend Blazor : Framework Web .NET

Get started

Prérequis

Votre première application

Ouvrir Visual Studio puis Fichier -> Nouveau -> Projet…
Sélectionner Web et ASP.NET Core Web Application

blog ai3 blazor_tuto1 Blazor : Framework Web .NET

Sélectionnez le template Blazor et compiler la solution.

blog ai3 blazor_tuto2 Blazor : Framework Web .NET

Lancer l’application, vous devez avoir l’écran ci-dessous dans votre navigateur.

blog ai3 blazor_tuto3 Blazor : Framework Web .NET

Ouvrir la page Counter où l’incrémentation dynamique est effectuée en C#.

blog ai3 blazor_tuto4 Blazor : Framework Web .NET

Vous pouvez regarder l’implémentation dans le fichier Counter.cshtml

blog ai3 blazor_tuto5 Blazor : Framework Web .NET

Créer un nouveau fichier Todo.cshtml dans le dossier Pages avec l’implémentation suivante :

Ouvrir le fichier NavMenu.cshtml et ajouter les lignes suivantes :

Créer une classe TodoItem.cs à la racine du projet avec le code suivant :

blog ai3 blazor_tuto9 Blazor : Framework Web .NET

Vous pouvez compiler et relancer votre application, vous venez de coder une todolist avec Blazor !

blog ai3 blazor_tuto10 Blazor : Framework Web .NET

Conclusion

Le projet Blazor est open source et disponible sur Github. Bien que le Framework soit encore au stade expérimental, son approche est vraiment intéressante. Il ne s’agit pas de concurrencer ASP.NET MVC ou Javascript, mais de proposer une nouvelle solution full-stack .NET pour développer des « Single Page Application ».

Sources :
https://blazor.net/index.html
https://blogs.msdn.microsoft.com/webdev/2018/07/25/blazor-0-5-0-experimental-release-now-available/

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.