SLIDE 1
Web Assembly
Nick Bray ncbray@google
Web Assembly Nick Bray ncbray@google Setting the stage Native - - PowerPoint PPT Presentation
Web Assembly Nick Bray ncbray@google Setting the stage Native - - PowerPoint PPT Presentation
Web Assembly Nick Bray ncbray@google Setting the stage Native code on the web - today Game engines: Unity / Unreal Languages: repl.it Emulators: Dosbox, JS Linux, NaCl Development Environment PDF Viewing Media decoding Web != native
SLIDE 2
SLIDE 3
Native code on the web - today
Game engines: Unity / Unreal Languages: repl.it Emulators: Dosbox, JS Linux, NaCl Development Environment PDF Viewing Media decoding
SLIDE 4
Web != native
Asynchronous No threads with shared state Inconsistent Performance Porting code to the web is painful!
SLIDE 5
Open Secure Portable Ephemeral
… but the web is awesome
SLIDE 6
In the beginning
HTML (1991) JavaScript (1995) Plugins NPAPI (1995-2015) - PDF documents ActiveX (1996-2015) - “document embedding” Shockwave / Flash (1996-??) - animations Java Applets (1996-??) - applications
SLIDE 7
Let’s try again
JavaScript performance wars (2008) Native Client / Portable Native Client (2008 / 2013) Emscripten / asm.js (2010 / 2013) Web Assembly (2016?)
SLIDE 8
Year Secure Portable Ephemeral Cross Browser Shared Memory JavaScript 1995
✓ ✓ ✓ ✓ x
NPAPI 1995
x x x x ✓
ActiveX 1996
x x x x ✓
Flash 1996
~ ✓ ✓ x x
Java Applets 1996
~ / x ✓ ✓ x ✓
Native Client 2008
✓ ~ ✓ x ✓
Emscripten 2010
✓ ✓ ✓ ✓ x
asm.js 2013
✓ ✓ ✓ ~ x
PNaCl 2013
✓ ✓ ✓ x ✓
Web Assembly 2016 ?
✓ ✓ ✓ ✓ ✓
SLIDE 9
WASM
C sources Compiler WASM binary HTML JavaScript sources Data files Browser DOM JS VM WASM VM
SLIDE 10
… but actually…
C sources Compiler WASM binary HTML JavaScript sources Data files Browser DOM JS+WASM VM
SLIDE 11
const.int32 7 getlocal a add.int32 ● ● call foo ● ●
WASM Ops
foo(a+7, b) getlocal b Note: can statically infer all types
SLIDE 12
WASM prototype vs Minified JS
66% smaller uncompressed 26% smaller compressed 23x faster to parse
Early estimates from Mozilla
SLIDE 13
WASM Memory
address_space_max
Load Store int8 int16 int32 int64 float32 float64 ptr = malloc(100);
100 bytes
Objects
SLIDE 14
WASM FFI
// FFI Interface export int foo(int); import int bar(); // C compiled into WASM int foo(num int) { return num * bar(); // Call into JS } // JavaScript function bar() { return 3; } function run(module) { var instance = WASM.createInstance( module, {bar: bar} ); return instance.foo(7); // Call into WASM }
foo (WASM) run (JS) bar (JS)
bar() return 3 return 21 foo(7)
SLIDE 15
WASM Polyfill
C sources Compiler WASM binary HTML JavaScript sources Data files Browser DOM JS VM Translator asm.js JavaScript sources
SLIDE 16
WASM Pollyfill
function _add($a, $b) { $a = $a | 0; $b = $b | 0; return (HEAP32[$b >> 2] | 0) + (HEAP32[$a >> 2] | 0) | 0; } int add(int *a, int *b) { return *a + *b; } int32 add(int32 a, int32 b) { return(add.int32(load.i32(getlocal(a)), load.i32(getlocal(b)))) }
SLIDE 17
Demo
SLIDE 18
Roadmap
v1.0 (2016?) Single thread w/ event loop. Loads fast, runs fast. v 1.1 (2016?) Threads! Blocking! v1.2+ (2017?) Exceptions, SIMD, dynamic linking, debugging, APIs
SLIDE 19
Questions?
Nick Bray ncbray@google https://github.com/WebAssembly
SLIDE 20
Backup Slides
SLIDE 21
call foo t1 c _
… as opposed the the status quo.
foo(a+7, b) ~ is simplified ~ t0 = 7 t1 = a+t0 foo(t1, c) add.int32 a t0 t1 const.int32 7 t0
SLIDE 22
… but this is really about control flow.
while (a < 10) { a = a + 1; } loop ● block 2 ● ● if ● ● ge.int32 ● ● getlocal a const.int32 10 break 1 setlocal a ● add.int32 ● ● getlocal a const.int32 1
SLIDE 23
… as opposed the the status quo.
add.int32 a t0 a const.int32 1 t0 lt.int32 a t0 t1 const.int32 10 t0 while (a < 10) { a = a + 1; } t1
T F
SLIDE 24
Process
Competing for Address Space
JS Code Array Buffers DOM WASM Memory WASM Code JS Heap