WebAssembly - Convertir WAT en WASM

Bonjour, aspirants programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de WebAssembly, en nous concentrant spécifiquement sur la conversion du texte WebAssembly (WAT) en format binaire WebAssembly (WASM). Ne vous inquiétez pas si ces termes vous semblent ésotériques - nous allons tout décomposer étape par étape. À la fin de ce tutoriel, vous convertirez WAT en WASM comme un pro !

Qu'est-ce que WebAssembly ?

Avant de plonger dans le processus de conversion, penchons-nous sur ce qu'est WebAssembly. Imaginez que vous construisez un château de sable. WebAssembly est comme avoir un seau magique qui peut créer des structures de sable parfaites instantanément, rendant vos créations de plage plus rapides et plus impressionnantes.

Dans le monde du développement web, WebAssembly est un langage de bas niveau qui permet au code écrit dans des langages comme C++ ou Rust de s'exécuter dans les navigateurs à une vitesse proche de la vitesse native. Il est conçu pour travailler alongside JavaScript, améliorant les performances des applications web.

WAT vs WASM : Les Bases

Maintenant, parlons de WAT et WASM. Considérez WAT comme le plan de votre château de sable, écrit dans un langage que les humains peuvent lire. WASM, d'autre part, est comme le château de sable final - c'est la forme que les ordinateurs comprennent et peuvent exécuter rapidement.

• WAT (WebAssembly Text Format) : Lisible par les humains, similaire au langage assembleur
• WASM (WebAssembly Binary Format) : Lisible par les machines, format binaire compact

Conversion WAT en WASM : Le Processus

Convertir WAT en WASM est comme traduire notre plan de château de sable en structures de sable réelles. Passons en revue ce processus étape par étape.

Étape 1 : Écrivez Votre Code WAT

Premièrement, nous devons créer notre code WAT. Voici 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))
)

Ce code WAT définit un module avec une fonction qui additionne deux entiers 32 bits. Ne vous inquiétez pas si vous ne comprenez pas tous les détails - nous les décomposerons :

1. (module ...): Cela enveloppe tout notre code WAT.
2. (func $add ...): Définit une fonction nommée "add".
3. (param $a i32) (param $b i32): Spécifie deux paramètres entiers 32 bits.
4. (result i32): Indique que la fonction retourne un entier 32 bits.
5. local.get $a et local.get $b: Récupère les paramètres de la fonction.
6. i32.add: Additionne les deux nombres.
7. (export "add" (func $add)): Rend la fonction accessible depuis l'extérieur du module.

Étape 2 : Sauvegardez Votre Fichier WAT

Enregistrez ce code dans un fichier avec une extension .wat, par exemple, add.wat.

Étape 3 : Utilisez un Convertisseur WAT en WASM

Maintenant vient la partie magique - convertir WAT en WASM. Nous allons utiliser un outil appelé wat2wasm, qui fait partie du WebAssembly Binary Toolkit (WABT).

Voici comment l'utiliser :

1. Installez WABT (si ce n'est pas déjà fait) :

• Sur macOS : brew install wabt
• Sur Ubuntu : sudo apt-get install wabt
• Pour les autres systèmes, consultez le dépôt GitHub de WABT

2. Ouvrez votre terminal et naviguez vers le répertoire contenant votre fichier WAT.

3. Exécutez la commande suivante :

wat2wasm add.wat -o add.wasm

Cette commande indique à wat2wasm de convertir notre fichier add.wat en un fichier WASM nommé add.wasm.

Étape 4 : Vérifiez Votre Fichier WASM

Félicitations ! Vous venez de créer votre premier fichier WASM. Mais comment savoir si cela a fonctionné ? Utilisons un autre outil WABT appelé wasm2wat pour convertir notre WASM en WAT et voir si il correspond à notre code original :

wasm2wat add.wasm -o add_verified.wat

Maintenant, ouvrez add_verified.wat dans un éditeur de texte. Il devrait être très similaire à notre code WAT original, bien que des différences mineures de formatage puissent exister.

Utilisation de Votre Fichier WASM

Maintenant que nous avons notre fichier WASM, comment l'utilisons-nous dans une application web ? Voici un exemple simple en HTML et JavaScript :

<!DOCTYPE html>
<html>
<head>
<title>Fonction Add de WebAssembly</title>
</head>
<body>
<h1>Fonction Add de WebAssembly</h1>
<p>Résultat : <span id="result"></span></p>
<script>
(async () => {
const response = await fetch('add.wasm');
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);
const result = instance.exports.add(5, 3);
document.getElementById('result').textContent = result;
})();
</script>
</body>
</html>

Ce fichier HTML charge notre module WASM et appelle notre fonction add avec les arguments 5 et 3. Le résultat (8) est alors affiché sur la page.

Conclusion

Et voilà ! Nous avons fait le voyage de l'écriture de code WAT à la conversion en WASM et enfin à l'utilisation dans une page web. Souvenez-vous, ceci n'est que la pointe de l'iceberg. WebAssembly ouvre une monde de possibilités pour des applications web hautes performances.

Alors que vous continuez votre aventure en programmation, continuez à expérimenter avec différentes fonctions WAT et à explorer les capacités de WebAssembly. Qui sait ? Vous pourriez bien créer la prochaine application web révolutionnaire qui change le monde !

Bonne programmation, futurs magiciens de WebAssembly !

Credits: Image by storyset