WebAssembly, révolution pour le Web

Historique

Au milieu des années 90, JavaScript faisait son apparition, initialement développé pour donner de l’interactivité aux pages web, son gros point faible c’était la performance.

Malgré son manque incontestable de performance, JavaScript résiste au fils des ans et tient tête aux nombreux concurrents qui tentent de le détrôner, RIP Flash.

Il faudra attendre 2008 et la sortie de Google Chrome qui accompagné de son moteur JavaScript v8 et sa compilation Just In Time pour accroître considérablement les performances du JavaScript, le conduisant à la notoriété qu’il connaît aujourd’hui.Cette compilation Just In Time et l’amélioration des performances a ainsi pu donner naissance à des technlogies comme Electron ou NodeJS.

Malgré tout, on ne va pas se mentir, JavaScript reste un langage haut niveau donc côté perf, même si c’est mieux qu’avant ce n’est pas optimal et ce n’est pas fait pour ça.

C’est pourquoi WebAssembly a été conçu, pour compléter JavaScript avec des performances supérieures.

 Qu’est-ce que WebAssembly ?

Abrégé wasm, WebAssembly n’est pas vraiment un langage à proprement parler, autrement dit on ne codera jamais directement du wasm. C’est en réalité un type de code dit d’instructions codées en binaire, bytecode, exécuté à bas niveau proche de l’assembleur, d’où son nom. Le code est compilé à partir d’autres langages tels que C, C++, Rust et plein d’autres (on reviendra dessus par la suite) et est interprété dans le navigateur directement à l’aide de JavaScript. Il est ainsi possible d’exécuter du code offrant des performances quasi natives directement depuis le navigateur.

Comme vous l’aurez compris, WebAssembly n’a pas pour vocation de remplacer JavaScript, ces deux langages sont faits pour travailler ensemble. On remarquera d’ailleurs que la couleur utilisée pour le logo est la couleur complémentaire de celle utilisée pour le logo JavaScript.

Mais WebAssembly ne se limite pas à une interprétation côté client, il s’éxécute également côté serveur.

If WASM+WASI existed in 2008, we wouldn’t have needed to created Docker. That’s how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let’s hope WASI is up to the task!Solomon Hykes - Co fondateur de Docker

Comme le soulignait Solomon Hykes sur Twitter le 27 mars 2019, WebAssembly est une réelle révolution également car il devient un langage standardisé et répond ainsi à une véritable problématique des systèmes d’information, à savoir la compatibilité des applications par rapport à leurs environnements, à laquelle Docker avait tenté de pallier en conteneurisant les applications.

Quels langages peuvent-être compilés en WebAssembly ?

À l’heure où j’écris cet article, de nombreux langages ont déjà fourni une mode de compilation vers WebAssembly. Voici la liste non exhaustive : C, C++, C#, Go, Kotlin, Python, Rust, AssemblyScript. Chaque langage propose son compilateur, pour certain WebAssembly sera directement proposé comme destination de build, pour d’autres il faudra utiliser un compilateur tiers, c’est le cas notamment de l’écosystème C et C++ qui seront compilés par Emscrypten.

Concernant cette liste, vous avez sans doute déjà au moins entendu parler de tous ces langages, sauf peut-être le dernier ? AssemblyScript, ça ne vous dit rien ?

C’est justement sur ce dernier que je vais m’attarder.

Focus sur AssemblyScript

Venant de l’écosystème JavaScript, TypeScript, je me suis tout naturellement tourné vers ce nouveau langage qui se présente comme un script compilant un subset de TypeScript (Pour ceux qui ne connaissent pas TypeScript est ni plus ni moins du JavaScript avec un typage) en WebAssembly. Il génère des modules WebAssembly simples qui seront compatibles avec nos applications JS.

Comment ça marche ?

Pour commencer et comprendre comment ça fonctionne, nous allons initier un répertoire et installer assemblyscript et serve pour faire tourner notre application.

  npm init
  npm i assemblyscript serve

On va ensuite créer un répértoire assembly, contenant un fichier main.ts qui renverra une simple fonction add, et que nous devrons compiler en WebAssembly

export function add(x: i32, y: i32): i32 {
  return x + y
}

Petite remarque sur ce script, on remarquera que le typage est plus fin que celui que nous pourrions avoir pour un script TypeScript classique. Dans notre cas, nous recevons x et y qui sont des i32 et notre fonction renverra un i32, i32 étant un entier signé de 32 bits. Ce typage se rapprochant de ce que nous pourrions avoir dans une application en C par exemple.

Nous allons ensuite ajouter un script pour compiler ce fichier à notre package.json

{
  "build": "asc assembly/main.ts -b build/main.wasm"
}

Nous allons ensuite créer un fichier index.js, qui instanciera et utilisera la fonction add et qui affichera le résultat d’une addition résultant de notre fonction add dans notre page.

const importObject = { imports: { imported_func: (arg) => console.log(arg) } }

WebAssembly.instantiateStreaming(fetch('../build/main.wasm'), importObject)
  .then((result) => {
    const exports = result.instance.exports
    document.getElementById('root').textContent = exports.add(4, 1)
  })
  .catch(console.error)

Puis nous allons créer le fichier HTML qui appelle ce script js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Hi, I'm using WebAssembly + AssemblyScript</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

Enfin, ajoutons le script qui permettra de lancer notre application à notre ̀̀̀ package.json`

{
  "serve": "serve ./ -p 8080"
}

Maintenant, testons, dans votre terminal :

  yarn build
  yarn serve

Vous devriez avoir la valeur 5 affichée sur votre page

Conclusion

Je trouve que l’ajout de WebAssembly au standards W3C est une très bonne chose car il va offrir de nouvelles perspectives pour les applications Web. Pour illustrer mon propos et vous montrer à quel point WebAssembly est une réelle révolution, je vais prendre l’exemple d’AutoCAD.

AutoCAD est un logiciel de conception assistée par ordinateur qui permet aux architectes, ingénieurs et professionnels de la construction de créer des dessins 2D et 3D. Le logiciel, codé en C, très gourmand en ressources est disponible sous forme d’exécutable à installer sur votre ordinateur, et bien grâce à WebAssembly, AutoCAD a pu compiler son application pour en faire une Web app.

C’est également une très bonne chose pour les développeurs Front, qui auront l’opportunité de s’intéresser à des méthodes de langage plus bas niveau. la frontière entre les développeurs Back et Front n’a jamais été aussi mince avec les nouveaux écosystèmes qui se développent et c’est une très bonne chose à mon sens.