WebAssembly for the rest of us - Jan-Erik Rediger - Codemotion Amsterdam 2017

WebAssembly for the rest of us
Mozilla Dev Roadshow, Düsseldorf
Jan-Erik Rediger — @badboy_ | 2017-05-14

Amsterdam 16 - 17 May
2017
{ WebAssembly for the rest of us
Jan-Erik Rediger — @badboy_

Jan-Erik Rediger
@badboy_
Organizer
Work / Tech Speaker

What is WebAssembly?
Binary executable format for the web
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 01 6d 0b

General purpose virtual architecture
get_local $0
i32.const 2
i32.add
i32.const 42
i32.eq
return

Compiler target
Compiler

Open standard

What is WebAssembly not?
Replacement for JavaScript

Programming Language

Programming Language
A good target for every dynamic language

Type Annotations in JavaScript
function add(x, y) {
return (x + y);
}

Type Annotations in JavaScript
function add(x, y) {
* x = x|0; // <- parameter type annotation
y = y|0;
* return (x + y) | 0;
} // ^- return type annotation

Linear memory access
from "Introduction to WebAssembly" by Rasmus Andersson

size_t strlen(char *ptr) {
char *curr = ptr;
while (*curr != 0) {
curr++;
}
return (curr - ptr);
}

function strlen(ptr) {
ptr = ptr|0;
var curr = 0;
curr = ptr;
while (HEAP8[curr]|0 != 0) {
curr = (curr + 1)|0;
}
return (curr - ptr)|0;
}

function strlen(ptr) {
ptr = ptr|0;
var curr = 0;
curr = ptr;
* while (HEAP8[curr]|0 != 0) {
curr = (curr + 1)|0;
}
return (curr - ptr)|0;
}

Pros:
"It's just JavaScript"
It's fast
Why not use asm.js?

Pros:
"It's just JavaScript"
It's fast
Cons:
Informal spec
No speed guarantuees
Hard to extend
No 64-bit integers
Why not use asm.js?

Why WebAssembly?
Smaller than asm.js

Why WebAssembly?
Smaller than asm.js
Faster parsing

Why WebAssembly?
Smaller than asm.js
Faster parsing
Freedom to extend

Why WebAssembly?
Smaller than asm.js
Faster parsing
Freedom to extend
Formal specification

Use cases
Game Engines {
Multimedia
Performance
Libraries
64-bit math
Tanks Demo
Zen Garden

Use cases
Game Engines
Multimedia {
Performance
Libraries
64-bit math
Image/Video editing
Image recognition
Live video augmentation
CAD applications

Use cases
Game Engines
Multimedia
Performance {
Libraries
64-bit math
Password store
Encryption
Compression
Platform simulation

Use cases
Game Engines
Multimedia
Performance
Libraries {
64-bit math
OpenCV
Box2D
LibSass
DICOM (Medical Image File
Format)

Use cases
Game Engines
Multimedia
Performance
Libraries
64-bit math {
MAME
SHA512
Physic calculations

How to use it
Use the compiler!
Compiler

open source LLVM-based compiler from C and C++* to JavaScript
* and Rust

open source LLVM-based compiler from C and C++* to asm.js
* and Rust

open source LLVM-based compiler from C and C++* to WebAssembly
* and Rust

Some C code
int half(int x)
{
return x / 2;
}

Compile it
clang -O3
-c half.c -o half.o

Compile it
emcc -O3
-s WASM=1 -s SIDE_MODULE=1
half.c -o half.wasm

Wasm (binary representation)
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 01 6d 0b
|.asm...........`|
|................|
|...p............|
|..............me|
|mory...half.....|
|.......... .A.m.|

Wasm (binary representation)
00 61 73 6d 01 00 00 00 01 86 80 80 80 00 01 60
01 7f 01 7f 03 82 80 80 80 00 01 00 04 84 80 80
80 00 01 70 00 00 05 83 80 80 80 00 01 00 01 06
81 80 80 80 00 00 07 91 80 80 80 00 02 06 6d 65
6d 6f 72 79 02 00 04 68 61 6c 66 00 00 0a 8d 80
80 80 00 01 87 80 80 80 00 00 20 00 41 02 6d 0b
|.asm...........`|
|................|
|...p............|
|..............me|
|mory...half.....|
|.......... .A.m.|

Wast (text representation)
(module
(table 0 anyfunc)
(memory $0 1)
(export "memory" (memory $0))
(export "half" (func $half))
(func $half (param $0 i32) (result i32)
(i32.div_s
(get_local $0)
(i32.const 2)
)
)
)

(module
* (table 0 anyfunc)
* (memory $0 1)
* (export "memory" (memory $0))
* (export "half" (func $half))
(i32.div_s
(get_local $0)
(i32.const 2)
)
)
)

(module
(table 0 anyfunc)
(memory $0 1)
* (export "half" (func $half))
(i32.div_s
(get_local $0)
(i32.const 2)
)
)
)

(module
(table 0 anyfunc)
(memory $0 1)
(export "half" (func $half))
* (i32.div_s
* (get_local $0)
* (i32.const 2)
)
)
)

JavaScript API
fetch('half.wasm')
.then(data => data.arrayBuffer())
.then(buf => WebAssembly.compile(buf))
.then(mod => WebAssembly.instantiate(mod))
.then(ins => alert(ins.exports.half(128)))
Run code

Available in Rust!
rustup target add wasm32-unknown-emscripten
cargo build --target wasm32-unknown-emscripten
Check out hellorust.com/wasm

WebAssembly's future
Threads
SIMD

Threads
SIMD
Feature-testing

Threads
SIMD
Feature-testing
GC/DOM/Web API integration

{ If you're a Native developer,
the Web is just a compiler
target away.
by @callahad

{ If you're a Web developer,
you can leverage the
enormous world of native
libraries.
by @callahad

{ Both worlds have to learn
from each other to make the
most of this.
by @callahad

Want to know more?
Want to help?
webassembly.org

Want to play around using Rust?
hellorust.com/wasm

Amsterdam 16 - 17 May
2017
{ Thank you!
Jan-Erik Rediger — @badboy_

Sources & Credit
Code File: Pham Thi Dieu Linh, The Noun Project, CC BY 3.0
Gears: Gregor Cresnar, The Noun Project, CC BY 3.0
Linear Memory: Introduction to WebAssembly
Last quotes: @callahad

WebAssembly for the rest of us - Jan-Erik Rediger - Codemotion Amsterdam 2017

More Related Content

Similar to WebAssembly for the rest of us - Jan-Erik Rediger - Codemotion Amsterdam 2017 (20)

More from Codemotion (20)

Recently uploaded (20)

WebAssembly for the rest of us - Jan-Erik Rediger - Codemotion Amsterdam 2017