Fra Rust til WASM med wasm-pack og React

Den almindelige arbejdsgang fra Rust til WASM bruger to værktøjer: wasm-pack står for byggeprocessen (kompilerer Rust til WASM, kører wasm-bindgen og genererer npm-pakken), mens wasm-bindgen genererer JavaScript-bindinger, som gør Rust-funktioner kaldelige som almindelige JavaScript-funktioner med korrekt typehåndtering.

Attributten #[wasm_bindgen] markerer Rust-funktioner, strukturer og metoder til eksport til JavaScript. Uden den bliver funktionen kompileret til WASM, men er ikke tilgængelig fra JavaScript. Når du markerer en funktion med #[wasm_bindgen], genererer wasm-bindgen JavaScript-forbindelseskode, som håndterer konvertering af argumenter og returværdier.

En minimal eksporteret Rust-funktion: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. Funktionen tager to usignerede 32-bit-heltal og returnerer ét. wasm-bindgen genererer JavaScript, der kalder funktionen med talargumenter og returnerer et talresultat.

Kør wasm-pack build --target web i Rust-pakkens mappe. Det kompilerer Rust-koden til WASM, kører wasm-bindgen for at generere JavaScript-bindinger og skriver en pkg/-mappe med den binære .wasm-fil, et JavaScript-modul med forbindelseskode og TypeScript-typedeklarationer.

Importér det genererede modul i din React-komponent: import init, { add } from '../pkg/my_lib'. Funktionen init indlæser og instantiere WASM-binærfilen (kald den én gang i en useEffect). Efter initialiseringen kan du kalde de eksporterede funktioner direkte: const result = add(2, 3).

Til komplekse data ud over primitive tal tilbyder wasm-bindgen js_sys::Array (JavaScript Array), js_sys::Object (JavaScript Object) og wasm_bindgen::JsValue (enhver JavaScript-værdi). Disse typer gør det muligt for Rust-funktioner at acceptere og returnere JavaScript-arrays og -objekter, dog med større serialiseringsomkostninger end ved primitive værdier.

Det vigtigste performanceprincip er at holde data i WASM-hukommelsen og udføre alle beregninger dér. Overfør data én gang, udfør beregningen, og returnér kun det endelige resultat. Undgå mønstre, der gentagne gange overfører data på tværs af WASM-grænsen for hvert trin. Omkostningen ved hver grænsepassage er lille, men den hober sig op i tætte løkker.

Craten serde-wasm-bindgen gør det muligt at serialisere Rust-strukturer til og fra JavaScript-objekter ved hjælp af Serde. Annotér strukturen med #[derive(Serialize, Deserialize)], og brug serde_wasm_bindgen::to_value() og from_value(). Dette er standardmetoden til at overføre komplekse strukturerede data.

Langvarige WASM-beregninger blokerer den tråd, de kører på. Placér WASM i en Web Worker for at holde Reacts hovedtråd fri. Opret en Worker-fil, der initialiserer WASM-modulet og håndterer meddelelser. Send data til workeren via postMessage, modtag resultater via message-hændelsen, og opdatér derefter React-tilstanden med resultatet.

wasm-pack genererer automatisk TypeScript-erklæringsfiler (.d.ts) for alle eksporterede funktioner og typer. Det giver dit React TypeScript-projekt fuld typesikkerhed, når det kalder Rust-funktioner. De genererede typer afspejler Rust-funktionssignaturerne — add(a: number, b: number): number — så IDE'ens autofuldførelse fungerer korrekt.

WASM-binærfiler er typisk 100kb-2MB efter optimering. Aktivér wasm-opt i wasm-pack-buildet ved at angive opt-level = "z" i Cargo.toml's releaseprofil for aggressiv størrelsesoptimering. Servér WASM-filer med Content-Type: application/wasm, og aktivér HTTP/2, så browseren kan hente binærfilen effektivt som en strøm.

wasm-pack build --target web kompilerer Rust til WASM og genererer JavaScript-bindinger via wasm-bindgen. Annotér eksporterede funktioner med #[wasm_bindgen]. Importér init og de eksporterede funktioner i React, kald init() i en useEffect, og kald derefter funktionerne som almindelig JavaScript. Brug serde-wasm-bindgen til kompleks serialisering af strukturer. Kør WASM i Web Workers ved lange beregninger for at holde Reacts hovedtråd fri.