WebAssembly - Travailler avec C++

Bonjour, futurs programmeurs ! Je suis ravi de vous guider dans cette incroyable aventure à la découverte du monde du WebAssembly et du C++. En tant que quelqu'un qui enseigne l'informatique depuis plus d'une décennie, je peux vous assurer que bien que ce sujet pourrait sembler intimidant au départ, nous allons le démonter en morceaux plus petits que même les débutants complets peuvent digérer. Alors, mettons nos manches à la pâte et plongeons dedans !

Qu'est-ce que WebAssembly ?

Avant de nous plonger dans le code, comprenons ce qu'est WebAssembly. Imaginez que vous essayez de parler à quelqu'un qui ne connaît pas votre langue. Vous auriez besoin d'un traducteur, non ? Eh bien, WebAssembly est comme ce traducteur pour votre navigateur web. Il permet aux programmes écrits en langages comme C++ de s'exécuter dans les navigateurs à près de la vitesse native. Génial, non ?

Pourquoi C++ avec WebAssembly ?

Vous pourriez vous demander, "Pourquoi C++ ?" Eh bien, C++ est comme le couteau suisse des langages de programmation - il est puissant, flexible et a été autour depuis des lustres. Quando combined with WebAssembly, il nous permet d'apporter des applications à haute performance sur le web. C'est comme turbocompresser votre site web !

Configuration de Notre Environnement

Avant d'écrire notre première ligne de code, nous devons configurer notre espace de travail. Ne vous inquiétez pas, je vais vous guider étape par étape :

1. Installez Emscripten : C'est notre baguette magique qui transforme le C++ en WebAssembly.
2. Configurez un éditeur de texte : Je recommande Visual Studio Code, mais n'importe quel éditeur de texte fera l'affaire.
3. Ouvrez un terminal : Nous l'utiliserons pour compiler notre code.

Notre Premier Programme WebAssembly

Commençons par un simple programme "Hello, World!". Voici le code :

#include <emscripten/emscripten.h>
#include <stdio.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
void sayHello() {
printf("Hello, WebAssembly World!\n");
}
}

Maintenant, décortiquons cela :

• #include <emscripten/emscripten.h> : Cette ligne inclut le fichier d'en-tête Emscripten, nous giving accès aux fonctions liées à WebAssembly.
• extern "C" : Cela dit au compilateur d'utiliser le style de nommage C pour nos fonctions.
• EMSCRIPTEN_KEEPALIVE : C'est comme mettre une pancarte "Ne pas effacer" sur notre fonction, en assurant qu'elle est disponible pour JavaScript.
• void sayHello() : C'est notre fonction qui imprime le salut.

Compilation de Notre Code

Il est temps de waving notre baguette magique ! Dans votre terminal, exécutez :

emcc hello.cpp -o hello.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']"

Cette commande pourrait sembler comme un sortilège de Harry Potter, mais laissez-moi expliquer :

• emcc : C'est notre compilateur.
• hello.cpp : Notre fichier source.
• -o hello.html : Cela crée un fichier HTML que nous pouvons ouvrir dans un navigateur.
• Le reste sont des flags spéciaux pour faire jouer notre WebAssembly avec JavaScript.

Exécution de Notre WebAssembly

Ouvrez le fichier hello.html généré dans votre navigateur, ouvrez la console, et tapez :

Module.ccall('sayHello', null, null, null);

Si vous voyez "Hello, WebAssembly World!" dans la console, félicitations ! Vous venez de faire fonctionner du C++ dans votre navigateur !

Un Exemple Plus Complex : Calculatrice de Fibonacci

Maintenant que nous avons les pieds dans l'eau, essayons quelque chose de plus difficile - un calculateur de nombres de Fibonacci.

#include <emscripten/emscripten.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
int fibonacci(int n) {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
}

Cette fonction calcule le nombre de Fibonacci nth récursivement. Ce n'est pas la méthode la plus efficace, mais c'est génial pour la démonstration !

Compilez-le de la même manière que précédemment, puis appelez-le depuis JavaScript comme ceci :

console.log(Module.ccall('fibonacci', 'number', ['number'], [10]));

Cela devrait imprimer le 10e nombre de Fibonacci (qui est 55, d'ailleurs).

Travailler avec des Tableaux

Reprenons de la hauteur et travaillons avec des tableaux. Voici une fonction qui calcule la somme d'un tableau :

#include <emscripten/emscripten.h>

extern "C" {
EMSCRIPTEN_KEEPALIVE
int sumArray(int* arr, int size) {
int sum = 0;
for (int i = 0; i < size; i++) {
sum += arr[i];
}
return sum;
}
}

Pour l'utiliser depuis JavaScript, nous devons faire un peu plus de travail :

let arr = new Int32Array([1, 2, 3, 4, 5]);
let buffer = Module._malloc(arr.length * arr.BYTES_PER_ELEMENT);
Module.HEAP32.set(arr, buffer >> 2);
let sum = Module.ccall('sumArray', 'number', ['number', 'number'], [buffer, arr.length]);
Module._free(buffer);
console.log(sum);  // Devrait imprimer 15

Cela pourrait sembler compliqué, mais nous faisons essentiellement :

1. Créer un tableau en JavaScript
2. Allouer de la mémoire dans le tas de WebAssembly
3. Copier notre tableau dans cette mémoire
4. Appeler notre fonction
5. Libérer la mémoire allouée

Conclusion

Félicitations ! Vous avez pris vos premiers pas dans le monde du WebAssembly avec C++. Nous avons couvert beaucoup de terrain, de "Hello, World!" à la manipulation de tableaux. Souvenez-vous, apprendre à coder est comme apprendre une nouvelle langue - cela prend de la pratique et de la patience. Ne soyez pas découragé si vous ne comprenez pas tout de suite. Continuez à expérimenter, continuez à coder, et surtout, continuez à prendre du plaisir !

Voici un tableau récapitulatif des principales méthodes que nous avons utilisées :

Méthode	Description
emcc	Commande du compilateur Emscripten
EMSCRIPTEN_KEEPALIVE	Macro pour empêcher la fonction d'être optimisée
Module.ccall	Méthode JavaScript pour appeler des fonctions C++
Module._malloc	Allouer de la mémoire dans le tas de WebAssembly
Module._free	Libérer la mémoire allouée dans le tas de WebAssembly
Module.HEAP32	Vue Int32Array de la mémoire de WebAssembly

Souvenez-vous, WebAssembly et C++ ouvrent un monde de possibilités pour le développement web. Le ciel est la limite ! Continuez à coder, continuez à apprendre, et qui sait ? Peut-être serez-vous la prochaine personne à enseigner ce cours dans quelques années !

Credits: Image by storyset