VT2020-WebAssembly-Fiche

From air
Jump to: navigation, search

Fiche WebAssembly

Logo du WebAssembly


TLDR

Le WebAssembly est une nouvelle technologie ajouté à la majorité des navigateurs internet en 2017. Il s'apparente à de l'assembleur pour le web. Son objectif est de permettre l’exécution d'application haute performances sur le navigateur. Contrairement au Javascript, pour utiliser le WebAssembly nous devons passer (majoritairement) par une compilation.


Description

Le WebAssembly est une nouvelle technologie du web, elle vient s'ajouter à la majorité des navigateurs et rejoins la famille des langages/technologies reconnue par des navigateurs (HTML, CSS et Javascript). WebAssembly vient de la concaténation de web et assembleur. Cela reflète l'objectif de cette technologie, obtenir des performances sur le web proche du natif. La technologie a été créer pour ajouter à l'arsenal des navigateurs une technologie permettant d'avoir performances meilleurs que celle du Javascript, et permettre ainsi aux navigateurs d'avoir accés à des applications hautes performances ou plus sécurisé en utilisant les ressources de l'utilisateur et non pas d'un serveur.

WebAssembly et Javascript

Créé par @diekus

Le WebAssembly n'a pas pour objectif de venir perturber le Javascript, les deux langages sont complémentaire. Cela est particulière vrai car le WebAssembly n'a pas de moyen natif d’interagir avec le DOM et doit donc se reposer sur le Javascript pour interagir avec celui-ci.

L'écart de performance entre le Javascript et le WebAssembly vient du faites que le WebAssembly est généralement compilé "ahead of time" tandis que le Javascript est compilé "just in time"..

Exemple

On peut soit écrire directement en WebAssembly, même si cela n'est pas le but de la technologie en elle même. Le but est d'écrire dans un autre langage de programmation (C, C++, Rust, ...). La technologie est encore assez jeune, donc seul un petit ensemble de langage possède un compilateur pour le WebAssembly.

Exemple compilation de code C, en WebAssembly (.wat à gauche et .wasm à droite)


Langage officiellement supporté

Webassembly official language.PNG

Historique

Guerre des standards

Avant la création du WebAssembly, les grandes entreprises du web (Google, Mozilla, Microsoft, ...) avaient compris que les navigateurs manquaient d'une technologie leur permettant d'avoir de meilleur performance que le Javascript. Cette technologie permettrait de pouvoir faire fonctionner directement depuis un navigateurs des applications lourde, que l'on aurait considéré comme native auparavant.

L'initiative de Google pour créer cette technologie se nomme Google Native Client (ou NaCl). NaCl fut créé en 2011 et fut. La technologie fonctionner sur un principe de sandboxing, permettant de faire fonctionner du code natif peut importe l'architecture visé (x86, ARM, ...). L'objectif de Google est de faire cette technologie un des piliers Chrome OS, qui avait pour ambition d'utiliser en majorité des web apps. En 2017, Google annonce l'obsolescence de cette technologie. NaCl a tout de même était une assez belle réussite de Google, car avant son obsolescence on pouvait utiliser l’accélération matériel graphique pour pouvoir faire marcher des jeux par exemple.

ActiveX logo.png

L'initiative de Microsoft pour créer cette technologie ne fut pas quelque chose de direct, une évolution de leur technologie ActiveX (vieille de 1996) permet en soit de pouvoir faire tourner du code natif sur leur navigateur. ActiveX fut adopter par de nombreux navigateur en dehors de Microsoft de part son ancienneté, mais ses capacités étaient très limité. Les performances d'ActiveX était très loin des performances d'un code natif. Aujourd'hui ActiveX n'est plus utilisé pour le web par Microsoft, car la technologie n'est plus accessible depuis Edge (leur nouveau navigateur).


Exemple de code asm.js

L'initiative de Mozilla est surement celle qui a eu le plus d'impact sur WebAssembly. Leur technologie se nomme asm.js, créé par une équipe à Mozilla (dont Alon Zakai) en 2013. Le but de cette technologie était d'être compatible avec tous les navigateurs, car le code était toujours du Javascript mais que dans certain navigateur le code pouvait gagné en performance de part la façon dont il était écrit. Pour gagner en performance asm.js utilisait un espace mémoire modifiable (cf. MEM8 dans image ci-dessous) ainsi que du code pour inférer le type d'une variable (cf. |0 permet de au navigateur de savoir que ptr est un entier sur 32bits dans l'image ci-dessous). Pour créer du code compatible avec asm.js, soit on peut écrire directement en Javascript (un peu complexe car il faudra respecter scrupuleusement la nomenclature permettant de gagner en performance) ou plus communément en écrivant du code dans un autre langage (C, C++, Rust, ...) et compiler le code en asm.js. Les capacités de asm.js furent montré au travers d'une implémentation d'une démo technique (Citadel) tournant sous le moteur Unreal Engine 3, le moteur fut implémenté en 3 jours en asm.js. Les performances de asm.js pouvait atteindre 2 fois moins que du code native (beaucoup plus performant que du Javascript normal).



Création du WebAssembly

Logo du World Wide Web Consortium

Ayant vue le potentiel de asm.js, Mozilla décide d'ouvrir la discussion avec les autres acteurs majeur du web et de créer un standard commun gérer par le World Wide Web Consortium (cf. image ci-dessous). Le WebAssembly fut introduit au monde le 17 juin 2015. La technologie entre en browser preview en novembre 2016, puis en mars 2017 elle est disponible au grand publique.

La sortie de la technologie a poussé à l'obsolescence la plus part des autres technologies ayant le même objectif.

Google Chrome (desktop) et Firefox (desktop) étaient les deux seules navigateurs compatible lors de sa sortie. Maintenant la majorité des navigateurs desktop et mobile supporte la technologie.

A sa sortie WebAssembly était un MVP (minimum viable product) en 1.0, aujourd'hui la technologie en est à sa version 1.1.

Le nombre de langage supportant le WebAssembly en 2017 était très faible on y retrouvais notamment:

  • C
  • C++
  • Rust
  • ...


Roadmap

Même si WebAssembly est maintenant disponible au publique, celui-ci continue son développement avec des mises à jours semi-régulière (plus fréquente que les autres langages natif des navigateurs). Voici une courte roadmap des fonctionnalités qui sont envisagé dans avenir plus ou moins proche:

Roadmap post-mvp du WebAssembly visualisé par Lin Clark
  • Support du GPU par WebAssembly
  • Multithreading
  • Unification des librairies
  • Garbage Collector
  • Gestion des exceptions
  • Amélioration du tracing
  • Meilleur outils de débogage
  • SIMD
  • Adressage sur 64-bit
  • Streaming compilation
  • Tiered compilation
  • Coroutines
  • Linear memory bigger than 4gb
  • ...

Lien vers une partie de leur roadmap à court terme.


Utilisation

Pour plus d'information pratique sur l'utilisation du WebAssembly voici le lien de la démonstration.

Contribuer

Il est possible de contribuer au projet de WebAssembly si cela vous intéresse. Pour contribuer il faut se rendre sur leur page Github, où l'on peut voir tout leur projet en cours. Page Github.

De plus, il est possible de contribuer pour majorité des compilateurs de WebAssembly notable, comme par exemple:

Référence

  1. https://webassembly.org/
  2. https://webassembly.org/roadmap/
  3. https://github.com/WebAssembly/design/blob/master/FutureFeatures.md
  4. https://webassembly.org/getting-started/developers-guide/
  5. https://en.wikipedia.org/wiki/WebAssembly
  6. https://wasmbyexample.dev/home.en-us.html
  7. https://medium.com/dfinity/why-webassembly-f21967076e4
  8. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
  9. https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
  10. https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6
  11. https://rsms.me/wasm-intro
  12. https://wasm-talk.johnny.sh/#0
  13. https://www.youtube.com/watch?v=kUljgnOE5-A&t=544s
  14. https://www.youtube.com/watch?v=drRaRRZ5AJk&t=2273s
  15. https://www.youtube.com/watch?v=njt-Qzw0mVY&t=2060s
  16. https://www.youtube.com/watch?v=jGKjKx2vous&t=629s
  17. https://madewithwebassembly.com/
  18. https://github.com/mbasso/awesome-wasm
  19. https://github.com/appcypher/awesome-wasm-langs

Veille Technologique 2020