WebAssembly

What is it?

What is it good for?

doing less

simplified JavaScript: asm.js

... can be used as a low-level,
efficient target language for compilers.

The asm.js language provides an abstraction similar to the C/C++ virtual machine: a large binary heap with efficient loads and stores, integer and floating-point arithmetic, first-order function definitions, and function pointers.

asm.js spec (faq)

... a small, strict subset of JavaScript that only allows things like `while`, `if`, numbers and top level functions.

[...] It does not allow objects, strings, closures, and basically anything that requires heap allocation. mdn

asm.js example

function MyAsmModule(stdlib, foreign, heap) {
    "use asm";
    // module body...
    return {
        export1: f1,
        // ...
    };
}

function add1(x) {
    x = x|0; // x : int
    return (x+1)|0;
}

var heap = new ArrayBuffer(0x10000);          // 64k heap 

so we're compiling some native language to JavaScript that looks something like C so that
the JavaScript Engine can compile it in the Browser

limitations of asm.js

• it is not assembly
• but it is JavaScript
• 🧐
• still JavaScript syntax
• still have to parse
• larger download size
• optimizations vary
• but easier to JIT 🤷🏽‍♂️

consequent step

after asm.js

1. smaller download size
2. easier to parse
3. real assembly
4. similar vm model
5. even faster

Performance vs ...

WASM vs JavaScript

WASM vs asm.js

Mind the Gap

WASM vs Native

...of the 24 benchmarks evaluated, seven run within 10% of native execution and almost all of them run less than 2× slower.

Isn't WASM just like JavaApplets or Flash? no

• it's part of the browser
• no plugins, no extra attack surface
• sandboxed just like JavaScript
• not owned by other companies like Flash or Java
• standard, ergo part of "the web"

kudos steve klabnik

and now?

🤔 what can we do with it?

... everything the Web has to offer

including DOM Apis, WebGL, WebAudio, Canvas, everything you can access from JavaScript

what can we not do with it?

⏳ not yet

SIMD^{* 🐦}

threads^**

x64 binaries

🚫 not ever

everything you couldn't do^* in JavaScript

udp^*

syscalls: fs, clock, etc^*

more precise timers^*

use cases

Web, Binary

Binary protocols, parsers

Audio^*/Video/Image Processing

Cryptography

Computer vision

Emulation: e.g. Gameboy or x86

Web, High Performance

CAD, Science, Games

Low latency apps: VR

As a VM

wasmjit or wasmer

CloudABI

in the ☁️Cloud

on cloudflare workers

in AWS Lambda^*

More

even moar

🏘🐘 Port your Desktop code to the Web

Where is it already used?

• 🤷🏼‍♀️ you might be using WebAssembly right now 🐦
• mozillas source-map library
• web.autocad.com
• Unity Web Target
• Qt for WebAssembly
• Etherium
• fastlylabs terrarium
• zoom.us (instead of WebRTC)

web-dsp

rnnoise^*

_{*here asm.js}

picovoice

Conclusion

• WebAssembly is a new Powerful tool
• it's a Standard (unlike asm.js, Flash, JavaApplets or NaCL)
• it's a compliment to JavaScript
• it's still a browser, you will get better performance but no new capabilities
• Everybody is doing it
• it's not just for the Web (see e.g. CloudABI)

😁 Lets start Hacking🔨

👨‍💻👩‍💻👨🏾‍💻👨🏽‍💻👩🏽‍💻👨🏼‍💻👨🏿‍💻

👨🏿‍💻👩🏿‍💻👩🏼‍💻🙋🏻‍♂️👨🏻‍💻👩🏻‍💻👩🏾‍💻

rustwasm toolbox^*

• wasm-bindgen
• web-sys & js-sys
• wasm-pack
• twiggy,^* wee_alloc,^* wasm-snip,^*
@fixgen and @ag_dubs

wasm-bindgen^📕

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

wasm-bindgen: exporting classes

#[wasm_bindgen]
pub struct Person {
    name: String, // UTF-8
}

#[wasm_bindgen]
impl Person {
    #[wasm_bindgen(constructor)]
    pub fn new(name: String) -> Person {
        Self { name }
    }

    pub fn get_name(&self) -> String {
        self.name.to_owned()
    }
}

import { Foo } from './my_module';
const p = new Person('hendrik');
console.log(p.get_name());

web-sys^📕 / js-sys^📕

#[wasm_bindgen(start)]
pub fn run() -> Result<(), JsValue> {
    let window = web_sys::window().unwrap();
    let document = window.document().unwrap();
    let body = document.body().unwrap();

    let val = document.create_element("p")?;
    val.set_inner_html("Hello from Rust!");

    body.append_child(&val)?;

    Ok(())
}

wasm-pack^📕

AWSM-Gorillas

STOP! Demo Time

binary sizes

binaryen🔗

wasm-opt

wabt🔗

wasm-strip

rust wasm

wee_alloc

twiggy wasm size profiler

wasm-snip replace functions with unreachable

WebAssembly for Isolation

• UNIX is unsafe
• Binaries can open Files and NetworkSockets themselves
• VMs or Docker?
• JavaScript/wasm isolation model
• CloudABI
• WASMER
• CloudABI @ 32c3