Objectifs, concepts clés et cas d'utilisation

Vous êtes-vous déjà demandé quels sont les principes fondamentaux et les applications concrètes de WASM ? Si ce n'est pas le cas, cet article est fait pour vous.

WebAssembly (WASM) est un nouveau langage de programmation de bas niveau. Il permet d'atteindre des performances quasi-natives directement dans votre navigateur web.

Dans notre premier volet, "WebAssembly pour les débutants", nous avons introduit WASM sous un angle accessible, en définissant ses caractéristiques et ses limites. Nous avons également exploré ses fonctionnalités, sa feuille de route et comment JavaScript interagit avec WebAssembly de manière complémentaire.

Cet article approfondit notre exploration de WebAssembly en examinant ses objectifs, ses concepts clés et ses divers cas d'utilisation. Nous jetterons aussi un coup d'œil à des projets passionnants qui exploitent cette technologie.

Entrons dans le vif du sujet.

Les ambitions de WebAssembly

Afin de saisir pleinement les concepts fondamentaux de WebAssembly, il est essentiel d'examiner ses objectifs initiaux. Ceux-ci comprennent :

L'optimisation des ressources matérielles grâce à un format binaire efficace. Ce format réduit le temps de chargement et la taille des fichiers, facilitant ainsi la compilation. WASM utilise un arbre de syntaxe abstraite (AST) au format binaire, ce qui permet une compilation et une exécution à des vitesses proches de celles du langage natif. Cette approche permet à WASM de fonctionner sur une variété de plateformes, telles que l'IoT, le web et les appareils mobiles.
L'intention de WASM n'est pas de bouleverser l'écosystème web existant, mais plutôt de s'y intégrer harmonieusement. Ainsi, WebAssembly peut coexister avec les technologies web actuelles et passées. Il s'intègre parfaitement à JavaScript, permettant des opérations parallèles et des appels synchrones entre les deux.
Le respect des politiques de sécurité des autorisations et des règles d'origine est une priorité absolue.
La capacité pour les développeurs de créer des solutions compatibles avec des environnements sans navigateur est une nécessité.
Enfin, fournir aux développeurs un format texte éditable pour le code source WebAssembly facilite l'interaction avec cette technologie.

Concepts clés de WebAssembly

Voici les étapes suivies par WebAssembly :

Le développement commence par l'écriture de code dans un langage typé statiquement, avec des types de données définis.
Ensuite, un module WASM précompilé est généré et transmis au compilateur du moteur.
Cette étape évite l'analyse et prépare le code à être rendu directement dans le navigateur web.

Voici les concepts essentiels pour comprendre comment WebAssembly fonctionne dans un navigateur web:

Mémoire: la gestion de la mémoire dans WebAssembly est réalisée par des instructions d'accès de bas niveau. Techniquement, il s'agit d'un ArrayBuffer redimensionnable qui contient un tableau d'octets.
Module : un module WebAssembly est un fragment de code exécutable compilé. En raison de sa nature sans état, le navigateur peut compiler le module et le partager entre différents onglets et workers. Le module contient également les importations et exportations, ainsi que des fonctions, des tables, des types, des variables globales et des données de mémoire.
Table : Une table est un tableau typé redimensionnable qui stocke des références de fonctions et de données, au lieu d'octets bruts dans la mémoire.
Instance : Une instance est un module WebAssembly en cours d'exécution. Elle possède tous les états associés, comme la table, la mémoire et d'autres valeurs importées.

Concepts fondamentaux de WASM

En tant que développeur web, vous pouvez manipuler des modules, des instances, des tables et des données via l'API JavaScript. Vous pouvez également invoquer de manière synchrone des fonctions exportées de WASM à partir de JavaScript. L'interopérabilité entre JavaScript et WebAssembly permet de construire des applications web performantes.

Objets WASM

Lorsque vous travaillez avec WebAssembly, il est important de comprendre les huit types d'objets suivants :

WebAssembly.Global : Cet objet représente une variable globale. Il est accessible à la fois par le code WebAssembly et JavaScript.
WebAssembly.Module : Cet objet contient le code WASM compilé, qui est sans état.
WebAssembly.Instance : Cet objet représente une instance exécutable de WebAssembly.Module, incluant son état interne.
WebAssembly.Table : Cet objet contient des références de fonctions et agit comme un wrapper JavaScript.
WebAssembly.CompileError : Cet objet englobe les erreurs qui surviennent durant la validation et le décodage du code WASM.
WebAssembly.RuntimeError : Cet objet contient toutes les erreurs qui se produisent pendant l'exécution du code WASM.
WebAssembly.LinkError : Cet objet rassemble les erreurs qui surviennent durant l'instanciation du module WASM.

Cas d'usage et projets WASM

WebAssembly offre des performances de type natif dans le navigateur web. Voici quelques cas d'utilisation pour mieux comprendre son potentiel :

Les applications de WebAssembly s'étendent au-delà du simple navigateur. Voici quelques exemples d'utilisation au sein du navigateur :

Traitement audio et vidéo, comme avec le projet ffmpegwasm.
Jeux vidéo performants dans le navigateur.
Visualisation et simulations scientifiques.
Émulation de systèmes (DOSBox, MAME, etc.).
Cryptographie.
Accès à distance.
Outils de développement.

Cas d'utilisation

Voici d'autres cas d'usage de WebAssembly:

L'écriture de code plus rapide et la pleine exploitation du matériel sous-jacent.
La compression côté client, améliorant les temps de chargement et réduisant la consommation de bande passante.
L'utilisation de langages de programmation autres que JavaScript pour certaines tâches spécifiques de votre application web (Rust, C, C++).

Projets

Voici quelques projets notables qui utilisent WebAssembly :

Figma a optimisé les performances de son application web grâce à l'utilisation de WebAssembly. Cela a réduit le temps de chargement de l'application, l'affichage des designs et le téléchargement des fichiers. Figma a aussi implémenté WASM pour une compression plus efficace, réduisant considérablement la taille des téléchargements.
Pyodide: Ce projet de Mozilla permet aux scientifiques de compiler la pile scientifique Python, incluant NumPy, SciPy et Scikit-learn, directement dans le navigateur web. Il offre une conversion transparente entre Python et JavaScript et permet d'accéder aux API web depuis Python.
Blazor WebAssembly : ce framework permet de développer des applications web interactives côté client avec .NET. Ces applications peuvent être hébergées directement dans le navigateur grâce au runtime .NET basé sur WebAssembly. Les développeurs peuvent accéder aux fonctionnalités du navigateur depuis leur code .NET via les API JavaScript de WebAssembly.

Source : Figma

De nombreux autres projets utilisent WebAssembly, tels que Binaryen, Cheerp, Forest, Grain, entre autres.

Conclusion

WebAssembly n'est pas une technologie facile pour les débutants. Cependant, en comprenant ses concepts clés et ses cas d'utilisation, vous pourrez apprécier son véritable potentiel.

Avec des projets innovants qui émergent, c'est le moment idéal pour se familiariser avec WebAssembly, surtout si vous êtes un développeur web. Sa capacité à fonctionner en dehors du navigateur en fait une option de choix pour les applications axées sur la performance.

Cet article vous a plu ? N'hésitez pas à le partager !