Comment utiliser WebAssembly pour accélérer les applications web ?

Par srahman, 14 février, 2025
code de WebAssembly

Comment écrire et utiliser du code en WebAssembly ?

La semaine dernière, j’ai expliqué comment WebAssembly fonctionne et pourquoi il est utile. Aujourd’hui, comme promis, on va voir quelques extraits de code pour mieux comprendre comment il est écrit et utilisé. On ne va pas l’exécuter, mais ça va donner une idée de la structure et de son utilisation avec JavaScript.

Écrire du code en WebAssembly

WebAssembly n’est pas un langage à part entière. Pour l’utiliser, on doit écrire du code dans un autre langage comme C, C++ ou Rust, puis le convertir en WebAssembly.

Voici un exemple simple en WebAssembly Text Format (WAT), qui est une version lisible du code WebAssembly :

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )
  (export "add" (func $add))
)

Ce code définit une fonction add qui prend deux nombres en entrée et retourne leur somme. Une fois converti en WebAssembly (.wasm), on pourra l’utiliser avec JavaScript.

Transformer le code en WebAssembly

Une fois le code écrit, on doit le convertir en fichier .wasm pour qu’il puisse être utilisé dans un navigateur.

Si le code est en C ou C++, on utilise un outil appelé Emscripten :

emcc add.c -o add.wasm -s EXPORTED_FUNCTIONS="['_add']"

Si le code est en Rust, on utilise wasm-pack :

wasm-pack build --release

Une fois transformé en .wasm, le fichier est prêt à être utilisé dans une application web.

Utiliser WebAssembly avec JavaScript

Une fois notre fichier .wasm prêt, on peut l’exécuter dans une page web grâce à JavaScript.

fetch('add.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(result => {
      console.log(result.instance.exports.add(5, 3)); // Affichera 8
  });

Comment ça fonctionne ?

  1. On télécharge le fichier WebAssembly avec fetch().
  2. On le transforme en un format exploitable avec arrayBuffer().
  3. On l’installe en mémoire avec WebAssembly.instantiate().
  4. On appelle la fonction add() et on affiche le résultat dans la console.

Avec cette approche, WebAssembly peut travailler avec JavaScript pour exécuter des calculs complexes plus rapidement.

Pourquoi utiliser WebAssembly ?

WebAssembly est super utile pour les applications qui demandent beaucoup de puissance, par exemple :

  • Les jeux vidéo dans un navigateur.
  • Les logiciels de montage vidéo ou de design en ligne.
  • Les outils scientifiques et de calcul avancé.

Son principal avantage, c’est qu’il permet aux applications web d’être plus rapides et fluides, tout en utilisant moins de ressources.

Conclusion

Aujourd’hui, on a vu comment écrire du code en WebAssembly, le transformer en fichier .wasm et l’utiliser avec JavaScript. Même si cet exemple est simple, il montre bien comment WebAssembly améliore les performances des applications web.

À venir la semaine prochaine

Dans mon prochain article, on va comparer WebAssembly et JavaScript pour voir quand WebAssembly est vraiment utile et quand JavaScript suffit. À bientôt !

Références

WebAssembly.org, Site officiel de WebAssembly, consulté le 14 février 2025, https://webassembly.org/

MDN Web Docs, Documentation sur WebAssembly, consulté le 14 février 2025, https://developer.mozilla.org/fr/docs/WebAssembly

WebAssembly Specifications, Spécifications officielles de WebAssembly, consulté le 14 février 2025, https://webassembly.github.io/spec/

Wasm By Example, Introduction pratique à WebAssembly, consulté le 14 février 2025, https://wasmbyexample.dev/

Étiquettes

Commentaires