WASM?
Le navigateur est une vraie VM
@m4d_zhttps://talks.m4dz.net/a-taste-of-wasm/fr/JS et le Web en 6 dates
(et une bonus)
On développe des
(Progressive Web) Apps!
La plateforme Web est déjà
une machine virtuelle
On veut :
WASM
JS est lent
(bah oui, quand même)
ASM.js : l’expérience
function increment(x) {
x = x|0;
return (x + 1)|0;
}
Il va falloir compiler !
Emscripten
$ emcc hello_world.c
$ tree
.
├── a.out.html
└── a.out.js
$ node a.out.js
Hello World!
Et si on pouvait compiler
toute notre codebase Web ?
WebAssembly is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.
WASM Binary Format
0061 736d
0100 0000
0100 01
6002
7f7f
017f 07
0300 01
0002
0700 0103
6164 64
0000 07
0a00 0100
00
2000 2001
6a0b 0709
0000 04
6e61 6d65
WASM Text Format
(module
(func (export "add") (param i32 i32) (result i32)
local.get 0
local.get 1
i32.add))
Problème :
WASM est en MVP
🍀 static types
Rust Do it!
WASM Rust Hello World, Web version
pub fn greet(name: &str) {
alert(&format!("Hello {}!", name));
}
Pourquoi Rust ?
Modules By Design
mod sound {
pub mod instrument {
pub fn pouet() {
// ...
}
}
}
fn main() {
crate::sound::instrument::pouet();
}
Modules WASM
Le modèle de sécurité
Instanciation
const importObject = {
imports: {
alert: window.alert
}
};
WebAssembly
.instantiateStreaming(fetch('greeter.wasm'), importObject)
.then(mod => mod.instance.exports.greet('Hello World'));
Souviens-toi l’été dernier,
WASM : que des nombres !
Strings ?
💩TF-8
Un nombre, ça peut être…
un pointeur mémoire !
Linear Memory
const pointer = 0
const LM = new WebAssembly.Memory({ initial: 1 })
const sharedMem = new Uint8Array(LM.buffer)
const str = "Hello World"
[].forEach.call(
btoa(str),
(char, idx) => sharedMem[pointer + idx] = char.charCodeAt(0)
)
// Uint8Array(65536) [ 83, 71, 86, 115, 98, 71, 56, 103, 86, 50, … ]
📦✨ your favorite rust -> wasm workflow tool!
Package
$ cd my-module
$ wasm-pack build --target web --release
Publication vers les registres (NPM…)
$ 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
Facilitating high-level interactions between wasm modules and JavaScript.
window
, document
, fetch
, canvas
…)use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern "C" {
fn alert(s: &str);
}
#[wasm_bindgen(module = "/bindings.js")]
extern "C" {
fn updateState(state: &JsValue);
}
pub fn greet(name: &str) {
alert(&format!("Hello {}!", name));
let state = State { name }
updateState(JsValue::from_serde(&state).unwrap());
}
Embind is used to bind C++ functions and classes to JavaScript, so that the compiled code can be used in a natural way by JavaScript.
Les promesses de WebAssembly
Stack Based VM
Stack based vs. Register based
→ JVM, CLR &… JS JIT: Stack Based VM
Opération: (1 + 2 * 3) / 7
Instructions:1.
2.
3.MUL.
ADD.
7.
DIV
Assembleur !
PUSH 1
PUSH 2
PUSH 3
MUL
ADD
PUSH 7
DIV
WASM utilise le même moteur JS
Wasmtime
System Interface
La portabilité, c’est
La sandbox pour tous !
Glue : WASM Standard Interfaces
Passage de types de WASM à JS :
simple mais fastidieux
Passage de types de WASM
vers tout le reste :
on ne va pas hardcoder tous les codex !
Interface Types
Production-Proof
Tu ❤ JS? Essaie AssemblyScript !
AssemblyScript compiles a strict variant of TypeScript to WebAssembly using Binaryen.
export function fib(n: i32): i32 {
var a = 0, b = 1
if (n > 0) {
while (--n) {
let t = a + b
a = b
b = t
}
return b
}
return a
}
Tu fais du dev système ?
Check LLVM !
Tu fais du backend interprété ?
Interface Types ! (ou Wasmtime)
Coming Soon
$ wasmer run cowsay.wasm Hello World!
________________
< Hello World! >
----------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
The Future of FaaS
$ curl --location --request POST 'https://[::]/api/executables' \
--header 'Content-Type: application/octet-stream' \
--header 'SSVM_Description: say hello' \
--data-binary 'pkg/hello_lib_bg.wasm'
$ curl --location --request POST 'https://[::]/api/run/123/say' \
--header 'Content-Type: text/plain' \
--data-raw 'World'
Hello World!
Open Standard
→ Construisons l’écosystème
Paranoïd Web Dino · Tech Evangelist
https://talks.m4dz.net/a-taste-of-wasm/fr/ Available under licence CC BY-SA 4.0
m4dz, CC BY-SA 4.0
Courtesy of Unsplash and Pexels contributors
Powered by Reveal.js
Source code available at
https://git.madslab.net/talks