Intégration de WebAssembly et C# : créer des applications web haute performance

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Introduction à WebAssembly et C#

WebAssembly (WASM) est un format d'instructions binaires de bas niveau qui permet d'exécuter du code écrit dans divers langages de programmation dans un navigateur web avec des performances proches du natif. Grâce au support de .NET et C#, les développeurs peuvent transférer des tâches de calcul complexes, des bibliothèques et même des applications entières côté client, en utilisant la syntaxe et l'écosystème familiers de C#.

Dans cet article, nous examinerons comment fonctionne l'intégration de WebAssembly et C# (.NET), quels outils existent pour cela, et nous fournirons des exemples pratiques de code. Cet article sera utile aussi bien aux développeurs débutants qu'aux développeurs expérimentés souhaitant étendre les capacités de leurs projets web.

Comment C# est compilé en WebAssembly

Le processus de compilation de C# en WebAssembly est basé sur l'utilisation de Mono ou du runtime .NET, qui sont adaptés pour fonctionner dans l'environnement WASM. L'outil principal pour cela est Blazor WebAssembly, qui fait partie de la plateforme .NET.

Lorsque vous créez une application Blazor WebAssembly, le compilateur transforme votre code C# en langage intermédiaire (IL), puis le runtime .NET, compilé en WebAssembly, est chargé dans le navigateur avec votre application. Tout le code IL est exécuté par ce runtime directement dans le navigateur.

Avantages de cette approche :

Performances — WebAssembly fonctionne presque à la vitesse du code natif, ce qui est particulièrement important pour les tâches gourmandes en ressources (traitement d'images, chiffrement, calculs mathématiques).
Sécurité — le code s'exécute dans un environnement isolé du navigateur.
Portabilité — le même code C# peut fonctionner à la fois sur le serveur et sur le client.

Exemple pratique : création d'une application Blazor WebAssembly

Examinons la création d'une application simple sur Blazor WebAssembly qui calcule les nombres de Fibonacci en utilisant WebAssembly pour améliorer les performances.

Étape 1 : Installation des outils

Assurez-vous d'avoir installé le SDK .NET (version 6.0 ou supérieure). Pour créer le projet, utilisez la commande :

dotnet new blazorwasm -n FibonacciAppcd FibonacciApp

Étape 2 : Création du service de calcul

Créez le fichier Services/FibonacciService.cs :

using System;using System.Collections.Generic;

namespace FibonacciApp.Services{    public class FibonacciService    {        public List<long> GenerateSequence(int count)        {            var sequence = new List<long>();            long a = 0, b = 1;            for (int i = 0; i < count; i++)            {                sequence.Add(a);                long temp = a;                a = b;                b = temp + b;            }            return sequence;        }

        public long CalculateNth(int n)        {            if (n <= 1) return n;            long a = 0, b = 1;            for (int i = 2; i <= n; i++)            {                long temp = a + b;                a = b;                b = temp;            }            return b;        }    }}

Étape 3 : Enregistrement du service dans l'injection de dépendances

Dans le fichier Program.cs, ajoutez l'enregistrement du service :

using FibonacciApp.Services;using Microsoft.AspNetCore.Components.Web;using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.Add<App>("#app");builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });builder.Services.AddScoped<FibonacciService>();

await builder.Build().RunAsync();