WebAssembly con Rust

WebAssembly es un lenguaje de bajo nivel, similar a ensamblador, diseñado para ser rápido de cargar y ejecutar en navegadores modernos. Su objetivo es permitir que aplicaciones escritas en distintos lenguajes se ejecuten en la web con velocidad casi nativa.

Los formatos que soporta son:

.wasm: un formato binario ejecutable.
.wat: un formato formato de texto legible.

Se complementa con JavaScript; permite invocar funciones WASM desde JS y viceversa.

Como hemos visto en este blog:

Si quieres usar WebAssembly con C/C++ tendrás que usar Emscripten.
Si quieres usar WebAssembly con Python puedes usar Pyodide.

También puedes optar por usar un lenguaje como Grain cuya compilación es directa a WASM.

¿Cuál es el objetivo de WebAssembly?

El objetivo de WebAssembly es compilar código escrito en lenguajes como Rust, C o C++ (entre otros) y transformarlo en un módulo .wasm que puede ejecutarse en navegadores o en entornos como Node.js con rendimiento cercano al nativo.

Flujo típico de trabajo con WebAssembly

Los pasos son los siguientes:

Escribimos nuestro código en un lenguaje soportado (ej. Rust, C, C++, Go, AssemblyScript).
Compilamos ese código a WebAssembly y se generará un archivo.wasm.
Cargamos el módulo en tu aplicación web usando JavaScript (ver el ejemplo de abajo).
Ejecutamos las funciones exportadas desde el módulo .wasm (ver el ejemplo de abajo) como si fueran algo nativo.

Imaginemos que he creado un programa en C con una función denominada ``miFuncion`` que recibe dos parámetros tipo int y devuelve su suma. Usaría la herramienta Emscripten para generar un código WASM. Este código .wasm podía usarlo desde una página web con JS de esta manera:

const wasmModule = await WebAssembly.instantiateStreaming(fetch("modulo.wasm"));
console.log(wasmModule.instance.exports.miFuncion(5, 7));

Empezando con Rust y WebAssembly

Crearemos una aplicación que determine si un número entero es o no mayor a 100. Posteriormente compilaremos ese código a código .wasm para que se ejecute en una página web.

1. Instalando lo necesario para trabajar con WASM:

$ cargo install wasm-pack

wasm-pack es la herramienta oficial para compilar proyectos Rust a WebAssembly y generar el puente con JavaScript.

2. Crear el proyecto Rust con Cargo:

$ cargo new --lib numero_wasm
$ cd numero_wasm

3. Editamos el archivo ``Cargo.toml``

[package]
name = "numero_wasm"
version = "0.1.0"
edition = "2024"

[dependencies]
wasm-bindgen = "0.2"

[lib]
crate-type = ["cdylib", "rlib"]

Con esto hemos agregado la dependencia wasm-bindgen, que permite exponer funciones Rust a JavaScript.

4.Creamos el código de la función para evaluar si el número entero es o no mayor a cero.

src/lib.rs

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn comparar_numero(n: i32) -> String {
    if n > 100 {
        format!("{} es mayor que 100", n)
    } else if n < 100 {
        format!("{} es menor que 100", n)
    } else {
        format!("{} es igual a 100", n)
    }
}

5. Compilamos el código a WebAssembly:

$ wasm-pack build --target web

Esto nos generará un directorio ``pkg/`` que contendrá los siguientes archivos:

numero_wasm_bg.wasm : el binario WebAssembly.
numero_wasm.js: el "puente" para usarlo en JavaScript.

6. Creamos una página HTML para probar el código .wasm generado en la compilación:

index.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba WebAssembly</title>
</head>
<body>
  <h1>Comparar número con 100</h1>
  <input type="number" id="numero" placeholder="Ingresa un número">
  <button onclick="comparar()">Comparar</button>
  <p id="resultado"></p>

  <script type="module">
    import init, { comparar_numero } from "./pkg/numero_wasm.js";

    async function run() {
      await init();
    }

    run();

    window.comparar = () => {
      const valor = parseInt(document.getElementById("numero").value);
      const resultado = comparar_numero(valor);
      document.getElementById("resultado").textContent = resultado;
    };
  </script>
</body>
</html>

7. Ejecutamos la página web:

$ python -m http.server 8000

En este caso usamos Python para hacerlo, pero podríamos usar http-server de Node.

Abrimos un navegado en la ruta: http://localhost:8000

¡Hemos creado nuestra primera aplicación WebAssembly con Rust!

Continuaremos con este tema en próximas entregas.

Enlaces:

https://webassembly.org/
https://codemonkeyjunior.blogspot.com/2026/04/grain-un-lenguaje-para-webassembly.html

Alquimista de código

Buscar este blog