Guide débutant pour WebAssembly - WASM

Salut là, future superstar du codage ! Je suis ravi de devenir ton guide sur ce voyage passionnant à la découverte du monde du WebAssembly, ou WASM pour faire court. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - on va commencer du début et progresser ensemble. Alors, prends une tasse de ta boisson favorite, installe-toi confortablement, et plongeons dedans !

Qu'est-ce que le WebAssembly ?

Le WebAssembly est comme un langage secret que les navigateurs web comprennent. Il est conçu pour faire fonctionner les applications web plus rapidement et de manière plus efficace. Imagine que tu essaies de jouer à un jeu vidéo complexe sur un site web. Sans WebAssembly, cela pourrait être lent et malaisé. Mais avec WebAssembly, il peut fonctionner en douceur, presque comme si tu jouais sur une console de jeu !

Une brève histoire

Le WebAssembly est né du désir de rendre les applications web plus puissantes. Il a été annoncé pour la première fois en 2015, et en 2017, il était supporté par tous les principaux navigateurs web. C'est plutôt rapide dans le monde de la technologie - un peu comme quand ton application de réseaux sociaux préférée met à jour ses fonctionnalités !

Le modèle de machine à pile

Maintenant, parlons de quelque chose qui semble un peu technique mais qui est en réalité plutôt simple une fois que tu le décomposes : le modèle de machine à pile. C'est le cœur de la manière dont fonctionne le WebAssembly.

Qu'est-ce qu'une pile ?

Pense à une pile comme à un tas deassiettes. Tu ne peux ajouter ou retirer des assiettes que du sommet du tas. En informatique, nous appelons ajouter à la pile "pusher" et retirer de la pile "popper".

Comment WebAssembly utilise la pile

WebAssembly utilise cette idée de pile pour effectuer des opérations. C'est comme un cuisinier très efficace dans une cuisine, qui sait toujours exactement quel ingrédient (ou quel nombre, dans notre cas) utiliser ensuite.

Regardons un exemple simple :

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

Ne panique pas ! Je sais que cela ressemble à une langue extraterrestre pour l'instant, mais analysons-le :

1. (module): Cela revient à dire "Voici un nouveau livre de recettes".
2. (func $add ...): Nous définissons une nouvelle fonction (ou recette) appelée "add".
3. (param $a i32) (param $b i32): Notre fonction prend deux ingrédients (paramètres), tous deux des entiers 32 bits.
4. (result i32): Le résultat sera également un entier 32 bits.
5. local.get $a: Met le premier nombre sur le dessus de notre pile d'assiettes.
6. local.get $b: Met le second nombre sur le dessus.
7. i32.add: Ajoute les deux nombres du dessus et les remplace par le résultat.

Donc, si nous appelons cette fonction avec 5 et 3, notre pile se présenterait comme suit :

1. Commencer avec une pile vide : []
2. Après local.get $a: [5]
3. Après local.get $b: [5, 3]
4. Après i32.add: [8]

Et voilà ! Nous avons ajouté deux nombres en utilisant le modèle de machine à pile de WebAssembly.

Pourquoi utiliser WebAssembly ?

Tu te demandes peut-être : "Cela semble compliqué. Pourquoi ne pas utiliser JavaScript directement ?" Excellent question ! WebAssembly a quelques super-pouvoirs qui le rendent spécial :

1. Vitesse: WebAssembly peut s'exécuter beaucoup plus rapidement que JavaScript pour certaines tâches.
2. Efficacité: Il utilise moins de mémoire et de puissance de traitement.
3. Flexibilité des langages: Tu peux écrire du code dans des langages comme C++ ou Rust et le convertir en WebAssembly.

Imagine que tu construis un château de sable. JavaScript est comme utiliser tes mains - c'est flexible et facile à commencer. WebAssembly est comme avoir un ensemble d'outils spécialisés - cela pourrait nécessiter un peu plus de configuration, mais tu peux construire des châteaux beaucoup plus complexes et solides !

Ton premier programme WebAssembly

Mettons-nous à écrire un programme simple qui additionne deux nombres. Nous utiliserons un langage appelé WAT (WebAssembly Text Format), qui est une version lisible par les humains de WebAssembly.

(module
(func $add (param $left i32) (param $right i32) (result i32)
local.get $left
local.get $right
i32.add)
(export "add" (func $add))
)

Cela pourrait te sembler familier - c'est très similaire à notre exemple précédent ! Voici ce qu'il fait :

1. Définit un module (notre programme).
2. Crée une fonction appelée $add qui prend deux entiers 32 bits et en retourne un.
3. Récupère le premier nombre ($left) et le met sur la pile.
4. Récupère le second nombre ($right) et le met dessus.
5. Ajoute les deux nombres sur la pile.
6. Exporte la fonction pour pouvoir l'utiliser depuis JavaScript.

Pour l'utiliser dans une page web, nous avons besoin d'un peu de JavaScript :

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

Ce code charge notre module WebAssembly, crée une instance de celui-ci, puis appelle notre fonction add avec les nombres 5 et 3.

Conclusion

Félicitations ! Tu viens de faire tes premiers pas dans le monde du WebAssembly. Nous avons couvert ce qu'est WebAssembly, comment il utilise le modèle de machine à pile, et même écrit notre premier programme WebAssembly.

N'oublie pas, apprendre à coder est comme apprendre une nouvelle langue ou un instrument - cela nécessite de la pratique et de la patience. Ne sois pas découragé si tout ne se met pas en place dès le départ. Continue à expérimenter, continue à apprendre, et avant de t'en rendre compte, tu seras en train de construire des choses incroyables avec WebAssembly !

Dans notre prochain cours, nous plongerons plus profondément dans des concepts WebAssembly plus complexes et commencerons à construire des projets vraiment sympas. Jusque-là, bon codage !

Credits: Image by storyset