WebAssembly : l'atelier !

Le navigateur comme Machine Virtuelle

@m4d_z
alwaysdata
m4dz's avatar
m4dz

Paranoïd Web Dino · Tech Evangelist

alwaysdata logo
https://www.alwaysdata.com

 Au menu ce soir

  1. WebAssembly ?
  2. Avec quoi / comment ?
  3. On aspire tout Internet
  4. Coucou le Monde !
  5. C’est où les toilettes ?
  6. La deuxième partie va vous surprendre
$ git clone https://github.com/m4dz/wasm-workshop.git

Il était une fois…

  • 2001: Prototype, Scriptaculo·us, Mootools
  • 2005: jQuery
  • 2010: SPA / Backbone
  • 2012: Angular
  • 2015: virtual-dom, React, Vue.js
  • 2018: PWA
  • 2019: Ça va la RAM ? Bien ? 🤮

Nous développons des apps!

Nos besoins :

  • Environnemnt securisé
  • Moteur d’exècution rapide
  • Code métier partagé

WASM Binary Format

0200 20 00
0202 42 00
0204 51
0205 04 7e
0207 42 01
020A 05
020B 20 00
020D 20 00
0210 42 01
0211 7d
0212 10 00
0214 7e
0217 0b

C’est un… langage ?

WASM Text Format

get_local 0
i64.const 0
i64.eq
if i64
    i64.const 1
else
    get_local 0
    get_local 0
    i64.const 1
    i64.sub
    call 0
    i64.mul
end
C'est tout ce que t'as ?

🍀 types statiques

  • 2 Entiers
  • 2 Flotants

Mon problème :
j’utilise pas que des nombres !

Je veux des chaînes de caractères
💩WTF-8

Il va falloir
compiler pour le Web

Ce dont on a besoin

  • Un langage typé statique
  • Une excellente gestion de la mémoire
  • Des ponts vers JavaScript
  • Une chaîne d’outils

Ce dont on n’a pas besoin

  • Une nouvelle VM

Rust 🦀

Linux / MacOS / Unix

curl https://sh.rustup.rs -sSf | sh

Windows


https://static.rust-lang.org/rustup/dist/i686-pc-windows-gnu/rustup-init.exe

Test

$ rustup --version
rustup 1.19.0 (2af131cf9 2019-09-08)
$ cargo --version
cargo 1.38.0 (23ef9a4ef 2019-08-20)

Pourquoi Rust?

  • C++, merci, mais j’ai qu’un cerveau
  • Design prévenant les data-race
  • Statiquement typé
  • Iterators
  • Excellente gestion mémoire
  • Communauté 😍
  • Boîte à outils (Rustup, Cargo, Rustc…)

Ordre d’exécution

  1. Fetch
  2. Chargement / Compilation (×2)
  3. Instanciation
  4. Accès aux méthodes

On va utiliser un packer

wasm-pack 📦✨

📦✨ your favorite rust -> wasm workflow tool!

Linux / MacOS / Unix

 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

Windows


https://github.com/rustwasm/wasm-pack/releases/download/v0.8.1/wasm-pack-init.exe

Test

$ wasm-pack --version
wasm-pack 0.8.1

Bonus : Node.js


https://nodejs.org/en/download/

Utilisation

$ wasm-pack test [--firefox [--headless]] wasm-workshop
$ wasm-pack build [--target web] [--release] wasm-workshop [-- --features wee_alloc]

Prêt à l’emploi

$ tree
├── bridge.js
├── Cargo.toml
├── pkg
│   ├── my-module_bg.d.ts
│   ├── my-module_bg.wasm
│   ├── my-module.d.ts
│   ├── my-module.js
│   ├── package.json
│   └── snippets
│       └── my-module-91b01578bc1ce6c0
│           └── bridge.js
└── src
    └── lib.rs

Démarrer un projet

$ cargo install cargo-generate
$ cargo generate --git https://github.com/rustwasm/wasm-pack-template.git

wasm-bindgen!

Facilitating high-level interactions between wasm modules and JavaScript.

  • Bibliothèque haut-niveau
  • Abstraction vers:
    • Web sys (DOM, window, document, fetch, canvas…)
    • JS sys (passing values, types, boxing…)
    • Promises
  • Génère même vers TypeScript

Documentations

Merci !


Disponible sous licence CC BY-SA 4.0

Illustrations

m4dz, CC BY-SA 4.0

Interleaf images

Courtesy of Unsplash and Pexels contributors

Icons

  • Layout icons are from Entypo+
  • Content icons are from FontAwesome

Fonts

  • Cover Title: Sinzano
  • Titles: Argentoratum
  • Body: Mohave
  • Code: Fira Code

Tools

Powered by Reveal.js

Source code available at
https://git.madslab.net/talks