WebAssembly : l'atelier !

$ 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 ? 🤮

WASM Binary Assembly 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

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…)

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

• 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

• https://doc.rust-lang.org/book/
• https://rustwasm.github.io/docs/wasm-bindgen/introduction.html
• https://rustwasm.github.io/docs/wasm-pack/introduction.html