Integração de WebAssembly e C#: criando aplicações web de alto desempenho

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

Introdução ao WebAssembly e C#

WebAssembly (WASM) é um formato binário de instruções de baixo nível que permite executar código escrito em várias linguagens de programação no navegador web com desempenho próximo ao nativo. Graças ao suporte do .NET e C#, os desenvolvedores podem transferir tarefas computacionais complexas, bibliotecas e até aplicativos inteiros para o lado do cliente, usando a sintaxe e o ecossistema familiares do C#.

Neste artigo, veremos como funciona a integração do WebAssembly e C# (.NET), quais ferramentas existem para isso e forneceremos exemplos práticos de código. O artigo será útil tanto para desenvolvedores iniciantes quanto experientes que desejam expandir as capacidades de seus projetos web.

Como o C# é compilado para WebAssembly

O processo de compilação do C# para WebAssembly é baseado no uso do Mono ou .NET runtime, que são adaptados para funcionar no ambiente WASM. A principal ferramenta para isso é o Blazor WebAssembly, que faz parte da plataforma .NET.

Quando você cria um aplicativo Blazor WebAssembly, o compilador transforma seu código C# em linguagem intermediária (IL) e, em seguida, o .NET runtime, compilado para WebAssembly, é carregado no navegador junto com seu aplicativo. Todo o código IL é executado por esse runtime diretamente no navegador.

Vantagens dessa abordagem:

Desempenho — WebAssembly funciona quase na velocidade do código nativo, o que é especialmente importante para tarefas que consomem muitos recursos (processamento de imagens, criptografia, cálculos matemáticos).
Segurança — o código é executado em um ambiente isolado do navegador.
Portabilidade — o mesmo código C# pode funcionar no servidor e no cliente.

Exemplo prático: criando um aplicativo Blazor WebAssembly

Vamos considerar a criação de um aplicativo simples em Blazor WebAssembly que calcula números de Fibonacci usando WebAssembly para melhorar o desempenho.

Passo 1: Instalação das ferramentas

Certifique-se de ter o .NET SDK instalado (versão 6.0 ou superior). Para criar o projeto, use o comando:

dotnet new blazorwasm -n FibonacciAppcd FibonacciApp

Passo 2: Criando o serviço de cálculo

Crie o arquivo 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;        }    }}

Passo 3: Registrando o serviço no DI

No arquivo Program.cs, adicione o registro do serviço:

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();