Assemblage Web utilisant JavaScript (Wasm)

Vous êtes-vous déjà demandé s'il était possible d'exécuter des applications hautes performances sur le Web sans sacrifier la portabilité et la sécurité fournies par JavaScript ? Eh bien, ne vous posez plus la question ! Avec l'introduction de WebAssembly (Wasm), il est désormais possible d'apporter des performances natives aux applications Web tout en exploitant la puissance de JavaScript. Dans cet article, nous explorerons les bases de WebAssembly et comment vous pouvez l'utiliser avec JavaScript pour ouvrir un nouveau monde de possibilités.

Qu'est-ce que WebAssembly (Wasm) ?

WebAssembly, communément appelé Wasm, est un format d'instruction binaire conçu pour les navigateurs Web. Il s'agit d'une machine virtuelle de bas niveau capable d'exécuter du code à une vitesse quasi native. Wasm est le résultat d'une collaboration entre les principaux fournisseurs de navigateurs, notamment Mozilla, Google, Microsoft et Apple, dans le but de proposer des applications hautes performances sur le Web.

L'un des principaux avantages de WebAssembly est qu'il est compatible avec plusieurs langages de programmation, ce qui en fait une solution universelle pour le développement Web. Vous pouvez écrire du code dans des langages comme C++, Rust ou même TypeScript, puis le compiler dans un format binaire Wasm qui peut être exécuté directement dans le navigateur.

Intégrer WebAssembly avec JavaScript

WebAssembly apporte de nombreux avantages au développement Web. Il permet aux développeurs d'effectuer des tâches de calcul intensives à des vitesses quasi natives, ce qui le rend adapté aux applications nécessitant une exécution hautes performances. En tirant parti de WebAssembly, les développeurs peuvent porter sur le Web des bases de code existantes écrites dans des langages tels que C++, Rust ou TypeScript sans sacrifier les performances.

L'intégration de WebAssembly avec JavaScript permet une interaction transparente entre les deux langages. JavaScript agit comme un pont, fournissant une interface pratique pour travailler avec les modules WebAssembly. Cela permet aux développeurs de combiner la puissance de WebAssembly avec le riche écosystème et la flexibilité des bibliothèques et des frameworks JavaScript.

Bien que WebAssembly soit une technologie autonome, elle s'intègre parfaitement à JavaScript, permettant aux développeurs de combiner les avantages des deux langages dans une seule application. JavaScript agit comme le ciment entre la plate-forme Web et les modules WebAssembly, fournissant une interface pratique pour interagir avec le code compilé.

JavaScript fournit l'API requise pour charger les modules WebAssembly. L'API fetch est utilisée pour récupérer le fichier binaire et transmettre l'ArrayBuffer résultant à la fonction WebAssembly.instantiate. Cette fonction compile le module de manière asynchrone et renvoie une instance contenant les fonctions exportées et la mémoire du module. En accédant à ces fonctions exportées, JavaScript peut appeler des fonctionnalités fournies par le module WebAssembly.

Pour démontrer cette intégration, considérons un exemple simple. Nous allons écrire un module Wasm qui calcule la séquence de Fibonacci, puis appeler le module depuis JavaScript.

Étape 1 : Écrire le module WebAssembly

Écrivons d’abord la logique de calcul de Fibonacci en C++. Enregistrez le code suivant dans un fichier appelé fibonacci.cpp -

#include <emscripten.h>

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

Instructions

Dans ce code, nous avons une fonction C++ fibonacci qui calcule récursivement la séquence de Fibonacci. La macro EMSCRIPTEN_KEEPALIVE garantit que la fonction est exportée et accessible depuis JavaScript.

Étape 2 : Compilez le module WebAssembly

Pour compiler du code C++ vers WebAssembly, nous utiliserons la chaîne d'outils Emscripten. Exécutez la commande suivante dans le terminal -

emcc fibonacci.cpp -s WASM=1 -o fibonacci.wasm

Cette commande générera le fichier fibonacci.wasm, qui contient le module WebAssembly compilé.

Étape 3 : Appelez WebAssembly à partir de JavaScript

Maintenant que nous avons le module WebAssembly, appelons-le depuis JavaScript. Enregistrez le code suivant dans le fichier HTML index.html -

Exemple

<!DOCTYPE html>
<html>
<head>
   <script>
      const fetchAndInstantiate = async () => {
         const response = await fetch('fibonacci.wasm');
         const buffer = await response.arrayBuffer();
         const module = await WebAssembly.instantiate(buffer);
         const instance = module.instance;

         const fibonacci = instance.exports.fibonacci;
         const result = fibonacci(10);

         console.log('Fibonacci(10):', result);
      };

      fetchAndInstantiate();
   </script>
</head>
<body>
</body>
</html>

Instructions

Dans ce code, nous utilisons l'API fetch pour récupérer le fichier fibonacci.wasm et le convertir en ArrayBuffer. Nous instancions ensuite le module WebAssembly à l'aide de WebAssembly.instantiate et obtenons la fonction Fibonacci exportée à partir de l'instance du module. Enfin, nous appelons la fonction Fibonacci avec le paramètre 10 et enregistrons les résultats sur la console.

Étape 4 : Exécutez l'exemple

Pour exécuter l'exemple, ouvrez le fichier HTML dans un navigateur Web. Ouvrez la console de développement de votre navigateur et vous devriez voir la sortie Fibonacci(10) : 55. Cela confirme que le module WebAssembly a été chargé et exécuté avec succès à partir de JavaScript.

Conclusion

WebAssembly est une technologie puissante qui ouvre de nouvelles possibilités pour les applications Web hautes performances. En combinant les avantages de WebAssembly et de JavaScript, les développeurs peuvent exploiter les bases de code existantes, écrire des parties critiques en termes de performances dans des langages de niveau inférieur et les intégrer de manière transparente dans leurs projets Web. Grâce à la flexibilité et à la portabilité de WebAssembly, la plateforme Web promet d'être un environnement plus puissant pour exécuter des applications complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!