WebAssembly, une nouvelle cible de compilation pour le Web

# WebAssembly

### Une nouvelle cible de compilation pour le Web

---

---

# SpiderMonkey

???

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

---

# Qu'est-ce que WebAssembly ?

- Un **standard** du W3C (CG).
- Fruit d'une coopération entre Apple, Google, Microsoft et Mozilla.
- Un format **binaire**...
    - *compact* ;
    - *portable* ;
    - *sûr* ;
    - rapide à *charger* ;
    - rapide à *exécuter* ;
- ... et un format **texte**\*
    - correspondant directement au format binaire ;
    - plus simple que du vrai assembleur.

.right.small-text[\*(alerte divulgachâge, `view-source` n'est pas mort).]

---

# Plusieurs manières de voir WebAssembly

1. un complément à JavaScript
2. une cible de compilation
3. une architecture de processeur *virtuel*
4. l'évolution d'asm.js

---

# Un complément à JavaScript

- Hautes performances
- Facile à mettre en cache et à partager
--

- **Idéal** pour des bibliothèques de code !

---

# Usages

- compression d'images ou de vidéos côté client
- intégration de codecs expérimentaux
- traitement du signal
- cryptographie
- moteurs physiques
--

- sans compter les **programmes entiers** compilés pour le Web !

---

# Une cible de compilation

- Conçu pour minimiser la *taille du code* (compact) et maximiser la *vitesse de
compilation*.

--
- \~langage assembleur.
    - typé statiquement
    - plus abstrait qu'un vrai asm
--
- stack machine typée.
    - rapide à compiler (en une passe)
    - simple à compiler (allocation de registres)
--
- encodage postfixe d'un *abstract syntax tree* (**AST**).
    - simple à valider
    - simple à afficher sous forme de texte
--
- *control flow* structuré.
    - pas de goto
    - simplifie beaucoup d'algorithmes

---

# Un processeur virtuel

- Sûreté du code (*sandboxing*)
    - Pas d'*aliasing* entre les adresses de retour et la mémoire.
    - Vérification des accès mémoires.
--
- Portabilité :
    - inter-navigateurs (Firefox, etc.).
    - inter-architectures (x64, x86. ARM, etc.).
    - inter-OS (GNU/Linux, MacOS, etc.).
--
- Aussi proche que possible du code machine (pour la performance).

`i32.add <=> addl (x86) <=> ADD (ARM)`

`call <=> call (x86) <=> BL (ARM)`

---

# L'évolution d'asm.js

*Sous-ensemble* de JavaScript, sujet à *validation* et *pré-compilation*,
hautement optimisable avec des *performances élevées* garanties, issu de la
compilation de code C/C++.

---

# Juste du JavaScript

```
function module(global, imports, heap) {
    "use asm"; // HINT
    var I32View = new global.Int32Array(heap);
    var print = imports.print;
    function f(i) {
        i = i | 0;
        var y = 0;
        y = I32View[i >> 2] | 0;
        y = i + y | 0;
        print(y);
    }
    return {
        f: f
    };
}
```

---

# Pourquoi asm.js ?

- Porter facilement des applications C / C++ vers le web (sans tout réécrire).

--
- Porter des bibliothèques C / C++ vers JavaScript.

--
- Eviter d'avoir recours à des plugins.

--
- Tout en obtenant des performances proches du natif.

---

# L'histoire d'asm.js

- 2009-2012 : Mozilla Research commence des expérimentations :
    - *Emscripten* : ensemble d'outils, basés sur `clang` et `LLVM`, pour
    compiler de C/C++ vers JavaScript.
    - *asm.js* : optimisation du code généré par Emscripten.
- 2013-2014 :
    - asm.js publié dans Firefox.
    - les optimisations prouvent qu'il est possible de lancer des jeux vidéos
    dans le navigateur.
- 2015-2016 :
    - Microsoft Edge implémente la précompilation et des optimisations
    d'asm.js.
    - Adobe, AutoDesk, Epic, Facebook, Mega,
    [Unity](http://beta.unity3d.com/jonas/DT2/) utilisent du code asm.js généré
    avec Emscripten.

---

# Aller plus loin qu'asm.js

- Support de nouvelles fonctionnalités :
    - threads (*SharedArrayBuffer*, *Atomics*).
    - SIMD (*SIMD.js*).
    - *dynamic linking*.
--
- Réduire le temps de compilation.

--
- Réduire le temps de chargement.

--
- Réduire l'emprunte mémoire.

--
- Réduire le fossé avec les performances natives.

---

# WebAssembly comme évolution naturelle

```
(x + y | 0)             => i32.add

I32View[ptr >> 2] | 0   ~> i32.load

Math.fround(x + y)      => f32.add

???                     => i64.add
```

---

# Travaux en cours

- Spécifié et implémenté de manière incrémentale.
- Interopérabilité entre Chrome, Edge et Firefox (nightly).
- Version MVP = asm.js++.
- [Demo](http://webassembly.github.io/demo)

---

# Format texte **temporaire**

---

# Une simple addition

```
;; wasm source
(module
    (func $add (param $lhs i32) (param $rhs i32) (result i32)
        (i32.add (get_local $lhs) (get_local $rhs))
    )
    (export "add" $add)
)
```

```
fetch('demo.wasm').then(response =>
    response.arrayBuffer()
).then(buffer => {
    let codeBytes = new Uint8Array(buffer);
    // Older API !
*   let instance = Wasm.instantiateModule(codeBytes);
    alert("1 + 2 = " + instance.exports.add(1, 2));
});
```

[Demo](/slides/2016/lyonjs-wasm/run-demo.html)

---

# Aller plus loin (!)

```
// integration avec les modules E56
<script type="module">
    import add from 'demo.wasm';
    alert("1 + 2 = " + add(1, 2));
</script>
```

```
fetch('demo.wasm').then(response =>
    response.arrayBuffer()
).then(buffer => {
    let codeBytes = new Uint8Array(buffer);
*   return WebAssembly.compile(codeBytes);
}).then(module => {
*   let instance = new WebAssembly.Instance(module);
    alert("1 + 2 = " + instance.exports.add(1, 2));
});
```

[Demo 2](/slides/2016/lyonjs-wasm/run-demo2.html)

---

# Au delà de C++ : Java, .NET...

- Intégration du *garbage-collector*.
- *TypedObjects* (structures fixes de champs typés).
- Notifications post-mortem (*finalizers*).

---

# ... Ruby, Python

- Support pour des valeurs dynamiques (non typées).
- *Patching*.
- Compilation de tous petits morceaux de code.

---

---

# FAQ

---

# Quand sortira WebAssembly ?

--
Fin d'année pour une Release Candidate.

---

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

--
Oui, mais c'est équivalent à réimplémenter une VM JS.

---

## Est-ce la mort 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.

---

# Merci de votre attention !

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

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

## .link[[http://bnjbvr.github.io/slides/2016/lyonjs-wasm](http://bnjbvr.github.io/slides/2016/lyonjs-wasm)]

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

???
Comments