De Rust a WASM con wasm-pack y React

El flujo de trabajo estándar de Rust a WASM utiliza dos herramientas: wasm-pack coordina la compilación (compila Rust a WASM, ejecuta wasm-bindgen y genera el paquete npm), mientras que wasm-bindgen genera bindings de JavaScript que permiten llamar a las funciones de Rust como funciones normales de JavaScript con una gestión adecuada de los tipos.

El atributo #[wasm_bindgen] marca funciones, estructuras y métodos de Rust para exportarlos a JavaScript. Sin él, la función se compila a WASM, pero no es accesible desde JavaScript. Cuando anota una función con #[wasm_bindgen], wasm-bindgen genera el código auxiliar de JavaScript que gestiona la conversión de los argumentos y los valores devueltos.

Una función de Rust mínima exportada: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. La función recibe dos enteros sin signo de 32 bits y devuelve uno. wasm-bindgen genera JavaScript que llama a esta función con argumentos numéricos y devuelve un resultado numérico.

Ejecute wasm-pack build --target web en el directorio del crate de Rust. Esto compila el código de Rust a WASM, ejecuta wasm-bindgen para generar los bindings de JavaScript y produce un directorio pkg/ que contiene el binario .wasm, un módulo auxiliar de JavaScript y definiciones de tipos de TypeScript.

Importe el módulo generado en su componente React: import init, { add } from '../pkg/my_lib'. La función init carga e instancia el binario WASM (llámela una vez en un useEffect). Después de la inicialización, llame directamente a las funciones exportadas: const result = add(2, 3).

Para datos complejos que van más allá de los números primitivos, wasm-bindgen proporciona js_sys::Array (Array de JavaScript), js_sys::Object (Object de JavaScript) y wasm_bindgen::JsValue (cualquier valor de JavaScript). Estos tipos permiten que las funciones de Rust acepten y devuelvan arrays y objetos de JavaScript, aunque con una sobrecarga de serialización mayor que la de los tipos primitivos.

El principio clave de rendimiento es mantener los datos en la memoria de WASM y realizar allí todos los cálculos. Pase los datos una sola vez, realice los cálculos y devuelva únicamente el resultado final. Evite los patrones que transfieren datos repetidamente a través de la frontera de WASM en cada paso. La sobrecarga de cada cruce de frontera es pequeña, pero se acumula en los bucles intensivos.

El crate serde-wasm-bindgen permite serializar estructuras de Rust a objetos de JavaScript y viceversa mediante Serde. Anote la estructura con #[derive(Serialize, Deserialize)] y utilice serde_wasm_bindgen::to_value() y from_value(). Este es el enfoque estándar para pasar datos estructurados complejos.

Los cálculos de WASM de larga duración bloquean el hilo en el que se ejecutan. Coloque WASM en un Web Worker para mantener libre el hilo principal de React. Cree un archivo Worker que inicialice el módulo WASM y gestione los mensajes. Envíe datos al worker mediante postMessage, reciba los resultados mediante el evento message y, después, actualice el estado de React con el resultado.

wasm-pack genera automáticamente archivos de declaración de TypeScript (.d.ts) para todas las funciones y tipos exportados. Esto proporciona a su proyecto React con TypeScript seguridad de tipos completa al llamar a funciones de Rust. Los tipos generados reflejan las firmas de las funciones de Rust — add(a: number, b: number): number —, por lo que el autocompletado del IDE funciona correctamente.

Los binarios de WASM suelen tener un tamaño de 100kb-2MB después de la optimización. Habilite wasm-opt en la compilación de wasm-pack estableciendo opt-level = "z" en el perfil de release de Cargo.toml para aplicar una optimización agresiva del tamaño. Sirva los archivos WASM con Content-Type: application/wasm y habilite HTTP/2 para que el navegador transmita el binario de forma eficiente.

¿Cuál es el propósito del atributo #[wasm_bindgen] en el código de Rust?

wasm-pack build --target web compila Rust a WASM y genera enlaces de JavaScript mediante wasm-bindgen. Anote las funciones exportadas con #[wasm_bindgen]. Importe init y las funciones exportadas en React, llame a init() en un useEffect y, después, llame a las funciones como si fueran funciones normales de JavaScript. Utilice serde-wasm-bindgen para serializar estructuras complejas. Ejecute WASM en Web Workers para realizar cálculos prolongados sin bloquear el hilo principal de React.