Trabajo con WebAssembly y C#: de la A a la Z en .NET

Introducción: por qué WebAssembly cambia las reglas del juego para los desarrolladores de C#

Durante mucho tiempo, el desarrollo web fue un monopolio de JavaScript. Sin embargo, con la llegada de WebAssembly (Wasm), la situación cambió drásticamente. Ahora, los desarrolladores de C# pueden compilar su código en un formato binario que se ejecuta en el navegador con una velocidad casi nativa. Esto abre enormes posibilidades: desde portar algoritmos pesados hasta crear aplicaciones SPA completas con Blazor.

En este artículo, analizaremos cómo funciona WebAssembly junto con C# y .NET, revisaremos las herramientas clave (Blazor, Wasmtime, Mono) y escribiremos ejemplos prácticos. Al final, podrá ejecutar código C# de forma independiente en el navegador o en el servidor con Wasm.

Fundamentos de WebAssembly y su integración con C#

Qué es WebAssembly en términos sencillos

WebAssembly es un bytecode de bajo nivel que se ejecuta en una máquina virtual del navegador. No reemplaza a JavaScript, sino que funciona junto con él. Las principales ventajas son:

\n
• Rendimiento: el código binario se ejecuta entre un 30-50% más rápido que JS.
\n
• Seguridad: entorno de ejecución aislado.
\n
• Portabilidad: el mismo archivo .wasm funciona en Chrome, Firefox, Safari y Edge.
\n

Para el ecosistema C#, WebAssembly se implementa a través de varios proyectos: Blazor WebAssembly (framework para UI), Mono Wasm Runtime (ejecuta código IL) y Wasmtime (para escenarios de servidor).

Cómo se compila C# a WebAssembly

El proceso es el siguiente:

\n
1. Usted escribe código en C#.
\n
2. El compilador Roslyn lo convierte en IL (lenguaje intermedio).
\n
3. Mono Runtime (o NativeAOT) traduce IL a WebAssembly.
\n
4. El navegador carga el archivo .wasm y lo ejecuta.
\n

Importante: existen dos enfoques: interpretación a través de Mono (más lento, pero más simple) y compilación AOT (más rápido, pero requiere configuración).

Práctica: tres formas de ejecutar C# en WebAssembly

1. Blazor WebAssembly — para interfaces web

Blazor permite escribir la parte del cliente en C# en lugar de JavaScript. Todo el código de UI y la lógica de negocio se compilan en Wasm.

Ejemplo de un componente simple:

@page "/counter"\n<h3>Contador: @currentCount</h3>\n<button @onclick="IncrementCount">+1</button>\n\n@code {\n    private int currentCount = 0;\n\n    private void IncrementCount()\n    {\n        currentCount++;\n    }\n}

Este código se ejecuta en el navegador. Blazor carga automáticamente Mono Wasm Runtime y su archivo .wasm. Para empezar, cree un proyecto:

dotnet new blazorwasm -o MyBlazorApp\ncd MyBlazorApp\ndotnet run

Resultado: una aplicación SPA completa sin una sola línea de JavaScript.

2. Compilación directa a .wasm con NativeAOT

Si necesita ejecutar una función específica (no UI), use NativeAOT — compila C# directamente a WebAssembly nativo sin Mono Runtime.

Pasos:

\n
1. Instale el SDK .NET 8+ y la carga de trabajo: dotnet workload install wasm-tools
\n
2. Cree una aplicación de consola:
\n

dotnet new console -n WasmDemo\ncd WasmDemo

\n
3. Modifique .csproj agregando soporte para Wasm:
\n

<PropertyGroup>\n    <OutputType>Exe</OutputType>\n    <TargetFramework>net8.0</TargetFramework>\n    <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>\n    <UseNativeAot>true</UseNativeAot>\n</PropertyGroup>

\n
4. Escriba el código:
\n

using System;\n\npublic class Program\n{\n    public static void Main()\n    {\n