Da Rust a WASM con wasm-pack e React

Il flusso di lavoro standard da Rust a WASM usa due strumenti: wasm-pack coordina la build (compila Rust in WASM, esegue wasm-bindgen e genera il pacchetto npm), mentre wasm-bindgen genera i binding JavaScript che rendono le funzioni Rust richiamabili come normali funzioni JavaScript, con una corretta gestione dei tipi.

L'attributo #[wasm_bindgen] contrassegna funzioni, strutture e metodi Rust per l'esportazione in JavaScript. Senza di esso, la funzione viene compilata in WASM ma non è accessibile da JavaScript. Quando si annota una funzione con #[wasm_bindgen], wasm-bindgen genera il codice JavaScript di collegamento che gestisce la conversione degli argomenti e dei valori restituiti.

Una funzione Rust esportata minimale: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. La funzione accetta due interi senza segno a 32 bit e ne restituisce uno. wasm-bindgen genera codice JavaScript che chiama questa funzione con argomenti numerici e restituisce un risultato numerico.

Esegua wasm-pack build --target web nella directory del crate Rust. In questo modo il codice Rust viene compilato in WASM, wasm-bindgen viene eseguito per generare i binding JavaScript e viene prodotta una directory pkg/ contenente il binario .wasm, un modulo JavaScript di collegamento e le definizioni dei tipi TypeScript.

Importi il modulo generato nel componente React: import init, { add } from '../pkg/my_lib'. La funzione init carica e istanzia il binario WASM (la chiami una volta in un useEffect). Dopo l'inizializzazione, chiami direttamente le funzioni esportate: const result = add(2, 3).

Per i dati complessi che vanno oltre i numeri primitivi, wasm-bindgen mette a disposizione js_sys::Array (array JavaScript), js_sys::Object (oggetto JavaScript) e wasm_bindgen::JsValue (qualsiasi valore JavaScript). Questi tipi consentono alle funzioni Rust di accettare e restituire array e oggetti JavaScript, sebbene con un overhead di serializzazione maggiore rispetto ai primitivi.

Il principio fondamentale delle prestazioni è mantenere i dati nella memoria WASM ed eseguire tutti i calcoli al suo interno. Passi i dati una sola volta, esegua i calcoli e restituisca solo il risultato finale. Eviti i pattern che trasferiscono ripetutamente i dati oltre il confine WASM a ogni passaggio. L'overhead di ogni attraversamento del confine è ridotto, ma si accumula nei cicli intensivi.

Il crate serde-wasm-bindgen consente di serializzare e deserializzare struct Rust da e verso oggetti JavaScript utilizzando Serde. Annoti la struct con #[derive(Serialize, Deserialize)] e utilizzi serde_wasm_bindgen::to_value() e from_value(). Questo è l'approccio standard per passare dati complessi e strutturati.

I calcoli WASM di lunga durata bloccano il thread su cui vengono eseguiti. Inserisca WASM in un Web Worker per mantenere libero il thread principale di React. Crei un file Worker che inizializzi il modulo WASM e gestisca i messaggi. Invii i dati al worker tramite postMessage, riceva i risultati tramite l'evento message, quindi aggiorni lo stato React con il risultato.

wasm-pack genera automaticamente file di dichiarazione TypeScript (.d.ts) per tutte le funzioni e i tipi esportati. In questo modo il progetto React TypeScript dispone della completa sicurezza dei tipi quando chiama le funzioni Rust. I tipi generati rispecchiano le firme delle funzioni Rust — add(a: number, b: number): number — consentendo il corretto funzionamento del completamento automatico dell'IDE.

I binari WASM hanno in genere dimensioni comprese tra 100 kB e 2 MB dopo l'ottimizzazione. Abiliti wasm-opt nella build di wasm-pack impostando opt-level = "z" nel profilo release di Cargo.toml per un'ottimizzazione aggressiva delle dimensioni. Serva i file WASM con Content-Type: application/wasm e abiliti HTTP/2, in modo che il browser possa eseguire lo streaming efficiente del binario.

Qual è lo scopo dell'attributo #[wasm_bindgen] nel codice Rust?

wasm-pack build --target web compila Rust in WASM e genera binding JavaScript tramite wasm-bindgen. Annoti le funzioni esportate con #[wasm_bindgen]. Importi init e le funzioni esportate in React, chiami init() in un useEffect, quindi chiami le funzioni come normali funzioni JavaScript. Utilizzi serde-wasm-bindgen per la serializzazione di struct complesse. Esegua WASM nei Web Worker per i calcoli di lunga durata, così da mantenere libero il thread principale di React.