0Pricing
Learn Rust Coding · Leçon

Rust vers WebAssembly (WASM)

Compilez du code Rust en WebAssembly afin d’exécuter des modules très performants dans les navigateurs web et d’autres environnements d’exécution WASM.

Rust vers WebAssembly (WASM) est une leçon Learn Rust Coding gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Learn Rust Coding, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Learn Rust Coding comprend 3 leçons au total.

Qu’est-ce que WebAssembly (WASM) ?

WebAssembly, ou WASM, est un format d’instructions binaires destiné à une machine virtuelle fondée sur une pile. Il est conçu comme cible de compilation portable pour des langages de haut niveau tels que Rust, C/C++ et Go.

Considérez-le comme un langage de bas niveau proche de l’assembleur, qui s’exécute efficacement dans les navigateurs web et d’autres environnements. Il permet d’exécuter du code exigeant en performances à des vitesses proches de celles du code natif.

Les avantages de Rust pour WASM

Rust est un excellent choix pour le développement avec WebAssembly grâce à ses atouts uniques :

  • Performances : Rust est réputé pour sa rapidité, proche de celle de C/C++.
  • Sécurité de la mémoire : le système de propriété de Rust évite les bogues courants sans récupérateur de mémoire.
  • Binaires compacts : le moteur d’exécution minimal de Rust produit des modules WASM compacts.
  • Outils : excellente prise en charge avec des outils comme wasm-pack et wasm-bindgen.

Configurer vos outils WASM

Pour compiler Rust vers WebAssembly, vous utiliserez principalement wasm-pack. Il s’agit d’un outil en ligne de commande qui gère l’ensemble du processus de compilation.

Vous utiliserez également wasm-bindgen, une caisse Rust et un outil CLI qui facilitent les interactions de haut niveau entre les modules WASM et JavaScript.

Pour installer wasm-pack, ouvrez votre terminal et exécutez :

cargo install wasm-pack

Votre premier projet WASM

Créons un nouveau projet Rust adapté à WebAssembly. Nous utiliserons cargo generate avec un modèle spécifique :

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

Suivez les instructions pour nommer votre projet. Cela configure un fichier lib.rs prêt à accueillir du code WASM ainsi qu’un répertoire www pour une interface web simple.

Fonction Rust pour JavaScript

Pour rendre une fonction Rust appelable depuis JavaScript, nous utilisons l’attribut #[wasm_bindgen] de la caisse wasm-bindgen.

Cet attribut indique à wasm-bindgen de générer le code de liaison nécessaire pour que JavaScript puisse interagir avec votre fonction Rust.

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

Intégrer WASM à JavaScript

Après avoir écrit votre code Rust, vous le compilez en module WASM à l’aide de wasm-pack build. Cette commande crée un répertoire pkg contenant votre fichier .wasm et le code de liaison JS.

Ensuite, dans votre code JavaScript, vous pouvez facilement importer et utiliser les fonctions Rust exportées :

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

Appeler JavaScript depuis Rust

Rust peut également appeler des fonctions JavaScript. Vous les déclarez dans un bloc extern "C" et utilisez #[wasm_bindgen] pour les associer à des objets ou fonctions globales JS.

L’argument js_namespace vous permet d’indiquer où trouver la fonction dans l’environnement JavaScript, par exemple dans l’objet console.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

Transmettre des chaînes entre Rust et JS

wasm-bindgen gère intelligemment les types de données courants comme les nombres et les valeurs booléennes. Pour les chaînes, il utilise l’encodage UTF-8.

Lorsque vous transmettez un &str ou une String depuis Rust, wasm-bindgen le convertit en String JavaScript, et inversement. Cette abstraction fluidifie l’interopérabilité.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

WASM en dehors du navigateur

Bien qu’il soit souvent associé aux navigateurs web, WebAssembly ne s’y limite pas ! Des environnements d’exécution WASM existent pour de nombreux environnements, ce qui ouvre de nouvelles possibilités :

  • Fonctions sans serveur : déployer des fonctions rapides et isolées.
  • Chaîne de blocs : exécuter des contrats intelligents.
  • Modules d’extension : étendre des applications de manière sécurisée.
  • Applications de bureau : intégrer des modules hautes performances.

Cela étend considérablement la portée de Rust, bien au-delà de la programmation système traditionnelle.

Concepts clés de WebAssembly

Vérifions votre compréhension de Rust et de WebAssembly.

Récapitulatif : de Rust à WASM

Vous avez appris à apporter les performances et la sécurité de Rust à WebAssembly !

  • WASM fournit un environnement d’exécution rapide et portable pour le code compilé.
  • Rust excelle avec WASM grâce à ses performances, ses binaires compacts et sa sécurité.
  • Des outils comme wasm-pack et wasm-bindgen simplifient le processus de développement.
  • Vous pouvez facilement exporter des fonctions Rust vers JavaScript et importer des fonctions JavaScript dans Rust.
  • Les applications de WASM vont bien au-delà des simples navigateurs web.

Continuez à explorer ces possibilités pour créer avec Rust des applications web et non web puissantes et hautement performantes !

Questions Fréquemment Posées

La leçon « Rust vers WebAssembly (WASM) » est-elle gratuite ?

Oui — le texte complet de « Rust vers WebAssembly (WASM) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Learn Rust Coding, passe à CoddyKit PRO. Le cours Learn Rust Coding comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Rust vers WebAssembly (WASM) » ?

Compilez du code Rust en WebAssembly afin d’exécuter des modules très performants dans les navigateurs web et d’autres environnements d’exécution WASM. Tu pratiques Learn Rust Coding avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Learn Rust Coding ?

Aucune expérience préalable n'est requise. Learn Rust Coding sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.

Combien de temps prend la leçon « Rust vers WebAssembly (WASM) » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Learn Rust Coding ?

Oui. Chaque leçon Learn Rust Coding inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Interface de fonctions étrangères (FFI)
  2. Rust vers WebAssembly (WASM)
  3. Évaluation comparative et optimisation des performances
← Retour à Learn Rust Coding