WebAssembly pour les développeurs

# WebAssembly pour les développeur·euse·s

---

# @bnjbvr

---

# SpiderMonkey

---

# C'est quoi **W**eb**AS**se**M**bly ?

- Un **environnement d'exécution** rapide, stable, bien défini, aux
  performances proches du natif.
--

- Un nouveau **standard** créé en coopération par Apple, Google, Microsoft et
  Mozilla.

--
- Un format **binaire** compact, portable, rapide à charger et à *compiler*.

--
- Tout ça intégré dans la plateforme Web.

---

???

Pourquoi pas Flash / applets / NaCl?

- Friction.
- Sécurité (*8%*).
- Pas *webby*.

---

# wasm n'a pas ces défauts !

???

- Aucune friction...
- ... juste le Web !
- Un format *texte* équivalent.

---

# A quels besoins répond WebAssembly ?

- Performances à l'exécution, proches du natif (x1.2).
- Taille de programme plus petite.
- Rapidité de démarrage (surtout sur mobile).
- Nouvelles fonctionnalités (int64).

---

background-image: url(./img/browsers.png)
background-size: 100% auto
class: clear-slide, center

(image : Lin Clark)

---

background-image: url(./img/asmjs.png)
background-size: 40% auto
class: center, clear-slide

(image : acko.net)

???

- Un polyfill optionnel : [asm.js](http://asmjs.org).

---

# Pourquoi c'est plus rapide ?

(images : Lin Clark)

---

# Qui produit du wasm ?

(TeaVM, Cheerp, GCC, Faust...)

???

- Pas des *humain·e·s*.
- LLVM backend.
- [Emscripten](http://emscripten.org/)

---

# Une [démo](https://wasdk.github.io/WasmFiddle/?eq4qv) des outils

---

# Les APIs

```js
WebAssembly.compile(binary: ArrayBuffer)
    -> Promise<WebAssembly.Module>

WebAssembly.instantiate(
    module: WebAssembly.Module,
    imports?: Object
) -> Promise<WebAssembly.Instance>
```

---

# Un spectre de cas d'utilisation

???

Dans tous les cas, pas besoin de se soucier de comment c'est implémenté en
dessous : transparent pour le développeur et pour l'utilisateur.

---

# Porter une fonctionnalité C++ vers JS/wasm

### [argon2-browser](https://github.com/antelle/argon2-browser)

```
argon2.hash({ pass: 'password', salt: 'somesalt' })
      .then(h => console.log(h.hash, h.hashHex, h.encoded))
      .catch(e => console.error(e.message, e.code))
```

???

Taille de code : wasm plus de 2 fois plus petit que JS équivalent.
Vitesse : jusqu'à 80% speedup = 5 fois plus rapide que du JS.

---

# Un composant entier porté vers wasm

[PlayCanvas](https://playcanvas.com)

???

- PlayCanvas + Bullet
- React Fiber

---

# HTML pour l'UI, wasm pour la logique

[AutoCAD](http://www.autodesk.com/products/autocad/overview)

<blockquote class="twitter-tweet" data-lang="fr">
  <p lang="en" dir="ltr">
    <a href="https://twitter.com/linclark">@linclark</a>
      We have a web assembly build of AutoCAD that we'd like to showcase ... any advice or ideas on who
      we could talk to?
  </p>— Cameron Westland (@camwest)
  <a href="https://twitter.com/camwest/status/851582190747959296">10 avril 2017</a>
</blockquote>

---

# Un projet C++ porté vers wasm

[Unreal Engine](http://unrealengine.com/) - [ZenGarden demo](https://mzl.la/webassemblydemo)

???

- Imprime les images dans une canvas
- tous les appels vers des libs C++ externes sont retranscrits en appels à des
APIs Web.

---

# Et dans le futur ?

- Accès direct au DOM
- Garbage Collector
- Threads + ```SharedArrayBuffer```
- SIMD

---

???

- choix du langage + interopérabilité entre tous les langages.
- indépendence vis à vis de la plateforme

---

# 100 Questions Que Vous Allez Vous Poser

## La #2 Va Vous Étonner

---

# Pourrait-on avoir un compilateur X -> wasm ?

où X = JavaScript, Elm, Kotlin, Java, Python, Brainf**k, etc.

---

# Est-ce la fin de JavaScript ?

---

???

Non (à mon humble avis).

- Communauté hyper active autour de JavaScript.
- JS devient *plaisant* à utiliser (notamment avec ~~ES6~~ ES2015).
- Toujours présent dans les navigateurs et langage de prédilection du web.

---

# TL;DR

- wasm est un **format binaire** et un **environnement d'exécution**
- proche des **performances natives**
- utilisable **dès aujourd'hui**
- **accessible et transparent** pour utilisateurs et développeurs
- **universel**

---

# Références

## [A cartoon intro to WebAssembly](https://hacks.mozilla.org/category/a-cartoon-intro-to-webassembly/) [(FR)](https://tech.mozfr.org/post/2017/03/08/Une-introduction-cartoonesque-a-WebAssembly)

## [WebAssembly, a game changer for the web](https://www.youtube.com/watch?v=MaJCfdmr9Wg&list=PLo3w8EB99pqJNeb-FGiFbQpoX3Lo3YOIm)

## [WasmFiddle](https://wasdk.github.io/WasmFiddle/)

## [WasmExplorer](http://mbebenita.github.io/WasmExplorer/)

---

# La communauté wasm

## [https://webassembly.github.io/](https://webassembly.github.io/)

## [https://github.com/WebAssembly](https://github.com/WebAssembly)

<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">It actually stands for "Weird-Ass Stack Machine"</p>— Horse WebAssembly (@horse_wasm) <a href="https://twitter.com/horse_wasm/status/804038409853382656">30 novembre 2016</a></blockquote>

---

# Les sources

## [https://frama.link/mixit-wasm](https://frama.link/mixit-wasm)

## [bnjbvr.github.io/slides/2017/mixit-wasm](bnjbvr.github.io/slides/2017/mixit-wasm)

## [@bnjbvr](https://twitter.com/bnjbvr)