WebAssembly - Travailler avec Node.js

Bonjour à tous, aspirants programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte du monde du WebAssembly et de Node.js. Ne vous inquiétez pas si ces termes vous semblent être des langues extraterrestres - d'ici la fin de ce tutoriel, vous les parlerez couramment !

Qu'est-ce que WebAssembly ?

WebAssembly, souvent abrégé en Wasm, est comme un super-héros dans le monde de la programmation. C'est un format d'instruction binaire qui permet au code écrit dans des langages comme C, C++ et Rust de s'exécuter dans les navigateurs à nægle native speed. Imaginez être capable de jouer à des jeux 3D complexes directement dans votre navigateur - c'est le genre de puissance que WebAssembly apporte à la table !

Pourquoi Node.js ?

Vous vous demandez peut-être, "Qu'a à voir Node.js avec tout cela ?" Eh bien, Node.js est comme l'équipe technique qui fait la magie happen. C'est un environnement d'exécution JavaScript qui nous permet d'exécuter JavaScript en dehors d'un navigateur web. Lorsque nous combinons WebAssembly avec Node.js, nous avons le meilleur des deux mondes - la vitesse de WebAssembly et la polyvalence de Node.js.

Configuration de notre environnement

Avant de plonger dans le code, configurons notre espace de travail. Ne vous inquiétez pas, c'est plus simple que configurer un nouveau smartphone !

1. Installez Node.js à partir du site officiel (https://nodejs.org)
2. Ouvrez votre terminal ou invite de commande
3. Créez un nouveau répertoire pour notre projet :

   mkdir wasm-nodejs-tutorial
   cd wasm-nodejs-tutorial

4. Initialisez un nouveau projet Node.js :

   npm init -y

Super ! Maintenant, nous sommes prêts à commencer à coder.

Votre Premier Module WebAssembly

Créons un module WebAssembly simple qui additionne deux nombres. Nous l'écrivons en C et le compilons en WebAssembly.

Étape 1 : Écrire le code C

Créez un fichier nommé add.c avec le contenu suivant :

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

Ne paniquez pas si cela ressemble à des hiéroglyphes ! Explication :

• #include <emscripten.h> inclut la bibliothèque Emscripten, qui nous aide à compiler le C en WebAssembly.
• EMSCRIPTEN_KEEPALIVE est une directive spéciale qui indique au compilateur de garder cette fonction accessible depuis JavaScript.
• int add(int a, int b) est notre fonction qui prend deux entiers et retourne leur somme.

Étape 2 : Compiler en WebAssembly

Pour compiler ce code C en WebAssembly, nous devons installer Emscripten. Suivez les instructions d'installation sur le site Web d'Emscripten (https://emscripten.org/docs/getting_started/downloads.html).

Une fois installé, exécutez cette commande :

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

Cette commande compile notre code C en WebAssembly et crée deux fichiers : add.wasm et add.js.

Utilisation de WebAssembly dans Node.js

Maintenant, arrives l'étape passionnante - utiliser notre module WebAssembly dans Node.js !

Créez un fichier nommé index.js avec le contenu suivant :

const fs = require('fs');
const path = require('path');

const wasmBuffer = fs.readFileSync(path.join(__dirname, 'add.wasm'));

WebAssembly.instantiate(wasmBuffer).then(wasmModule => {
const add = wasmModule.instance.exports._add;
console.log('5 + 3 =', add(5, 3));
});

Explication :

1. Nous importons les modules Node.js nécessaires : fs pour les opérations sur le système de fichiers et path pour travailler avec les chemins de fichiers.
2. Nous lisons le fichier WebAssembly dans un buffer.
3. Nous utilisons WebAssembly.instantiate() pour charger et compiler notre module WebAssembly.
4. Une fois chargé, nous pouvons accéder à notre fonction add via wasmModule.instance.exports._add.
5. Enfin, nous appelons notre fonction et enregistrons le résultat.

Exécutez ce script avec :

node index.js

Si tout s'est bien passé, vous devriez voir : 5 + 3 = 8

Félicitations ! Vous venez de faire fonctionner votre premier module WebAssembly dans Node.js !

Comparaison des Performances

Maintenant, comparons les performances de notre fonction WebAssembly avec une fonction JavaScript native.

Ajoutez ceci à votre index.js :

function jsAdd(a, b) {
return a + b;
}

const iterations = 1000000;

console.time('WebAssembly');
for (let i = 0; i < iterations; i++) {
add(5, 3);
}
console.timeEnd('WebAssembly');

console.time('JavaScript');
for (let i = 0; i < iterations; i++) {
jsAdd(5, 3);
}
console.timeEnd('JavaScript');

Ce code exécute les versions WebAssembly et JavaScript de notre fonction add un million de fois et mesure combien de temps chacune prend.

Exécutez à nouveau le script, et vous constaterez probablement que la version WebAssembly est plus rapide !

Conclusion

Nous avons à peine effleuré la surface de ce qui est possible avec WebAssembly et Node.js. Imaginez les possibilités - vous pourriez utiliser des algorithmes complexes écrits en C ou Rust, des moteurs de jeu, ou même des applications entières, toutes s'exécutant à nægle native speed dans Node.js !

N'oubliez pas, apprendre à coder c'est comme apprendre à faire du vélo. Ça peut sembler instable au début, mais avec de la pratique, vous serez bientôt en train de rouler à toute vitesse. Continuez à expérimenter, continuez à apprendre, et surtout, amusez-vous !

Voici un tableau résumant les principales méthodes que nous avons utilisées :

Méthode	Description
WebAssembly.instantiate()	Compile et instancie un module WebAssembly
fs.readFileSync()	Lit un fichier synchroniquement
path.join()	Joint des segments de chemin
console.time()	Démarre un chronomètre
console.timeEnd()	Arrête un chronomètre et enregistre la durée

Bonne programmation, futurs magiciens de WebAssembly !

Credits: Image by storyset