Trabajo con WebAssembly y Rust: de la A a la Z

Introducción a WebAssembly y Rust

WebAssembly (WASM) es un formato binario de instrucciones de bajo nivel que permite ejecutar código de alto rendimiento en el navegador casi a velocidad nativa. Rust, con su sistema de propiedad y la ausencia de un recolector de basura, es el lenguaje ideal para compilar a WebAssembly. En este artículo, recorreremos el camino desde la instalación de herramientas hasta la creación de un módulo WASM completo en Rust.

¿Por qué Rust? Proporciona un manejo seguro de la memoria, un tamaño de binario mínimo y un rendimiento excelente. En combinación con WebAssembly, obtiene la capacidad de escribir algoritmos complejos, juegos, editores gráficos e incluso aplicaciones completas que se ejecutan en el navegador.

Instalación de herramientas y preparación del entorno

Para comenzar, necesitará:

\n
• Rust (instalado a través de rustup)
\n
• Plataforma objetivo wasm32-unknown-unknown
\n
• Herramienta wasm-pack (compilación y publicación de WASM)
\n
• Un servidor HTTP básico (por ejemplo, python3 -m http.server)
\n

Instalación de la plataforma objetivo y wasm-pack:

# Instalación de la plataforma objetivo para WebAssembly\nrustup target add wasm32-unknown-unknown\n\n# Instalación de wasm-pack\ncargo install wasm-pack

Ahora creemos un nuevo proyecto:

cargo new --lib wasm-rust-demo\ncd wasm-rust-demo

Abra Cargo.toml y agregue la dependencia:

[lib]\ncrate-type = ["cdylib"]\n\n[dependencies]\nwasm-bindgen = "0.2"

La bandera cdylib indica que estamos creando una biblioteca dinámica compatible con WebAssembly.

Escribiendo el primer módulo WASM en Rust

Creemos una función simple que estará disponible desde JavaScript. Edite src/lib.rs:

use wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn greet(name: &str) -> String {\n    format!("¡Hola, {}! ¡Bienvenido al mundo de WebAssembly!", name)\n}\n\n#[wasm_bindgen]\npub fn fibonacci(n: u32) -> u32 {\n    match n {\n        0 => 0,\n        1 => 1,\n        _ => fibonacci(n - 1) + fibonacci(n - 2),\n    }\n}\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n    a + b\n}

El atributo #[wasm_bindgen] permite exportar funciones a JavaScript. Tenga en cuenta: String se convierte automáticamente en una cadena de JavaScript.

Ahora compilemos el proyecto:

wasm-pack build --target web

Después de la compilación, en la carpeta pkg aparecerán los archivos:

\n
• wasm_rust_demo_bg.wasm — módulo WASM compilado
\n
• wasm_rust_demo.js — envoltorio de JavaScript para importación conveniente
\n
• wasm_rust_demo.d.ts — declaraciones de TypeScript
\n

Integración con JavaScript y HTML

Cree un archivo index.html en la raíz del proyecto:

<!DOCTYPE html>\n<html lang="es">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Demo de Rust + WebAssembly</title>\n</head>\n<body>\n    <h1>Ejemplo de Rust + WebAssembly</h1>\n    \n    <div>\n        <h3>Función greet</h3>\n        <input type="text" id="nameInput" placeholder="Ingrese un nombre" value="Mundo">\n        <button id="greetBtn">Saludar</button>\n        <p id="greetOutput"></p>\n    </div>\n\n    <div>\n        <h3>Números de Fibonacci</h3>\n        <input type="number" id="fibInput" value="10" min="0" max="40">\n        <button id="fibBtn">Calcular</button>\n        <p id="fibOutput"></p>\n    </div>\n\n    <script type="module">\n        import init, { greet, fibonacci, add } from './pkg/