Tutoriel WebAssembly : Guide pour les débutants

Bonjour là-bas, futurs magiciens de WebAssembly ! Je suis ravi de vous guider sur ce voyage passionnant dans le monde de WebAssembly. En tant que quelqu'un qui enseigne l'informatique depuis plus d'années que je ne veux bien admettre (disons simplement que je me souviens quand les disquettes étaient vraiment flexibles), je suis là pour rendre cette aventure aussi amusante et accessible que possible. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongons dedans !

WebAssembly - Home

Qu'est-ce que WebAssembly ?

Imaginez que vous construisez un château de sable. JavaScript est comme utiliser vos mains - c'est flexible et facile à commencer, mais ce n'est peut-être pas le moyen le plus rapide de construire une forteresse massive. D'autre part, WebAssembly est comme avoir un ensemble d'outils spécialisés - cela peut prendre un peu plus de configuration, mais boy, il peut construire des choses rapidement !

WebAssembly, souvent abrégé en Wasm, est un format d'instruction binaire conçu pour une exécution efficace dans les navigateurs web. C'est comme un code secret que votre navigateur comprend, permettant aux programmes de s'exécuter à une vitesse proche de la vitesse native.

Pourquoi devriez-vous vous en soucier ?

Vitesse : WebAssembly est extrêmement rapide. C'est comme passer d'un vélo à une voiture de sport pour vos applications web.
Diversité des langages : Vous n'êtes plus limité à JavaScript. C, C++, Rust - apportez-les tous !
Sécurité : WebAssembly s'exécute dans un environnement sandboxé, conservant les choses en sécurité.

Premiers pas avec WebAssembly

Configuration de votre environnement de développement

Avant de commencer à coder, nous devons configurer notre espace de travail. C'est comme préparer votre cuisine avant de cuisiner un repas gastronomique. Voici ce dont vous aurez besoin :

Un navigateur web moderne (Chrome, Firefox, Safari ou Edge)
Un éditeur de texte (je recommande Visual Studio Code, mais utilisez celui avec lequel vous êtes à l'aise)
Le toolkit Emscripten (nous allons l'installer ensemble)

Installons Emscripten :

# Cloner le dépôt Emscripten
git clone https://github.com/emscripten-core/emsdk.git

# Entrer dans le répertoire cloné
cd emsdk

# Télécharger et installer les outils SDK les plus récents
./emsdk install latest

# Activer les outils SDK les plus récents
./emsdk activate latest

# Configurer les variables d'environnement
source ./emsdk_env.sh

Ne vous inquiétez pas si cela semble du charabia pour le moment. Pensez-y comme si vous préparez votre chevalet et vos peintures avant de créer une œuvre d'art !

Votre premier programme WebAssembly

Commençons par un simple programme "Hello, World !". Nous allons l'écrire en C, puis le compiler en WebAssembly.

Étape 1 : Écrire le code C

Créez un fichier nommé hello.c et ajoutez le code suivant :

#include <stdio.h>

int main() {
printf("Hello, WebAssembly World!\n");
return 0;
}

C'est comme écrire une lettre que nous allons traduire dans un langage que notre navigateur comprend.

Étape 2 : Compiler en WebAssembly

Transformons maintenant notre code C en WebAssembly. Exécutez cette commande dans votre terminal :

emcc hello.c -s WASM=1 -o hello.html

Cette commande est comme mettre notre lettre dans une machine magique de traduction. Elle crée trois fichiers :

hello.wasm : Le binaire WebAssembly
hello.js : Le code JavaScript de liaison
hello.html : Le fichier HTML pour exécuter notre programme

Étape 3 : Exécuter votre programme WebAssembly

Ouvrez le fichier hello.html dans votre navigateur. Vous devriez voir "Hello, WebAssembly World!" affiché sur la page. Félicitations ! Vous avez刚刚 exécuté votre premier programme WebAssembly !

Comprendre la magie

Voyons ce qui vient de se passer :

Nous avons écrit un simple programme C.
Nous avons utilisé Emscripten pour compiler notre code C en WebAssembly.
Emscripten a également généré du JavaScript pour charger et exécuter notre WebAssembly.
Le navigateur a exécuté notre code WebAssembly, affichant notre message.

C'est comme si nous avions écrit une lettre en anglais (C), la traduite en une langue universelle (WebAssembly), puis avons eu un interprète (JavaScript) la lire à haute voix d'une manière que tout le monde (le navigateur) pouvait comprendre.

Aller plus loin : Un simple calculateur

Maintenant que nous avons les pieds dans l'eau, essayons quelque chose de plus interactif. Nous allons créer un simple calculateur qui additionne deux nombres.

Étape 1 : Écrire le code C

Créez un nouveau fichier appelé calculator.c :

#include <emscripten.h>

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

Ici, EMSCRIPTEN_KEEPALIVE est comme apposer un timbre géant "IMPORTANT" sur notre fonction. Il indique à Emscripten de conserver cette fonction disponible pour que JavaScript puisse l'appeler.

Étape 2 : Compiler en WebAssembly

Compilez notre calculateur :

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

Cette commande est un peu plus complexe, mais pensez-la comme donner des instructions spécifiques à notre machine de traduction.

Étape 3 : Créer l'interface HTML

Créez un fichier nommé calculator.html :

<!DOCTYPE html>
<html>
<head>
<title>Calculateur WebAssembly</title>
</head>
<body>
<h1>Calculateur WebAssembly</h1>
<input type="number" id="num1" placeholder="Entrez le premier nombre">
<input type="number" id="num2" placeholder="Entrez le second nombre">
<button onclick="calculateSum()">Additionner</button>
<p>Résultat : <span id="result"></span></p>

<script src="calculator.js"></script>
<script>
Module.onRuntimeInitialized = function() {
window.add = Module.cwrap('add', 'number', ['number', 'number']);
}

function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = add(num1, num2);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>

Ce fichier HTML est comme créer une interface utilisateur conviviale pour notre calculateur. Il a des champs d'entrée pour nos nombres et un bouton pour déclencher le calcul.

Étape 4 : Exécuter votre calculateur WebAssembly

Ouvrez calculator.html dans votre navigateur. Vous devriez voir deux champs d'entrée et un bouton "Additionner". Entrez deux nombres, cliquez sur "Additionner", et voilà ! Votre calculateur WebAssembly en action !

Conclusion

Et voilà, les amis ! Nous avons pris nos premiers pas dans le monde passionnant de WebAssembly. Nous avons configuré notre environnement, créé un programme "Hello, World !" et même construit un simple calculateur.

Souvenez-vous, apprendre WebAssembly est comme apprendre à rouler un vélo. Cela peut sembler wobbly au début, mais avec de la pratique, vous serez bientôt zoomant dans le monde du développement web. Continuez à expérimenter, continuez à apprendre, et surtout, amusez-vous !

Dans notre prochaîne leçon, nous plongerons plus profondément dans les capacités de WebAssembly et explorerons comment optimiser les performances. Jusque-là, bon codage !

Credits: Image by storyset

Tutoriel suivant:

WebAssembly - Aperçu