A Taste Of WASM

WebAssembly is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

WASM Binary Format

0200 20 00
0202 42 00
0204 51
0205 04 7e
0207 42 01
020A 05
020B 20 00
020D 20 00
0210 42 01
0211 7d
0212 10 00
0214 7e
0217 0b

Is this a… language?

WASM Text Format

get_local 0
i64.const 0
i64.eq
if i64
    i64.const 1
else
    get_local 0
    get_local 0
    i64.const 1
    i64.sub
    call 0
    i64.mul
end

WASM Rust Hello World, Web version

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

Why Rust?

• C++, thanks, but I only have one brain
• No data-race by design
• Static types
• Iterators
• Excellent Memory Management
• Community 😍
• Toolchain (Rustup, Cargo, Rustc…)
• And much more… 👍

The Security Model

• Sandboxed Environment per Module
• Deterministic Execution
• Control-Flow Integrity
• Type Signature check for Indirect Calls
• Memory Safety

• The WebAssembly Security Model
• The Bytecode Alliance
• WebAssembly security: potentials and pitfalls
• Security Chasms of WASM

Browser-side: Instantiate

let importObject = {
    imports: {
        alert: window.alert
    }
}

WebAssembly
    .instantiateStreaming(fetch('my-module.wasm'), importObject)
    .then(mod => mod.instance.exports.greet('Hello World'))

const pointer = 0

const LM = new WebAssembly.Memory({ initial: 1 })
const sharedMem = new Uint8Array(LM.buffer)

const str = "Hello World"

[].forEach.call(
  btoa(str),
  (char, idx) => sharedMem[pointer + idx] = char.charCodeAt(0)
)
// Uint8Array(65536) [ 83, 71, 86, 115, 98, 71, 56, 103, 86, 50, … ]

wasm-pack

📦✨ your favorite rust -> wasm workflow tool!

Easy to use

$ cd my-module
$ wasm-pack build --target web --release

Ready to publish

$ tree
├── bridge.js
├── Cargo.toml
├── pkg
│   ├── my-module_bg.d.ts
│   ├── my-module_bg.wasm
│   ├── my-module.d.ts
│   ├── my-module.js
│   ├── package.json
│   └── snippets
│       └── my-module-91b01578bc1ce6c0
│           └── bridge.js
└── src
    └── lib.rs

wasm-bindgen

Facilitating high-level interactions between wasm modules and JavaScript.

• wasm-bindgen book

• High-level library
• Exposes:
  • Web sys (DOM, window, document, fetch, canvas…)
  • JS sys (passing values, types, boxing…)
  • Promises
• Generate TypeScript bindings

use wasm_bindgen::prelude::*;

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

#[wasm_bindgen(module = "/bindings.js")]
extern "C" {
    fn updateState(state: &JsValue);
}

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

    let state = State { name }
    updateState(JsValue::from_serde(&state).unwrap());
}

Embind

Embind is used to bind C++ functions and classes to JavaScript, so that the compiled code can be used in a natural way by JavaScript.

$ wasmer run cowsay.wasm Hello World!
 ________________
< Hello World! >
 ----------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
               ||----w |
                ||     ||

• Wasmtime
• Wasmer

Production-Proof

Coming from JS? Try AssemblyScript.

AssemblyScript compiles a strict variant of TypeScript to WebAssembly using Binaryen.

export function fib(n: i32): i32 {
  var a = 0, b = 1
  if (n > 0) {
    while (--n) {
      let t = a + b
      a = b
      b = t
    }
    return b
  }
  return a
}

Coming from OS language?
Check LLVM support.

• C / C++
• Rust
• C#
• GO + TinyGO + syscall/js
• Java

Comming Soon

• Multi-threading
• JS Modules exchange/Garbage Collector
• Portability/Runtime/IoT

• WebAssembly’s post-MVP future: A cartoon skill tree