WASM?

AWSM!

AOT?

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)

... ein kleines, striktes Subset von JavaScript das nur while, if, Zahlen und Toplevel-Funktionen erlaubt.

[...] es erlaubt keine, Strings, Closurs oder irgendwas was den heap braucht. mdn

asm.js Beispiel

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 

Wir kompilieren jetzt also native Sprachen nach JavaScript das mehr wie C aussieht, damit es
die JavaScript Engine im Browser JITen kann

Limitationen von asm.js

• es ist nicht Assembly!
• es ist JavaScript!
• 🧐
• immernoch JavaScript Syntax
• großer Download
• Optimierungen unterscheiden sich
• aber einfacher zu JITen 🤷🏽‍♂️

konsequenter als asm.js

1. kleinerer download
2. einfacher zu parsen
3. echtes assembly
4. immernoch in der Javascript VM
5. 🏎️ noch schneller

#direkteinspritzung

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.

Aber ist das nicht einfach nur wieder der gleiche Scheiß wie JavaApplets oder Flash?

• es ist nicht von Firmen geownet
• es ist ein Teil des Browsers
• keine plugins, keine extra Angriffsfläche
• Sandboxed genau wie JavaScript
• Standard, ergo ein Teil des Webs

kudos steve klabnik

Was nu?

🤔 was macht man damit?

... alles was das Web halt kann!

DOM Apis, WebGL, WebAudio, Canvas, alles was ne Javascript Api hat 🤷🏼‍♀️

Und wer macht das schon?

• fastlys lucet
• Cloudflare Workers
• Etherium
• mozillas source-map library
• web.autocad.com
• Unity Web Target
• Qt for WebAssembly
• um flash zu transpilen 🤯
• read on my dear: wasmrocks wasm weekly wikipedia

web-dsp

rnnoise^*

_{*here asm.js}

picovoice

😁 Lets start Hacking🔨

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

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

artisan WebAssembly

«WAT»

(module
  (func $i (import "imports" "i") (param i32))
  (func (export "e")
    i32.const 42
    call $i))

exposing a c-like interface

#[no_mangle]
pub fn add(a: i32, b: i32) -> i32 {
    a + b + 100
}

// import { add } from 'rust-lib.wasm';
const { add } = await fetch('rust-lib.wasm')
    .then(response => response.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(result => result.instance.exports);

console.dir(add(1,2)); // → 103

FFI safety

const importObject = { env: {
    logger_num: (num) => console.info('logger_num', num),
    logger_str: (str) => console.warn('logger_str', str),
}}

extern "C" {
    fn logger_num(output: i32);
    fn logger_str(output: &str);
}

#[no_mangle]
pub unsafe fn speak() {
    logger_num(42); // 42
    logger_str("42"); // 1048576 ????
}

codegen to the rescue

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_bindgen]
pub fn left_pad(content: &str, width: usize) -> String {
    format!("{:👾>w$}", content, w = width)
}

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
• WASMER, wasmtime, lucet, nodejs...
• CloudABI @ 32c3 WASI ( overview )