WebAssembly et Rust : création d'applications web haute performance

Introduction à WebAssembly et Rust

Les applications web modernes nécessitent de plus en plus de performances. JavaScript, malgré tous ses avantages, ne parvient pas toujours à gérer les tâches complexes en termes de calcul — traitement d'images, rendu 3D, cryptographie ou simulations. C'est là qu'intervient WebAssembly (WASM) — un format d'instructions binaires qui s'exécute dans le navigateur à une vitesse quasi native.

Le langage Rust est devenu l'un des meilleurs candidats pour écrire des modules WASM : il est sûr, rapide et ne possède pas de ramasse-miettes. Dans cet article, nous allons voir comment compiler du code Rust en WebAssembly, le lier à JavaScript et créer de véritables applications web hautes performances.

Configuration de l'environnement pour Rust + WASM

Avant d'écrire du code, installez les outils nécessaires :

• Rust — installez-le via rustup (l'installateur officiel).
• wasm-pack — l'outil principal pour compiler les paquets WASM.
• wasm-bindgen — la bibliothèque pour lier Rust et JavaScript.
• Node.js et npm — pour tester et compiler le frontend.

# Installation de wasm-packcurl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Création d'un nouveau projetcargo new --lib wasm-examplecd wasm-example

Après avoir créé le projet, ouvrez Cargo.toml et ajoutez les dépendances :

[lib]crate-type = ["cdylib"]

[dependencies]wasm-bindgen = "0.2"

Écrire notre première fonction en Rust pour WebAssembly

Créons une fonction simple qui additionne deux nombres et retourne le résultat. Dans src/lib.rs, écrivons :

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn add(a: i32, b: i32) -> i32 {    a + b}

L'attribut #[wasm_bindgen] génère automatiquement un wrapper JavaScript pour cette fonction. Compilons maintenant le projet :

wasm-pack build --target web

Après la compilation, les fichiers suivants apparaîtront dans le dossier pkg : .wasm, .js (le wrapper) et .d.ts (les types TypeScript).

Intégration avec HTML et JavaScript

Créons une simple page HTML pour le test :

<!DOCTYPE html><html><head>    <script type="module">        import init, { add } from './pkg/wasm_example.js';

        async function run() {            await init();            console.log('2 + 3 =', add(2, 3)); // 5        }        run();    </script></head><body>    <h1>Rust + WebAssembly fonctionne !</h1></body></html>

Ouvrez le fichier via un serveur local (par exemple, python3 -m http.server) — dans la console du navigateur, vous verrez le résultat 5.

Travailler avec des chaînes de caractères et des types de données complexes

WebAssembly ne manipule que des nombres. Pour travailler avec des chaînes de caractères, des tableaux et des objets, on utilise wasm-bindgen, qui convertit automatiquement les types.

Exemple : une fonction retournant une chaîne de caractères

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn greet(name: &str) -> String {    format!("Bonjour, {} ! Tu utilises Rust + WASM.", name)}

En JavaScript :

import init, { greet } from './pkg/wasm_example.js';

await init();console.log(greet("Alexandre")); // "Bonjour, Alexandre ! Tu utilises Rust + WASM."

Travailler avec des tableaux (Vec)

Pour passer des tableaux, utilisez Vec<T>. Exemple — une fonction qui double tous les éléments :

#[wasm_bindgen]pub fn double_numbers(arr: Vec<i32>) -> Vec<i32> {    arr.iter().map(|x| x * 2).collect()}

Code JavaScript :

const result = double_numbers([1, 2, 3, 4]);console.log(r