Devinez quoi ! Il existe maintenant un nouveau type de code supporté officiellement par les navigateurs, et c’est WebAssembly !
WebAssembly, du binaire dans notre navigateur
L’idée de WebAssembly c’est d’avoir un code qui soit rapide, portable. A priori, il se veut debuggable,même s’il s’agit d’un langage assembly bas niveau.
L’essentiel c’est d’avoir un fichier wasm qui sera chargé depuis notre page HTML, grâce à du code javascript.
Pour faciliter le debuggage, nous avons également un fichier wat (c’est du wasm textuel).
Le plus important ici, c’est qu’on ne va pas coder directement en WebAssembly.
Non en fait, nous voilà à coder en C, en rust, en C# et à générer du WebAssembly qui sera chargé dans notre navigateur !
Et tiens, pourquoi ne pas créer aussi du code TypeScript qui génère du WebAssembly !
Des exemples webassembly, un IDE
Pour des exemples WebAssembly avec javascript, je vous invite à aller voir ceux proposés par developper Mozilla.
Vous pouvez par exemple explorer un fichier C converti en fichier wasm, et voir le code intermédiaire, grâce au WebAssembly Explorer.
Et si le coeur vous en dit, il existe même un IDE en ligne pour créer vos fichiers wasm, soit à partir du C, de Rust ou bien de TypeScript !
Des attentions particulières sur WebAssembly !
Bien que le WebAssembly paraît plus rapide que le javascript, à l’heure actuel, il n’a pas de Garbage Collector ! Ce sera donc à nous de gérer la mémoire, comme en C ! (enfin pour l’instant)
Nos premiers essais avec un fichier wasm
Pour suivre tous nos essais, suivez notre projet github autour de la découverte de webassembly.
Vous pourrez y découvrir notre premier test avec un fichier wasm déjà existant.
(bon on a déjà rencontré des problèmes avec le type wasm qui n’est pas encore supporté par live server.
Nos premiers essais avec TypeScript
Ici, nous allons récupéré un compilateur dédié qui permet :
- d’écrire du TypeScript
- de générer des fichiers wasm
Il s’agit du AssemblyScript.
Bon, nous avons du modifier le script, car npm run “asbuild” ne fonctionnait pas : la commande asc n’était pas reconnue.
En fait, il ne trouvait pas le bon chemin.
Pour tester notre idée, nous avons lancé :
node ./../../node_modules/assemblyscript/bin/asc assembly/index.ts -b build/untouched.wasm -t build/untouched.wat –sourceMap –validate –debug
(on est allé chercher le fichier asc directement dans le dossier bin du package assemblyscript).
Et là, ça fonctionne, enfin, on a un fichier wasm depuis un fichier typescript !! 
Just amazing !!!
Lançons maintenant la commande :
node ./../../node_modules/assemblyscript/bin/asc assembly/index.ts -b build/optimized.wasm -t build/optimized.wat –sourceMap –validate –optimize
Aller, testons maintenant dans notre page html !
Et nous avons bien notre exécution de notre function add !
Pour plus de détails :
Des jeux en webassembly
Si vous souhaitez découvrir la puissance de WebAssembly, nous vous invitons à aller découvrir une liste de jeux faits en WebAssembly !