Introduction à web assembly

Une courte présentation à WebAssembly, des avantages et cas d'usages associés, des concepts techniques derrière (cf. AOT vs JIT), de l'état actuel du marché et de l'avenir de cette tendance / technologie

1. Introduction à
WebAssembly
9 novembre 2017

2. Définition :
WebAssembly, ou wasm, est
un langage de programmation
binaire de bas niveau pour le
développement d’applications
dans les navigateurs Web.
https://fr.wikipedia.org/wiki/WebAssembly

3. Standard by design



https://www.w3.org/community/webassembly/
Apple
Google
Microsoft
Mozilla
Opera Software
Safari
Chrome
Edge
Firefox
Opera

4. “Rendre le Web
aussi performant
que le Natif”

5. Avantages


●Portabilité cross-browsers
●Poids des fichiers réduit
●Temps de chargement réduit
●Lisibilité pour un humain
●Facilement débuggable
●Sécurité en mode sandbox
●Compatibilité avec l’existant

6. Use cases
●Applications de traitement (image, son, vidéo, fichiers, données)
●Jeux vidéos : casuals (fast boot), AAA (heavy assets), portals / MMO
●Peer-to-peer
●Streaming
●Editeurs (online IDE) et interpréteurs (JSFiddle- & code-school- like)
●Clients lourds web-ifiés
●Logiciels de CAO (médical, architecture, industrie, transports & flux, etc.)
●Applications hybrides (mobiles)
●Opérations de calcul distribué
●Server-side applications (le futur des Services Workers ?)

http://webassembly.org/docs/faq/

7. Définition (bis) :
WebAssembly, ou wasm, est
un langage de programmation
binaire de bas niveau pour le
développement d’applications
dans les navigateurs Web.
https://fr.wikipedia.org/wiki/WebAssembly

8. “asm.js est mort !
longue vie à wasm !”
https://brendaneich.com/2015/06/from-asm-js-to-webassembly/

9. asm.js by Mozilla - Firefox, depuis 2013

asm.js is an intermediate programming language designed to allow computer software
written in languages such as C to be run as web applications while maintaining performance
characteristics considerably better than standard JavaScript, the typical language used for
such applications.

asm.js consists of a strict subset of JavaScript, into which code written in statically-typed
languages with manual memory management (such as C) is translated by a source-to-source
compiler such as Emscripten (based on LLVM). Performance is improved by limiting language
features to those amenable to ahead-of-time optimization and other performance
improvements.
http://asmjs.org/faq.html

10. Exemple de code
asm.js
http://asmjs.org/spec/latest/

11. NaCl & PNaCl by Google - Chrome, dès 2011

Native Client is a sandbox for running compiled C and C++ code in the browser
efficiently and securely, independent of the user’s operating system.

Portable Native Client extends that technology with architecture independence, letting
developers compile their code once to run in any website and on any architecture
with ahead-of-time (AOT) translation.

In short, Native Client brings the performance and low-level control of native code to modern
web browsers, without sacrificing the security and portability of the web. Watch the video
below for an overview of Native Client, including its goals, how it works, and how Portable
Native Client lets developers run native compiled code on the web.
https://developer.chrome.com/native-client

12. FTL JIT by Apple - Safari, depuis 2014

Le machin d’Apple, qui donne l’impression que les gars n’ont jamais vraiment cru à la
tendance / au concept.
https://trac.webkit.org/wiki/FTLJIT

14. AOT vs. JIT
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
cf. “Dans les entrailles de JavaScript”
by FRO

15. Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation
https://stackoverflow.com/questions/41450226/angular-2-just-in-time-jit-vs-ahead-of-time-aot-compilation

16. WebAssembly : le bytecode du Web
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/

17. From: C / C++ / Rust / Python
To: JS + WASP + WAST + HTML

18. Glossaire
●Emscripten : un compilateur open source développé par Mozilla permettant de
compiler du bitcode LLVM en Javascript pour pouvoir l'exécuter dans n'importe
quel navigateur web. Le JS généré peut être du asm.js ou du wasm.
●LLVM : Low Level Virtual Machine. Architecture de compilateur. Equivalent de la
JVM pour Java. Son but est de transformer du code écrit dans un langage typé
dans un autre langage de plus haut niveau (Intermediate Representation).
●Clang : compilateur & optimiseur de code C / C++. Il s’agit d’une alternative
réputée plus rapide (lancement et exécution) et efficace (taille de l’output obtenu)
que gcc / g++.
●wast : abréviation pour WebAssembly Text Format. Format textuel de wasm.
http://webassembly.org/roadmap/

19. https://wasdk.github.io/WasmFiddle/
code.c -> code.wast

20. https://wasdk.github.io/WasmFiddle/
code.c -> code.wasm

21. Next steps
●Unifier / centraliser les bases de code et de documentation
●Basculer le niveau de spec de “expérimental” à “stable”
●Établir un nouveau véhicule de gouvernance au sein du W3C
●Améliorer l’outillage de développement (IDE, automation- & debug- tools)
●Enrichir la norme
●Augmenter le nombre de langages supportés (C / C++, Rust, Go, Python, etc.)
●Pouvoir appeler WebAssembly directement depuis HTML
http://webassembly.org/roadmap/

22. Faut-il dès à présent investir sur
WebAssembly ?

23. I usually finish with a joke:
« Always bet on JS ».
•••
Brendan Eich

24. Articles :
●[TL;DR] WebAssembly: A New Hope – by PSPDFKit [lien]
●[TL;DR] Getting Started With WebAssembly – [lien]
●WebAssembly concepts – on Mozilla MDN [lien]
●WebAssembly: An initial view – by JC Bayler, Intel [lien]
●A cartoon intro to WebAssembly – by Lin Clark, Mozilla [lien]

Code & outils :
●emscripten – convertisseur C / C++ en asm.js [lien]
●WasmFiddle – éditeur en ligne de code wasm [lien]
●MASSIVE - the web computation benchmark – benchmark [lien]
●JS vs. WASM – benchmark [lien]

Démos & vidéos :
●Tanks! Demo – démo officielle & cross-browser d’un jeu vidéo [lien]
●AngryBots – jeu 3D développé par Microsoft [lien]
●Compiling for the Web with WebAssembly – Google I/O '17 [lien]

25. Questions ?

26. Merci :-)