De Rust à WASM avec wasm-pack et React

Le flux de travail standard pour passer de Rust à WASM utilise deux outils : wasm-pack orchestre la compilation (compilation de Rust en WASM, exécution de wasm-bindgen et génération du paquet npm), tandis que wasm-bindgen génère des liaisons JavaScript qui permettent d'appeler les fonctions Rust comme des fonctions JavaScript ordinaires, avec une gestion correcte des types.

L'annotation #[wasm_bindgen] marque les fonctions, structures et méthodes Rust à exporter vers JavaScript. Sans elle, la fonction est compilée en WASM, mais n'est pas accessible depuis JavaScript. Lorsque vous annotez une fonction avec #[wasm_bindgen], wasm-bindgen génère le code de liaison JavaScript qui gère la conversion des arguments et des valeurs de retour.

Voici une fonction Rust exportée minimale : use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. La fonction accepte deux entiers non signés sur 32 bits et en renvoie un. wasm-bindgen génère du JavaScript qui appelle cette fonction avec des arguments numériques et renvoie un résultat numérique.

Exécutez wasm-pack build --target web dans le répertoire du projet Rust. Cette commande compile le code Rust en WASM, exécute wasm-bindgen pour générer les liaisons JavaScript et produit un répertoire pkg/ contenant le binaire .wasm, un module de liaison JavaScript et des définitions de types TypeScript.

Importez le module généré dans votre composant React : import init, { add } from '../pkg/my_lib'. La fonction init charge et instancie le binaire WASM (appelez-la une fois dans un useEffect). Après l'initialisation, appelez directement les fonctions exportées : const result = add(2, 3).

Pour les données complexes qui dépassent les nombres primitifs, wasm-bindgen fournit js_sys::Array (tableau JavaScript), js_sys::Object (objet JavaScript) et wasm_bindgen::JsValue (toute valeur JavaScript). Ces types permettent aux fonctions Rust d'accepter et de renvoyer des tableaux et des objets JavaScript, au prix d'un surcoût de sérialisation supérieur à celui des types primitifs.

Le principe essentiel en matière de performances est le suivant : conservez les données dans la mémoire WASM et effectuez tous les calculs à cet endroit. Transmettez les données une seule fois, effectuez les calculs, puis ne renvoyez que le résultat final. Évitez les modèles qui transfèrent de nouveau les données au-delà de la frontière WASM à chaque étape. Le surcoût de chaque franchissement est faible, mais il s'accumule dans les boucles serrées.

La bibliothèque serde-wasm-bindgen permet de sérialiser des structures Rust vers des objets JavaScript et inversement à l'aide de Serde. Annotez la structure avec #[derive(Serialize, Deserialize)], puis utilisez serde_wasm_bindgen::to_value() et from_value(). Il s'agit de l'approche standard pour transmettre des données structurées complexes.

Les calculs WASM de longue durée bloquent le thread sur lequel ils s'exécutent. Placez WASM dans un Web Worker afin de laisser le thread principal de React disponible. Créez un fichier Worker qui initialise le module WASM et gère les messages. Envoyez les données au worker via postMessage, recevez les résultats via l'événement message, puis mettez à jour l'état React avec le résultat.

wasm-pack génère automatiquement des fichiers de déclaration TypeScript (.d.ts) pour toutes les fonctions et tous les types exportés. Votre projet React TypeScript bénéficie ainsi d'une vérification complète des types lors de l'appel des fonctions Rust. Les types générés reflètent les signatures des fonctions Rust — add(a: number, b: number): number — ce qui permet à l'autocomplétion de l'IDE de fonctionner correctement.

Après optimisation, les binaires WASM font généralement entre 100 Ko et 2 Mo. Activez wasm-opt lors de la compilation avec wasm-pack en définissant opt-level = "z" dans le profil de publication de Cargo.toml afin d'optimiser fortement la taille. Servez les fichiers WASM avec Content-Type: application/wasm et activez HTTP/2 afin que le navigateur diffuse efficacement le binaire.

Quel est le rôle de l'attribut #[wasm_bindgen] dans le code Rust ?

wasm-pack build --target web compile Rust en WASM et génère des liaisons JavaScript via wasm-bindgen. Annotez les fonctions exportées avec #[wasm_bindgen]. Importez init et les fonctions exportées dans React, appelez init() dans un useEffect, puis appelez les fonctions comme du JavaScript ordinaire. Utilisez serde-wasm-bindgen pour la sérialisation de structures complexes. Exécutez WASM dans des Web Workers pour les calculs longs afin de laisser le thread principal de React disponible.