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
Asynchronous

No threads with shared state

Inconsistent Performance

Porting code to the web is painful!

… but the web is awesome

Open
Secure
Portable
Ephemeral
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

Let’s try again
JavaScript performance wars (2008)

Native Client / Portable Native Client (2008 / 2013)

Emscripten / asm.js (2010 / 2013)

Web Assembly (2016?)

 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 ? ✓ ✓ ✓ ✓ ✓

WASM
Browser
HTML

DOM

JavaScript
sources JS VM

WASM binary WASM VM

C sources Compiler

Data files
… but actually…
Browser
HTML

DOM

JavaScript
sources

JS+WASM VM

WASM binary
C sources Compiler

Data files
WASM Ops
foo(a+7, b) getlocal a

add.int32 ● ●

const.int32 7

call foo ● ●

getlocal b

Note: can statically infer all types

WASM prototype vs Minified JS

66% smaller uncompressed

26% smaller compressed

23x faster to parse

Early estimates from Mozilla

WASM Memory
0

ptr = malloc(100);

100 bytes

Load
int8
int16
int32
int64
float32 Store
float64 Objects

address_space_max
WASM FFI
// FFI Interface run (JS) foo (WASM) bar (JS)
export int foo(int);
import int bar();
foo(7)
// C compiled into WASM
int foo(num int) {
return num * bar(); // Call into JS bar()
}

return 3
// JavaScript
function bar() {
return 3;
} return 21

function run(module) {
var instance = WASM.createInstance(
module,
{bar: bar}
);
return instance.foo(7); // Call into WASM
}
WASM Polyfill
Browser
HTML
C sources Compiler
DOM

WASM binary JavaScript

sources

JS VM
asm.js
JavaScript
Translator
sources

Data files
WASM Pollyfill

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

function _add($a, $b) {

$a = $a | 0;
$b = $b | 0;
return (HEAP32[$b >> 2] | 0) + (HEAP32[$a >> 2] | 0) | 0;
}
Demo
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

Questions?
Nick Bray
ncbray@google

https://github.com/WebAssembly
Backup Slides
… as opposed the the status quo.
foo(a+7, b)
const.int32 7 t0
~ is simplified ~
add.int32 a t0 t1
t0 = 7
t1 = a+t0 call foo t1 c _
foo(t1, c)
… but this is really about control flow.
while (a < 10) {
a = a + 1;
} getlocal a

ge.int32 ● ●

const.int32 10
if ● ●

loop ● block 2 ● ● break 1

getlocal a
setlocal a ● add.int32 ● ●

const.int32 1
… as opposed the the status quo.
while (a < 10) {
a = a + 1;
} const.int32 10 t0

lt.int32 a t0 t1

F
t1

const.int32 1 t0

add.int32 a t0 a
Competing for Address Space
Process

DOM

JS
Code
JS
Heap
Array
Buffers
WASM
Code
WASM
Memory