WebAssembly: qu'est-ce que c'est et comment créer un Hello World

Les pages Web utilisent actuellement deux types de langages de programmation. D'une part, nous avons les langages côté serveur (comme PHP) qui s'exécutent sur le propre serveur du site Web et envoient les informations déjà traitées à l'utilisateur. Et d'autre part, les langages de programmation côté client qui s'exécutent dans le propre navigateur de l'utilisateur. Bien que le langage le plus utilisé dans la programmation Web côté client soit JavaScript, il existe d'autres alternatives qui dépassent de loin ce langage. Et l'un d'eux est WebAssembly .

Qu'est-ce que WebAssembly

WebAssembly est un langage de programmation frontend qui a été annoncé pour la première fois en 2015. En 2016, la première démonstration de ce langage a été faite en Firefox, Chrome, Google Chrome et Microsoft Edge exécuter une démo populaire appelée «Unity's Angry Bots».

WebAssembly

Ce langage de programmation, abrégé en Wasm , utilise un format de code binaire portable, bytecode). Grâce à lui, les scripts côté client sont entièrement exécutés dans le navigateur. C'est un langage de programmation de bas niveau, et bien qu'il ait été créé à l'origine comme cible de compilation pour Code C et C ++ , il est également compatible avec d'autres langues telles que Go et Calme.

Ce langage de programmation s'est avéré considérablement plus rapide que d'autres langages de programmation tels que JavaScript. De plus, il n'a pratiquement aucune limitation en termes de fonctions, car il vous permet d'exécuter presque n'importe quel code de bureau directement dans le navigateur. Et avec une vitesse presque native.

WASM n'a pas été créé pour remplacer JavaScript ou tout autre langage frontal, mais plutôt pour les compléter. Les navigateurs sont capables de l'exécuter en même temps, pouvant charger des modules créés dans WebAssembly dans les applications JavaScipt.

Actuellement, WebAssembly 1.0 est déjà inclus dans les moteurs Firefox, Chrome, Safari et Edge.

Fonctionnalités WASM

Avec autant de langages de programmation qui fonctionnent aujourd'hui, il est difficile de trouver des différences critiques entre eux tous. Mais WebAssembly a parié principalement pour se différencier de ses rivaux sous deux aspects. D'une part, nous parlons d'un rapide et efficace langage de programmation, un langage déjà de bas niveau qui nous permettra d'exécuter du code binaire à partir du navigateur. En sauvant des intermédiaires ou des interprètes, le code s'exécute presque instantanément sur le matériel, atteignant une vitesse presque native.

D'autre part, ce langage a également misé sur sécurité . WASM utilise des techniques pour se charger en mémoire en toute sécurité (avec un bac à sable) afin que l'environnement d'exécution soit isolé du reste du système. Cet environnement sécurisé peut même être implémenté dans des machines virtuelles JavaScript existantes, offrant une sécurité supplémentaire contre d'autres éléments. Cette langue appliquera les politiques de sécurité du système, ainsi que les propres autorisations du navigateur.

Bien sûr, tout ce qui concerne ce langage de programmation est ouvert . Ses instructions peuvent être imprimées dans un langage textuel (il ne faut pas écrire avec des uns et des zéros) et peuvent être déboguées, testées, modifiées et expérimentales avec lui sans problème. De plus, il est conçu pour la préservation du Web ouvert, étant compatible avec les mêmes API que JavaScript et rétrocompatible avec les versions précédentes.

Comment programmer dans WebAssembly

Ce langage de programmation est ouvert, donc n'importe qui peut l'utiliser pour tout ce qu'il veut. De plus, bien qu'il soit considéré comme un langage de bas niveau, il n'est pas vraiment compliqué à utiliser.

Différencier les trois états

Quand on parle de ce langage de programmation, il faut avant tout différencier trois états différents:

  • Répertoire de . Le code du programme en tant que tel. Ce code est généralement écrit dans un langage de programmation différent, il n'est donc pas difficile de créer des programmes ou des modules avec lui. Nous pouvons choisir le langage de programmation que nous voulons dans cette étape, à condition qu'il soit compatible. Les plus utilisés sont généralement C ++ et Rust.
  • Code d'octet WebAssembly . Lors de la compilation du programme, ce que nous devons faire est de choisir que nous voulons le faire dans ce format. Le propre compilateur de notre environnement de programmation sera chargé d'utiliser les instructions IDE pour convertir le code de l'autre langage dans ce format. Ce que nous obtiendrons à la fin est un fichier .wasm.
  • Langage machine . Lorsque nous avons le fichier WASM compilé, nous l'ouvrons dans le navigateur. Et c'est celui qui se charge de traduire le code directement en langage machine, c'est-à-dire en binaire.

En outre, WebAssembly dispose d'un langage intermédiaire appelé texte WASM. Ce langage se présente comme un langage de programmation de haut niveau pour WASM. Les fichiers écrits dans cette langue sont enregistrés dans des fichiers avec une extension WAT, et nous aurons besoin d'un outil appelé " Boîte à outils binaire WebAssembly ”Pour le convertir en fichier .wasm. Il n'est généralement pas utilisé car il est beaucoup plus compliqué que les autres langues et, au final, cela n'en vaut pas la peine. Mais cela existe, et vous devez le savoir.

Exemple de code WebAssembly WASM

Créez notre premier programme

Il existe de nombreuses façons de compiler un programme ou un module WebAssembly. Nous vous recommandons, par exemple, d'utiliser le SDK Emscripten, que nous pouvons télécharger à partir de ici .

Ensuite, nous aurons besoin de notre module écrit dans ce langage de programmation. Nous allons utiliser un exemple de «Hello World» écrit en C. Notre fichier, hello.c, aura le texte suivant:

#include <stdio.h> int main() {printf("Hello Worldn");}

Une fois notre fichier écrit en C, nous utiliserons le " S'inscrire ”Pour le transmettre à WASM. Nous pouvons exécuter Emscripten à partir de Python, ou, mieux, à partir d'un Windows Sous-système pour Linux/Unix. Si nous programmons à partir de Windows et que nous ne voulons pas utiliser Linux, nous devons chercher un autre compilateur équivalent. Pour le faire avec Emscripten, nous allons ouvrir une console Windows, et nous y exécuterons cette commande:

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

Le paramètre «WASM = 1» est chargé d'indiquer au programme que ce que nous voulons, c'est compiler le code dans ce langage. Le résultat, une fois les instructions terminées, sera:

  • Un fichier hello.wasm, le binaire.
  • Un fichier JavaScript qui contient les dépendances nécessaires pour traduire de C en WASM: hello.js.
  • Le fichier hello.html nécessaire pour ouvrir le fichier wasm dans le navigateur et le compiler.

En exécutant simplement «hello.html», nous exécuterons le code dans WebAssembly.