Integración de WebAssembly y C#: creando aplicaciones web de alto rendimiento

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Introducción a WebAssembly y C#

WebAssembly (WASM) es un formato binario de instrucciones de bajo nivel que permite ejecutar código escrito en varios lenguajes de programación en el navegador web con un rendimiento cercano al nativo. Gracias al soporte de .NET y C#, los desarrolladores pueden trasladar tareas computacionales complejas, bibliotecas e incluso aplicaciones completas al lado del cliente, utilizando la sintaxis y el ecosistema familiar de C#.

En este artículo, exploraremos cómo funciona la integración de WebAssembly y C# (.NET), qué herramientas existen para ello y proporcionaremos ejemplos prácticos de código. El artículo será útil tanto para desarrolladores principiantes como experimentados que deseen ampliar las capacidades de sus proyectos web.

Cómo se compila C# a WebAssembly

El proceso de compilación de C# a WebAssembly se basa en el uso de Mono o el runtime de .NET, que están adaptados para funcionar en el entorno WASM. La herramienta principal para esto es Blazor WebAssembly, que forma parte de la plataforma .NET.

Cuando creas una aplicación Blazor WebAssembly, el compilador transforma tu código C# en lenguaje intermedio (IL), y luego el runtime de .NET, compilado en WebAssembly, se carga en el navegador junto con tu aplicación. Todo el código IL se ejecuta mediante este runtime directamente en el navegador.

Ventajas de este enfoque:

Rendimiento — WebAssembly funciona casi a la velocidad del código nativo, lo que es especialmente importante para tareas que consumen muchos recursos (procesamiento de imágenes, cifrado, cálculos matemáticos).
Seguridad — el código se ejecuta en un entorno aislado del navegador.
Portabilidad — el mismo código C# puede funcionar tanto en el servidor como en el cliente.

Ejemplo práctico: creación de una aplicación Blazor WebAssembly

Consideremos la creación de una aplicación simple en Blazor WebAssembly que calcula números de Fibonacci utilizando WebAssembly para mejorar el rendimiento.

Paso 1: Instalación de herramientas

Asegúrate de tener instalado el .NET SDK (versión 6.0 o superior). Para crear el proyecto, usa el comando:

dotnet new blazorwasm -n FibonacciAppcd FibonacciApp

Paso 2: Creación del servicio de cálculo

Crea el archivo 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;        }    }}

Paso 3: Registro del servicio en DI

En el archivo Program.cs, agrega el registro del servicio:

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