SLIDE 1
In-depth hands-on experience with WebAssembly
Boyan Mihaylov @boyanio boyan.io
https://github.com/boyanio/wasm-class/
@boyanio
with WebAssembly Boyan Mihaylov @boyanio boyan.io - - PowerPoint PPT Presentation
with WebAssembly Boyan Mihaylov @boyanio boyan.io - - PowerPoint PPT Presentation
In-depth hands-on experience with WebAssembly Boyan Mihaylov @boyanio boyan.io https://github.com/boyanio/wasm-class/ @boyanio WebAssembly ( WASM ) is compiler target for programs on the Web @boyanio function add(a, b) { return a + b; }
SLIDE 2
SLIDE 3
WebAssembly (WASM) is compiler target for programs on the Web
@boyanio
SLIDE 4
function add(a, b) { return a + b; }
@boyanio
SLIDE 5
JavaScript performance over the years
1995 2008 2017 Browser wars: the introduction of JIT ? Node.js
@boyanio
SLIDE 6
WebAssembly is a typed language
It supports 32 and 64-bit integers (i32, i64) and floating points (f32, f64)
@boyanio
SLIDE 7
Binary representation (.wasm)
@boyanio
0061 736d 0100 0000 0187 8080 8000 0160 027f 7f01 7f03 8280 8080 0001 0004 8480 8080 0001 7000 0005 8380 8080 0001 0001 0681 8080 8000 0007 9080 8080 0002 066d 656d 6f72 7902 0003 6164 6400 000a 8d80 8080 0001 8780 8080 0000 2001 2000 6a0b
SLIDE 8
Textual representation (.wat)
@boyanio
(module (table 0 anyfunc) (memory $0 1) (export “memory” (memory $0)) (export “add” (func $add)) (func $add (; 0 ;) (param $0 i32) (param $1 i32) (result i32) (i32.add (get_local $1) (get_local $0) ) ) )
SLIDE 9
@boyanio
Parse Compile +
- ptimize
Re-
- ptimize
Execute GC Fetch Decode Compile +
- ptimize
Execute Fetch Execute Fetch / Decode / Compile + optimize (streaming API)
SLIDE 10
WebAssembly provides consistent, predictable performance
@boyanio
SLIDE 11
WebAssembly enables code reusability between native and Web
@boyanio
SLIDE 12
Traditional multi-target compilation
@boyanio
.cpp Source code Windows MAC Linux x86 x64 x86 x64 x86 x64 ARM v8 ARM v7
SLIDE 13
Multi-target compilation with WebAssembly
@boyanio
.cpp Source code .wasm WebAssembly module
SLIDE 14
Where is WebAssembly useful?
@boyanio
Gaming industry Unreal, Unity Multimedia AV1, FLIF, BPG Libraries OpenCV, Box2D, LibSass Platform simulation / emulation DOSBox, MAME, QEMU
SLIDE 15
How to produce WebAssembly
@boyanio
.cpp .wasm .html WASM module HTML page Browser compile load with JavaScript execute Source
SLIDE 16
@boyanio
WasmFiddle
https://wasdk.github.io/WasmFiddle/
SLIDE 17
@boyanio
Open Source LLVM to JavaScript compiler https://kripken.github.io/emscripten-site/
SLIDE 18
emcc index.c –s WASM=1 –o index.js
@boyanio
SLIDE 19
How compilers work
@boyanio
Source program Intermediate Representation (IR) Assembly or machine code Frontend Backend Static analysis Semantic analysis Code generation Code optimization
SLIDE 20
How Emscripten works
@boyanio
C / C++ LLVM IR JavaScript clang Fastcomp (LLVM Backend)
SLIDE 21
asm.js is an extraordinarily optimizable, low-level subset of JavaScript
@boyanio
SLIDE 22
asm.js
@boyanio
function () { “use asm”; function add(a, b) { a = a | 0; b = b | 0; return a + b | 0; } return { add: add }; }
SLIDE 23
asm.js performance
@boyanio http://kripken.github.io/mloc_emscripten_talk/#/28
SLIDE 24
WebAssembly = asm.js done right
@boyanio
SLIDE 25
From asm.js to WebAssembly
@boyanio
C / C++ LLVM IR asm.js clang Fastcomp WASM asm2wasm
SLIDE 26
New WebAssembly Backend (unstable)
@boyanio
C / C++ LLVM IR WASM clang LLVM WASM Backend
SLIDE 27
The distributable, loadable, and executable unit of code in WebAssembly is called a module.
@boyanio https://github.com/WebAssembly/design/blob/master/Modules.md https://github.com/WebAssembly/design/blob/master/Modules.md
SLIDE 28
Module imports & exports
@boyanio
const imports = { “name”: { “first”: “Anna”, “last”: “Nanna” }, “print”: function (what) { console.log(what); } }; const exports = module.exports; exports.printName(); exports.reverseName();
SLIDE 29
Linear memory
@boyanio
1 2 3 4 5
00010011
6
00100100
7
10011100
8
11100011
9
00101111
10
00010000
11
01001110
12 13 14 15 16 17 18 19 1 2 3 4 5 6 const imports = { “env”: { “memory”: new WebAssembly.Memory({ initial: 10, maximum: 100}), … } };
SLIDE 30
Linear memory
@boyanio
1 2 3 4 5
00010011
6
00100100
7
10011100
8
11100011
9
00101111
10
00010000
11
01001110
12 13 14 15 16 17 18 19 1 2 3 4 5 6 What WebAssembly sees What JavaScript sees
SLIDE 31
Loading WebAssembly
@boyanio
fetch(‘app.wasm’) .then(result => result.arrayBuffer()) .then(buffer => WebAssembly.instantiate(buffer, imports)) .then(({ module, instance }) => { instance.exports.main(); }); // Traditional approach WebAssembly.instantiateStreaming(fetch(‘app.wasm’), imports) .then(({ module, instance }) => { instance.exports.main(); }); // Using the streaming API
SLIDE 32
How secure is WebAssembly?
@boyanio
SLIDE 33
WebAssembly runs in a memory-safe sandboxed environment
@boyanio
SLIDE 34
@boyanio
VM JavaScript WebAssembly GC Compiler … APIs Rendering DOM + CSSOM WebGL WebSockets WebAudio IndexedDB Service Workers … Resource <script> HTML, CSS, SVG, … Audio Storage Network Graphics … Sandbox, Same-origin policy, …
SLIDE 35
@boyanio http://caniuse.com/#search=WebAssembly
SLIDE 36
What about browsers not supporting WebAssembly?
Fallback to asm.js
@boyanio
SLIDE 37
From version 1.0 to next
@boyanio
SLIDE 38
Direct access to WebAPIs
today everything goes through JavaScript
@boyanio
SLIDE 39
Integration with browser’s garbage collection
for better interop with JavaScript & WebAPIs
@boyanio
SLIDE 40
Multi-threading ???
low-level buildings blocks for shared memory between threads, atomics and futexes
@boyanio
SLIDE 41
@boyanio
What languages can be compiled to WebAssembly?
https://boyan.io/wasm-wheel/