WebAssembly y Rust: creación de aplicaciones web de alto rendimiento

Introducción a WebAssembly y Rust

Las aplicaciones web modernas requieren cada vez más rendimiento. JavaScript, con todas sus ventajas, no siempre maneja tareas computacionalmente complejas como procesamiento de imágenes, renderizado 3D, criptografía o simulaciones. Aquí es donde WebAssembly (WASM) viene al rescate: un formato de instrucciones binarias que se ejecuta en el navegador con velocidad casi nativa.

El lenguaje Rust se ha convertido en uno de los mejores candidatos para escribir módulos WASM: es seguro, rápido y no tiene recolector de basura. En este artículo, veremos cómo compilar código Rust a WebAssembly, vincularlo con JavaScript y crear aplicaciones web reales de alto rendimiento.

Configuración del entorno para Rust + WASM

Antes de escribir código, instale las herramientas necesarias:

• Rust — instálelo a través de rustup (instalador oficial).
• wasm-pack — la herramienta principal para compilar paquetes WASM.
• wasm-bindgen — biblioteca para vincular Rust y JavaScript.
• Node.js y npm — para probar y compilar el frontend.

# Instalación de wasm-packcurl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Creación de un nuevo proyectocargo new --lib wasm-examplecd wasm-example

Después de crear el proyecto, abra Cargo.toml y agregue las dependencias:

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

[dependencies]wasm-bindgen = "0.2"

Escribiendo nuestra primera función en Rust para WebAssembly

Creemos una función simple que sume dos números y devuelva el resultado. En src/lib.rs escribimos:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn add(a: i32, b: i32) -> i32 {    a + b}

El atributo #[wasm_bindgen] genera automáticamente un envoltorio de JavaScript para esta función. Ahora compilemos el proyecto:

wasm-pack build --target web

Después de la compilación, en la carpeta pkg aparecerán los archivos: .wasm, .js (envoltorio) y .d.ts (tipos TypeScript).

Integración con HTML y JavaScript

Creemos una página HTML simple para probar:

<!DOCTYPE html><html><head>    <script type="module">        import init, { add } from './pkg/wasm_example.js';

        async function run() {            await init();            console.log('2 + 3 =', add(2, 3)); // 5        }        run();    </script></head><body>    <h1>¡Rust + WebAssembly funciona!</h1></body></html>

Abra el archivo a través de un servidor local (por ejemplo, python3 -m http.server) — en la consola del navegador verá el resultado 5.

Trabajo con cadenas y tipos de datos complejos

WebAssembly solo opera con números. Para trabajar con cadenas, arrays y objetos se utiliza wasm-bindgen, que convierte automáticamente los tipos.

Ejemplo: función que devuelve una cadena

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn greet(name: &str) -> String {    format!("¡Hola, {}! Estás usando Rust + WASM.", name)}

En JavaScript:

import init, { greet } from './pkg/wasm_example.js';

await init();console.log(greet("Alejandro")); // "¡Hola, Alejandro! Estás usando Rust + WASM."

Trabajo con arrays (Vec)

Para pasar arrays use Vec<T>. Ejemplo — función que duplica todos los elementos:

#[wasm_bindgen]pub fn double_numbers(arr: Vec<i32>) -> Vec<i32> {    arr.iter().map(|x| x * 2).collect()}

Código JavaScript:

const result = double_numbers([1, 2, 3, 4]);console.log(result); // [2, 4, 6, 8]