Suport technique et veille technologique

Bidouilleux d’Web  -  Enfin, on peut compiler en WebAssembly !

 -  Décembre 2015 - 

Ce billet est une traduction du billet publié par Alon Zakai sur hacks.mozilla.org.

WebAssembly est un nouveau format binaire destiné à la compilation pour le Web. En ce moment, les équipes des différents navigateurs travaillent ensemble à concevoir et à implémenter ce format et ça avance plutôt rapidement ! Dans ce billet, nous verrons certains des progrès qui ont été accomplis en étudiant en détail les composants de la chaîne de compilation pour WebAssembly.

Afin que WebAssembly puisse être utilisable, il est nécessaire d’avoir deux composants principaux : une chaîne de compilation qui compile du code en WebAssembly d’une part et des navigateurs qui peuvent exécuter ce code d’autre part. Chacun de ces composants dépend de l’avancement des spécifications sur WebAssembly mais aussi et surtout des développements à faire. Cette séparation est une bonne chose : cela permettra aux compilateurs de générer du code WebAssembly qui pourra être utilisé par n’importe quel navigateur et les navigateurs pourront exécuter du code WebAssembly quel qu’en soit le compilateur à l’origine. Autrement dit, différentes chaînes de compilation pourront fonctionner avec différents navigateurs et permettront aux utilisateurs de pouvoir choisir. Cette séparation permet aussi de travailler actuellement en parallèle sur ces deux aspects.

Du côté de la chaîne de compilation, un nouveau projet a vu le jour : Binaryen. Binaryen est une bibliothque de compilation pour WebAssembly, écrite en C++. Si vous ne travaillez pas sur un compilateur pour WebAssembly, vous n’aurez probablement pas besoin d’en savoir plus à ce sujet. En revanche, si vous utilisez un compilateur WebAssembly, peut-être que, sous le capot, celui-ci utilisera Binaryen ; nous verrons des exemples par la suite.

Au cœur de Binaryen, on trouve un ensemble modulaire de classes qui permettent d’analyser (parsing) et de créer du code WebAssembly, qui permettent aussi de le représenter sous forme d’un arbre syntaxique abstrait (AST pour Abstract Syntax Tree) afin de pouvoir appliquer des transformations puissantes. Construits sur ces classes, on trouve plusieurs outils utiles :

• L’interface système (shell) Binaryen qui permet de charger des modules WebAssembly, de les transformer, de les exécuter dans un interpréteur, de les afficher, etc. Le chargement et l’affichage utilisent la syntaxe de s-expressions, avec le suffixe .wast (le travail de conception du format binaire pour WebAssembly et du format textuel final est en cours)
• asm2wasm qui permet de compiler du code asm.js en code WebAssembly
• wasm2asm qui permet de compiler du code WebAssembly en code asm.js (travail en cours)
• s2wasm qui compile des fichiers .s en code WebAssembly. Ce format .s est émis par le nouveau backend WebAssembly, développé avec LLVM.
• wasm.js est un portage de Binaryen en JavaScript, cela permet d’exécuter l’ensemble des composants que nous venons de citer depuis une page web ou depuis n’importe quel autre environnement JavaScript.

Si vous souhaitez avoir un aperçu général de Binaryen, vous pouvez consulter cette présentation que j’ai donnée récemment (ne passez pas la diapositive n°9 ;)).

Il est important de noter que WebAssembly est encore dans une phase de conception et les formats utilisables en entrée ou en sortie de Binaryen (.wast et .s) ne sont pas figés. Binaryen est constamment mis à jour pour s’adapter aux modifications. Celles-ci se font de moins en moins nombreuses mais ce n’est pas encore stable.

Voyons maintenant ce à quoi Binaryen peut être particulièrement utile.

Compiler en WebAssembly grâce à Emscripten

Emscripten permet de compiler du C et du C++ en asm.js et l’outil asm2wasm de Binaryen permet de compiler du code asm.js en code WebAssembly. En les utilisant ensemble, Emscripten et Binaryen permettent donc de compiler du code C ou C++ en WebAssembly. Vous pouvez utiliser asm2wasm via du code asm.js (grâce à la ligne de commande), mais mieux vaudra laisser Emscripten se charger du sale boulot avec une ligne semblable à :

emcc fichier.cpp -o fichier.js -s 'BINARYEN="chemin-vers-binaryen"'

Emscripten compile le fichier fichier.cpp, créera un fichier JavaScript et un autre fichier, au format .wast, pour le code WebAssembly généré. En fait Emscripten compile vers asm.js puis exécute asm2wasm. sur le fichier asm.js pour obtenir le fichier .wast. Si besoin, vous trouverez plus d’informations sur la page wiki à propos de WebAssembly.

Enfin, à quoi cela rime de compiler en WebAssembly alors que les navigateurs ne supportent pas encore ce format ? Bonne remarque :) En effet, on ne livrera pas ce code si les navigateurs ne peuvent l’exécuter. En revanche, c’est toujours utile de tester : on veut savoir si Emscripten peut compiler vers WebAssembly, dès que possible, sans avoir à attendre un support des navigateurs.

Comment vérifier qu’Emscripten compile bien en WebAssembly si on ne peut pas exécuter le code ? En fait, on peut utiliser wasm.js qui a été intégré dans le fichier .js obtenu grâce à Emscripten avec la ligne de commande emcc vue avant. wasm.js contient certains morceaux de Binaryen compilés en JavaScript, y compris l’interpréteur Binaryen. Si vous exécutez le fichier fichier.js (avec node ou dans une page web), ce sera l’interpréteur qui exécutera le code WebAssembly. Cela nous permet de vérifier que le code WebAssembly compilé fait bien ce qu’on lui demande. Vous pouvez voir un exemple d’un tel programme ici. D’autres compilations sont disponibles sur le dépôt de la suite de compilation afin de tester.

Bien entendu, ce n’est pas non plus la méthode rêvée pour tester : on a un programme C++, compilé en WebAssembly, exécuté via un interpréteur WebAssembly, lui-même compilé du C++ vers JavaScript et rien d’autre qui permette d’exécuter le programme initial. Tout n’est pas si pessimiste et voici quelques raisons de faire confiance aux résultats :

• Ce programme généré passe avec succès la suite de tests Emscripten. Cette suite inclut de nombreuses bases de code réalistes (Python, zlib, SQLite, etc.) et de nombreux autres tests unitaires pour des cas aux limites en C et C++. D’expérience, si cette suite de tests est réussie, il est très probable que d’autres codes fonctionnent.
• L’interpréteur Binaryen passe avec succès la suite de tests de la spécification WebAssembly. Cela indique que Binaryen exécute correctement le code WebAssembly. Autrement dit, lorsque les navigateurs supporteront le format, ils devront l’exécuter de la même façon. Cela sera beaucoup plus rapide ! On a ici un interpréteur, très lent afin de pouvoir tester. Il existe d’autres projets en cours pour des prothèses (polyfill) performantes.
• Le code produit a été généré grâce à Emscripten, un compilateur stable, utilisé en production et Binaryen apporte assez peu de nouveau code en plus (quelques milliers de lignes). Moins il y a de nouveau code, moins il y a de risques de bogues.

Dans l’ensemble, c’est bon signe. On peut aujourd’hui compiler du code C et C++ en WebAssembly grâce à Emscripten et Binaryen, même si les navigateurs ne peuvent pas encore exécuter ce code.

En dehors de la production de code WebAssembly, pour ces compilations, on utilise la chaîne Emscripten normalement : le portage de musl et de syscalls pour y accéder, du code OpenGL/WebGL, du code d’intégration dans le navigateur, du code d’intégration dans node.js, etc. Par conséquent, cela supporte tout ce qu’Emscripten fait déjà. Les projets existants qui utilisent déjà Emscripten peuvent donc créer du code WebAssembly en activant simplement une option. C’est un aspect crucial : permettre aux projets C++ actuels d’être compilés vers le Web avec WebAssembly, dès que celui-ci sera prêt, sans avoir à fournir d’effort particulier.

Utiliser le nouveau backend expérimental LLVM pour WebAssembly avec Emscripten

Nous avons vu qu’un jalon important avait été atteint pour Emscripten : on peut l’utiliser pour compiler en WebAssembly et tester que le résultat obtenu est valide. Mais ce n’est pas tout. Là, nous utilisions le compilateur asm.js d’Emscripten en association avec asm2wasm. Or, il existe un support LLVM pour WebAssembly et celui-ci est directement développé sur le dépôt amont de LLVM. Bien que celui-ci ne soit pas prêt pour une utilisation généralisée, cet outil pourra devenir très important sur le long terme. Binaryen supporte également cet outil.

Le backend LLVM, comme tous les backends LLVM, émet du code assembleur. Dans ce cas, il émet du code au format .s. Ce résultat est proche du code WebAssembly mais n’est pas identique pour autant. La structure obtenue est plus proche de celle qu’on voit habituellement pour un programme C compilé (une liste linéaire d’instructions, etc.) que de celle d’un programme WebAssembly (dont la structure est plus proche d’un AST). Le fichier .s peut être converti en WebAssembly relativement simplement et Binaryen inclut s2wasm qui permet de traduire du .s en WebAssembly. Cet outil peut être utilisé en ligne de commande mais il est aussi intégré dans Emscripten : ce dernier dispose maintenant d’une option WASM_BACKEND qui peut être utilisée de cette façon :

emcc fichier.cpp -o fichier.js -s 'BINARYEN="chemin-vers-binaryen"' -s WASM_BACKEND=1

Note : cette option nécessite d’utiliser l’option BINARYEN car s2wasm fait partie de Binaryen.

Lorsque cette option est fournie, Emscripten utilise le nouveau backend WebAssembly plutôt que celui d’asm.js. Après avoir appelé le backend et reçu le fichier .s, Emscripten appelle s2wasm pour le convertir en WebAssembly. Vous pourrez trouver des exemples de programmes qui peuvent être compilés avec ce nouveau backend sur le wiki d’Emscripten.

Il existe donc deux manières de compiler du code WebAssembly en utilisant Binaryen :

• Emscripten avec le backend asm.js et asm2wasm, qui fonctionne dès aujourd’hui et qui devrait être plutôt stable
• Emscripten avec le nouveau backend, qui n’est pas encore tout à fait fonctionnel mais qui deviendra, au fur et à mesure une option puissante. J’espère qu’à l’avenir, cette option remplacera asm.js. Le but est que la transition se fasse sans accroc : comme on l’a vu, passer de l’un à l’autre revient à modifier une simple option.

Il en va de même pour asm.js et le support de WebAssembly par Emscripten : il s’agit d’une option à paramétrer et la transition devrait aussi être simple à mettre en œuvre. En d’autres termes, le chemin à parcourir sera plutôt direct entre :

• Utiliser Emscripten aujourd’hui pour créer du code asm.js,
• Utiliser Emscripten pour créer du code WebAssembly grâce à asm2wasm (possible dès maintenant mais les navigateurs ne supportent pas le format)
• Et utiliser Emscripten pour créer du code WebAssembly grâce au nouveau backend LLVM une fois que celui-ci sera prêt.

Chaque étape accomplie sur ce chemin apportera son lot de bénéfices, sans qu’il y ait d’effort particulier à fournir de la part des développeurs.

Pour conclure, bien que ce billet illustre l’utilisation de Binaryen avec Emscripten, il a initialement été conçu pour être une bibliothèque C++ générique permettant de manipuler du code WebAssembly. Si vous souhaitez écrire une chaîne logicielle en lien avec WebAssembly, vous aurez vraisemblablement besoin de code pour lire du WebAssembly, en afficher les résultats, manipuler des AST, etc. Binaryen permet de faire tout cela et s’est avéré très utile pour écrire asm2wasm, s2wasm, etc. J’espère que d’autres projets pourront en tirer parti.

À propos d’Alon Zakai :

Alon fait partie de l’équipe de recherche de Mozilla où il travaille principalement sur Emscripten, un compilateur qui permet de compiler du code C ou C++ en JavaScript. Alon a fondé le projet Emscripten en 2010.

par sphinx