Travailler avec WebAssembly et Rust : de A à Z

Introduction à WebAssembly et Rust

WebAssembly (WASM) est un format d'instructions binaires de bas niveau qui permet d'exécuter du code haute performance dans le navigateur à une vitesse quasi native. Rust, avec son système de possession et l'absence de ramasse-miettes, est le langage idéal pour la compilation en WebAssembly. Dans cet article, nous parcourrons le chemin allant de l'installation des outils à la création d'un module WASM complet en Rust.

Pourquoi Rust ? Il offre une gestion sécurisée de la mémoire, une taille de binaire minimale et d'excellentes performances. Combiné à WebAssembly, vous obtenez la possibilité d'écrire des algorithmes complexes, des jeux, des éditeurs graphiques et même des applications complètes fonctionnant dans le navigateur.

Installation des outils et préparation de l'environnement

Pour commencer, vous aurez besoin de :

\n
• Rust (installé via rustup)
\n
• La plateforme cible wasm32-unknown-unknown
\n
• L'outil wasm-pack (construction et publication WASM)
\n
• Un serveur HTTP de base (par exemple, python3 -m http.server)
\n

Installation de la plateforme cible et de wasm-pack :

# Installation de la plateforme cible pour WebAssembly\nrustup target add wasm32-unknown-unknown\n\n# Installation de wasm-pack\ncargo install wasm-pack

Créons maintenant un nouveau projet :

cargo new --lib wasm-rust-demo\ncd wasm-rust-demo

Ouvrez Cargo.toml et ajoutez la dépendance :

[lib]\ncrate-type = ["cdylib"]\n\n[dependencies]\nwasm-bindgen = "0.2"

Le drapeau cdylib indique que nous créons une bibliothèque dynamique compatible avec WebAssembly.

Écriture du premier module WASM en Rust

Créons une fonction simple qui sera accessible depuis JavaScript. Modifiez src/lib.rs :

use wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn greet(name: &str) -> String {\n    format!("Bonjour, {} ! Bienvenue dans le monde de WebAssembly !", name)\n}\n\n#[wasm_bindgen]\npub fn fibonacci(n: u32) -> u32 {\n    match n {\n        0 => 0,\n        1 => 1,\n        _ => fibonacci(n - 1) + fibonacci(n - 2),\n    }\n}\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n    a + b\n}

L'attribut #[wasm_bindgen] permet d'exporter les fonctions vers JavaScript. Notez que String est automatiquement converti en chaîne JavaScript.

Construisons maintenant le projet :

wasm-pack build --target web

Après la construction, les fichiers suivants apparaîtront dans le dossier pkg :

\n
• wasm_rust_demo_bg.wasm — le module WASM compilé
\n
• wasm_rust_demo.js — l'emballage JavaScript pour une importation facile
\n
• wasm_rust_demo.d.ts — les déclarations TypeScript
\n

Intégration avec JavaScript et HTML

Créez un fichier index.html à la racine du projet :

<!DOCTYPE html>\n<html lang="fr">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Démo Rust + WebAssembly</title>\n</head>\n<body>\n    <h1>Exemple Rust + WebAssembly</h1>\n    \n    <div>\n        <h3>Fonction greet</h3>\n        <input type="text" id="nameInput" placeholder="Entrez un nom" value="Monde">\n        <button id="greetBtn">Saluer</button>\n        <p id="greetOutput"></p>\n    </div>\n\n    <div>\n        <h3>Nombres de Fibonacci</h3>\n        <input type="number" id="fibInput" value="10" min="0" max="40">\n        <button id="fibBtn">Calculer</button>\n        <p id="fibOutput"></p>\n    </div>\n\n    <script type="module">\n        import init, { greet, fibonacci, add } from './pkg/