Si vous débutez dans la programmation, vous avez probablement entendu dire que les applications Web fonctionnent avec JavaScript. Et c'est vrai, mais pas tout. Aujourd'hui, nous allons parler d'une technologie qui change la donne : WebAssembly (WASM) et la langue Rustqui devient son outil principal.
Imaginez : vous pouvez écrire du code qui fonctionnera dans un navigateur presque à la même vitesse que les programmes habituels sur votre ordinateur. Cela ressemble à de la magie ? C'est une réalité, et elle est disponible dès maintenant.
Qu'est-ce que WebAssembly ?
WebAssembly n'est pas un remplacement de JavaScript, mais un complément puissant. En termes simples :
JavaScript - c'est comme un employé polyvalent qui sait tout faire un peu
WebAssembly — c'est un spécialiste qui accomplit des tâches spécifiques beaucoup plus rapidement
Pourquoi est-ce important ?
JavaScript ordinaire :
Vitesse : 🚗
Convient pour : interface utilisateur, logique d'application
Limites : calculs lents
WebAssembly + Rust:
Vitesse : 🚀
Convient pour : le traitement des données, les jeux, les graphiques
Capacités : presque comme des programmes natifs
Pourquoi Rust ?
Rust est un langage de programmation conçu pour de sécurité et de la productivité. Voici ses principaux avantages pour le développement Web :
1. Vitesse sans compromis
Le code Rust est compilé en WebAssembly, qui fonctionne à une vitesse presque native.
2. Sécurité par défaut
Rust ne vous permettra pas de faire des erreurs critiques avec la mémoire — le compilateur les détectera avant même le lancement du programme.
3. Outils modernes
Rust dispose d'un excellent écosystème pour travailler avec WASM :
wasm-pack— pour l'assemblage de projetswasm-bindgen— pour la communication avec JavaScriptweb-sysetjs-sys— pour travailler avec l'API Web
Exemple pratique : première application
Créons une application simple qui montrera la puissance de Rust + WASM.
Étape 1 : Installation des outils
# Installation de Rust (si ce n'est pas déjà fait)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# Ajout de la prise en charge de WebAssembly
rustup target add wasm32-unknown-unknown
# Installation de wasm-pack
cargo install wasm-packÉtape 2 : Création d'un projet
cargo new --lib rust-wasm-demo
cd rust-wasm-demoÉtape 3 : Configuration de Cargo.toml
[package]
name = "rust-wasm-demo"
version = "0.1.0"
edition = "2021"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
[dependencies.web-sys]
version = "0.3"
features = ["console"]Étape 4 : Écrire du code en Rust (src/lib.rs)
use wasm_bindgen::prelude::*;
// Fonction pour calculer les nombres de Fibonacci
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
match n {
0 => 0,
1 => 1,
_ => fibonacci(n - 1) + fibonacci(n - 2),
}
}
// Fonction de traitement de tableau
#[wasm_bindgen]
pub fn sum_array(numbers: &[i32]) -> i32 {
numbers.iter().sum()
}
// Salutation à l'aide de l'API Web
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
web_sys::console::log_1(&"Function called from Rust!".into());
format!("Hi, {}! This is a message from Rust 🦀", name)
}Étape 5 : Assemblage
wasm-pack build --target webÉtape 6 : Utilisation dans le navigateur (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rust + WASM Demo</title>
</head>
<body>
<h1>Rust WebAssembly в действии</h1>
<div>
<button onclick="testFibonacci()">Вычислить Фибоначчи(10)</button>
<button onclick="testArray()">Сумма массива</button>
<button onclick="testGreet()">Приветствие</button>
</div>
<div id="result"></div>
<script type="module">
import init, { fibonacci, sum_array, greet } from './pkg/rust_wasm_demo.js';
await init();
window.testFibonacci = () => {
const result = fibonacci(10);
document.getElementById('result').innerHTML =
`Fibonacci(10) = ${result}`;
};
window.testArray = () => {
const numbers = [1, 2, 3, 4, 5];
const result = sum_array(numbers);
document.getElementById('result').innerHTML =
`Sum [1,2,3,4,5] = ${result}`;
};
window.testGreet = () => {
const result = greet("developer");
document.getElementById('result').innerHTML = result;
};
</script>
</body>
</html>
Exemples réels d'utilisation
1. Traitement des images
Les applications comme Figma utilisent WASM pour un traitement graphique rapide :
#[wasm_bindgen]
pub fn apply_grayscale(pixels: &mut [u8]) {
for chunk in pixels.chunks_mut(4) {
let gray = (chunk[0] as f32 * 0.299
+ chunk[1] as f32 * 0.587
+ chunk[2] as f32 * 0.114) as u8;
chunk[0] = gray;
chunk[1] = gray;
chunk[2] = gray;
}
}2. Jeux par navigateur
Les moteurs de jeu comme Unity et Unreal Engine utilisent WASM pour exécuter des jeux :
#[wasm_bindgen]
pub struct GameState {
score: u32,
player_x: f64,
player_y: f64,
}
#[wasm_bindgen]
impl GameState {
pub fn new() -> GameState {
GameState {
score: 0,
player_x: 0.0,
player_y: 0.0,
}
}
pub fn update(&mut self, delta_time: f64) {
// Calculs rapides de la physique
self.player_x += delta_time * 10.0;
self.player_y += delta_time * 5.0;
}
}3. Cryptographie et chiffrement
Opérations sécurisées avec les données directement dans le navigateur :
use sha2::{Sha256, Digest};
#[wasm_bindgen]
pub fn hash_password(password: &str) -> String {
let mut hasher = Sha256::new();
hasher.update(password.as_bytes());
format!("{:x}", hasher.finalize())
}Comparaison des performances
Voyons la différence réelle de vitesse :
Tâche : calculer la somme de 1 million de nombres
JavaScript:
// JavaScript
console.time('JS');
let sum = 0;
for (let i = 0; i < 1000000; i++) {
sum += i * 2;
}
console.timeEnd('JS');
// Résultat : ~ 3-5msRust + WASM:
// Rust + WASM
#[wasm_bindgen]
pub fn calculate_sum(n: u32) -> u64 {
(0..n).map(|i| i as u64 * 2).sum()
}
// Résultat : ~ 1-2msWASM est 2 à 3 fois plus rapide !
Et pour des calculs plus complexes, la différence peut être de 10 à 20 fois.
Frameworks modernes sur Rust
Yew — React sur Rust
use yew::prelude::*;
#[function_component(App)]
fn app() -> Html {
let counter = use_state(|| 0);
let increment = {
let counter = counter.clone();
Callback::from(move |_| counter.set(*counter + 1))
};
html! {
<div>
<h1>{ "Counter in Rust!" }</h1>
<p>{ format!("Value: {}", *counter) }</p>
<button onclick={increment}>{ "Enlarge" }</button>
</div>
}
}Leptos : moderne et rapide
use leptos::*;
#[component]
fn Counter() -> impl IntoView {
let (count, set_count) = create_signal(0);
view! {
<div>
<button on:click=move |_| set_count.update(|n| *n += 1)>
"Clicks: " {count}
</button>
</div>
}
}Conclusion
Rust et WebAssembly ne sont pas seulement un battage médiatique, mais le véritable avenir du développement Web. Ce sont des outils qui vous permettent de créer rapides, sécurisées et puissants applications directement dans le navigateur.
Vous n'avez pas besoin d'être un expert pour commencer. L'essentiel est de faire le premier pas : installer les outils, écrire la première fonction et voir comment elle fonctionne.
Tout cela et bien plus encore peut être étudié sur la plateforme Kodik !
Vous trouverez chez nous :
📖 Cours détaillés des bases aux sujets avancés
💻 Travaux pratiques pour consolider le matériel
🎯 Projets réels pour le portfolio
🏆 Système de progression avec expérience et réalisations
Analysons chaque sujet en détail, écrivons le code ensemble et mettons tout en pratique !
💬 Besoin d'aide ?
Rejoignez notre actif Chaîne Telegram — déjà plus de 2000 personnes partageant les mêmes idées s'entraident, partagent leurs expériences et discutent des nouveautés du monde du développement !
👉 Commencez votre voyage dans le monde du développement Web moderne dès maintenant !