Français

Tutoriel WebAssembly

WebAssembly - Travailler avec Rust

Introduction à WebAssembly et Rust

Bonjour, futurs programmeurs ! Aujourd'hui, nous plongeons dans un univers passionnant où les navigateurs web deviennent des plateformes puissantes pour exécuter des applications à haute performance. Imaginez pouvoir jouer à des jeux 3D complexes ou exécuter des outils d'analyse de données sophistiqués directement dans votre navigateur. C'est la magie de WebAssembly, et nous allons apprendre comment utiliser cette puissance avec le langage de programmation Rust.

WebAssembly - Working with Rust

Lorsque j'ai découvert WebAssembly pour la première fois, j'ai eu l'impression d'avoir découvert un superpouvoir caché pour le développement web. C'est comme découvrir que votre vélo fiable peut soudainement se transformer en fusée ! Mettons-nous ensemble sur cette aventure palpitante.

Qu'est-ce que WebAssembly ?

WebAssembly, souvent abrégé en Wasm, est un format d'instruction binaire conçu pour une exécution efficace dans les navigateurs web. C'est comme un code secret que les navigateurs peuvent comprendre et exécuter extrêmement rapidement. Pensez-y comme un turbo boost pour vos applications web !

Pourquoi utiliser Rust pour WebAssembly ?

Rust est un langage de programmation à la fois puissant et sûr. C'est comme avoir une voiture de sport avec les dernières fonctionnalités de sécurité. Les caractéristiques uniques de Rust le rendent un excellent choix pour le développement WebAssembly :

  1. Sécurité de la mémoire sans collecte de déchets
  2. Haute performance
  3. Petite taille de binaire
  4. Intégration facile avec JavaScript

Configuration de Votre Environnement de Développement

Avant de commencer à coder, nous devons préparer notre espace de travail. C'est comme préparer votre atelier d'art avant de peindre un chef-d'œuvre.

Installation de Rust

Premièrement, installons Rust. Ouvrez votre terminal et exécutez :

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Cette commande télécharge et installe Rust. C'est comme planter une graine qui grandira en notre arbre de codage puissant !

Installation de wasm-pack

Ensuite, nous allons installer wasm-pack, un outil qui nous aide à construire et à travailler avec WebAssembly :

cargo install wasm-pack

Pensez à wasm-pack comme à votre assistant fiable, toujours prêt à vous aider à conditionner votre code Rust pour le web.

Votre Premier Projet Rust et WebAssembly

Maintenant, créons notre premier projet. Nous allons commencer simple, avec une fonction qui additionne deux nombres.

Création du Projet

Dans votre terminal, exécutez :

cargo new --lib wasm-add
cd wasm-add

Cela crée un nouveau projet de bibliothèque Rust. C'est comme ouvrir un nouveau carnet, prêt pour nos aventures de codage !

Écriture du Code Rust

Ouvrez src/lib.rs et remplacez son contenu par :

use wasm_bindgen::prelude::*;

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

Décomposons cela :

  • use wasm_bindgen::prelude::*; importe les outils nécessaires pour WebAssembly.
  • #[wasm_bindgen] est comme un sort magique qui rend notre fonction accessible depuis JavaScript.
  • pub fn add(a: i32, b: i32) -> i32 définit notre fonction qui prend deux entiers et renvoie leur somme.

Construction pour WebAssembly

Maintenant, transformons notre code Rust en WebAssembly. Exécutez :

wasm-pack build --target web

Cette commande est comme un four magique qui cuit notre code Rust en un délice WebAssembly que les navigateurs peuvent apprécier !

Utilisation de Votre Module WebAssembly dans une Page Web

Maintenant vient la partie passionnante - utiliser notre module WebAssembly dans une page web réelle !

Création d'un Fichier HTML

Créez un fichier nommé index.html à la racine de votre projet avec le contenu suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Add</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_add.js';

async function run() {
await init();
const result = add(5, 7);
document.body.textContent = `5 + 7 = ${result}`;
}

run();
</script>
</body>
</html>

Ce fichier HTML est comme une scène où notre star WebAssembly va se produire !

Exécution de Votre Page Web

Pour voir votre création en action, vous aurez besoin d'un serveur web local. Si vous avez Python installé, vous pouvez utiliser :

python -m http.server

Ensuite, ouvrez votre navigateur et naviguez vers http://localhost:8000. Vous devriez voir "5 + 7 = 12" affiché sur la page. Félicitations ! Vous venez de faire fonctionner du code Rust dans votre navigateur !

Sujets Avancés

Maintenant que nous avons les pieds dans l'eau, plongons un peu plus profondément dans l'océan de WebAssembly et Rust.

Travailler avec des Chaînes

Les chaînes sont un peu plus compliquées en WebAssembly. Créons une fonction qui salue un utilisateur :

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Bonjour, {} !", name)
}

En JavaScript, nous l'utilisons comme suit :

const greeting = greet("WebAssembly");
console.log(greeting); // Affiche : Bonjour, WebAssembly !

Gestion de la Mémoire

L'une des superpuissances de Rust est sa gestion de la mémoire. Lorsque vous travaillez avec WebAssembly, vous devez être extrêmement prudent. Voici une fonction qui crée et renvoie un vecteur :

#[wasm_bindgen]
pub fn create_array(size: usize) -> Vec<i32> {
let mut v = Vec::with_capacity(size);
for i in 0..size {
v.push(i as i32);
}
v
}

Cette fonction est sûre car le système de propriété de Rust garantit que la mémoire est correctement gérée, même lorsqu'elle est utilisée depuis JavaScript !

Conclusion

Félicitations pour vos premiers pas dans le monde de WebAssembly avec Rust ! Nous avons couvert beaucoup de terrain, de la configuration de votre environnement à la création et à l'utilisation de modules WebAssembly. Souvenez-vous, comme pour toute nouvelle compétence, la maîtrise vient avec la pratique. Alors, continuez à coder, continuez à expérimenter, et surtout, continuez à vous amuser !

En conclusion, je suis rappelé d'une citation de la célèbre informaticienne Grace Hopper : "La phrase la plus dommageable dans le langage est 'Nous avons toujours fait comme ça'." WebAssembly et Rust représentent une nouvelle façon de penser au développement web. Embrassez ce changement, et vous ouvrirez un monde de possibilités dans votre parcours de programmation.

Bonne programmation, et que vos aventures WebAssembly soient pleines d'excitation et de découvertes !

Credits: Image by storyset

Tutoriel précédent:
WebAssembly - Travailler avec C++
Tutoriel suivant:
WebAssembly - Travailler avec Go