WebAssembly - Modules

Bonjour, futurs programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte du monde des modules WebAssembly. Ne vous inquiétez pas si vous êtes nouveaux dans la programmation - je serai votre guide amical, et nous avancerons pas à pas. À la fin de cette leçon, vous aurez une compréhension solide des modules WebAssembly et de leur fonctionnement. C'est parti !

Qu'est-ce que WebAssembly ?

Avant de parler des modules, revenons rapidement sur ce qu'est WebAssembly. Imaginez que vous construisez un château de sable. WebAssembly est comme avoir un seau spécial qui vous permet de construire des châteaux plus rapidement et plus solides que jamais auparavant. Dans le monde du développement web, WebAssembly est un langage de bas niveau qui s'exécute dans les navigateurs, permettant des performances quasi-natives.

Étape 1 : Comprendre les Modules WebAssembly

Les modules WebAssembly sont les briques de construction des applications WebAssembly. Pensez à eux comme des pièces de LEGO - chaque module est une unité autonome qui peut être combinée avec d'autres pour créer quelque chose d'incroyable.

Concepts Clés

Format Binaire : Les modules sont généralement distribués dans un format binaire (fichiers .wasm).
Compilation : Ces modules sont compilés à partir de langages comme C, C++ ou Rust.
Imports et Exports : Les modules peuvent importer des fonctionnalités et exporter leurs propres fonctions.

Étape 2 : Créer et Utiliser des Modules WebAssembly

Maintenant, explorons le processus de création et d'utilisation d'un module WebAssembly.

2.1 Écrire le Module WebAssembly

Premièrement, nous devons écrire notre module. Nous utiliserons une fonction C simple à titre d'exemple :

// add.c
int add(int a, int b) {
return a + b;
}

Cette fonction additionne deux nombres. Simple, n'est-ce pas ? Mais comment transformons-nous cela en module WebAssembly ?

2.2 Compiler en WebAssembly

Pour compiler cela en WebAssembly, nous utilisons un outil appelé Emscripten. Voici la commande :

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

Cette commande crée deux fichiers :

add.wasm : Notre module WebAssembly
add.js : Le code JavaScript de liaison pour charger et utiliser notre module

2.3 Charger le Module dans JavaScript

Maintenant, voyons comment nous pouvons utiliser ce module dans une page web :

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Add Function</title>
</head>
<body>
<h1>WebAssembly Add Function</h1>
<p>Résultat : <span id="result"></span></p>
<script src="add.js"></script>
<script>
Module.onRuntimeInitialized = async _ => {
const result = Module._add(5, 3);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

Explication du Code

Reprenons ce qui se passe dans ce code :

Nous incluons le fichier add.js, qui charge notre module WebAssembly.
Nous utilisons Module.onRuntimeInitialized pour nous assurer que le module est chargé avant de l'utiliser.
Nous appelons notre fonction add en utilisant Module._add(5, 3).
Le résultat est affiché sur la page.

Exemple : Un Module Plus Complex

Maintenant que nous avons vu un exemple simple, essayons quelque chose de plus complexe. Nous allons créer un module qui calcule le factorielle d'un nombre.

// factorial.c
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}

Compilez-le de la même manière :

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

Maintenant, utilisons-le dans notre HTML :

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Factorial Calculator</title>
</head>
<body>
<h1>Calculateur de Factorielle WebAssembly</h1>
<input type="number" id="input" value="5">
<button onclick="calculateFactorial()">Calculer</button>
<p>Résultat : <span id="result"></span></p>
<script src="factorial.js"></script>
<script>
function calculateFactorial() {
const n = document.getElementById('input').value;
const result = Module._factorial(n);
document.getElementById('result').textContent = result;
}

Module.onRuntimeInitialized = async _ => {
calculateFactorial();
};
</script>
</body>
</html>

Sortie

Lorsque vous exécutez ceci dans un navigateur, vous voir un champ d'entrée où vous pouvez saisir un nombre. En cliquant sur le bouton "Calculer", le factorielle de ce nombre sera affiché, tout calculé par notre module WebAssembly !

Conclusion

Félicitations ! Vous avez刚刚 fait vos premiers pas dans le monde des modules WebAssembly. Nous avons couvert les bases de la création, de la compilation et de l'utilisation des modules WebAssembly dans les applications web. Souvenez-vous, c'est juste le début - WebAssembly ouvre une nouvelle ère de possibilités pour le développement web, vous permettant d'apporter le calcul haute performance au navigateur.

En continuant votre voyage, vous découvrirez comment WebAssembly peut être utilisé pour tout, des jeux aux traitements de données complexes. Continuez à expérimenter et n'ayez pas peur de repousser les limites de ce qui est possible dans le navigateur !

Méthode	Description
Module.onRuntimeInitialized	Assure que le module WebAssembly est entièrement chargé avant utilisation
Module._functionName	Appelle une fonction exportée du module WebAssembly
emcc	Commande du compilateur Emscripten pour créer des modules WebAssembly

Souvenez-vous, apprendre WebAssembly est comme apprendre à faire du vélo - cela peut sembler délicat au début, mais avec de la pratique, vous serez bientôt à fond la caisse ! Bonne programmation !

Credits: Image by storyset

Tutoriel précédent:

WebAssembly - „Bonjour le monde“

Tutoriel suivant:

WebAssembly - Validation