WebAssembly

@ashkyd | ash.ms

WebAssembly (or wasm) is a new portable, size- and load-time-efficient format suitable for compilation to the web.
webassembly.org

What is it?

  • wasm is not a language
  • binary format/bytecode
  • runs in the wasm stack machine
  • a compile target

Comparison

(you don't have to understand this)

C++ Binary Text
int factorial(int n) {
  if (n == 0)
    return 1;
  else
    return n * factorial(n-1);
}
20 00
42 00
51
04 7e
42 01
05
20 00
20 00
42 01
7d
10 00
7e
0b
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
understanding wasm text format

y tho?

  • fast
  • efficient
  • think 🎮 & 📱
  • limitless use cases

Some history

emscripten

compiles C and C++ into JavaScript

port everything to the browser!

Random cool stuff

  • Unity, Unreal & other game engines
  • languages: lua, python, ruby, perl
  • sqlite, qemu, ffmpeg

and so much more…

Recently

  • Internet Archive
  • play old games!
  • MAME & DOSBox
  • all emscripten

All the games

Javascript is slow 😢

  • asm.js
  • a subset of JavaScript
  • ahead-of-time compiling engine optimizes code
  • still sllowwww 😭

Enter WebAssembly

  • iteration on everything we've learned
  • same toolchain
  • asm.js is the polyfill1
  • all this cool stuff is coming to wasm :tada:

How it works

  • compile code (c, c++, rust etc) → .wasm
  • load up your module
  • reach for the stars! 🚀

Compile code

C

emcc main.c -s WASM=1 -o out.html

Rust

rustc --target=wasm32-unknown-emscripten main.rs -o out.html

Emscripten demo!

  • wasm runs natively
  • debugging support
  • emscripten creates lots of boilerplate

Compiler Output

Note that the .wasm file is not standalone - it's not easy to manually run it without that .js code, as it depends on imports that integrate with JS.

- emscripten wiki

WebAssembly API

fetch('program.wasm')
  .then( response   => response.arrayBuffer() )
  .then( bytes      => WebAssembly.compile(bytes) )
  .then( wasmModule => WebAssembly.instantiate(wasmModule, {
    env: { printf: console.log }
  }) )
  .then( results    => results.exports.main() );

Eventually: <script type='module'> or ES6 imports

WASM loading demo!

Let's use the wasm explorer to make some more sensible wasm

  • symbiotic with JS
  • importObject provides JS objects to wasm code
  • non-numeric types must be implemented manually
  • probably stick with emscripten for now

Memory

  • resizeable ArrayBuffer
  • access it from both JS & wasm
  • the only way you can pass around complex data types

Real world

i don't know what I'm doing

by user Mkamale90 under the Creative Commons Attribution-Share Alike 3.0 Unported license

tldr: the tooling isn't good enough for everyday use

But…

I don't expect it to take long

Prime use case

WebDSP is a collection of algorithms designed to be building blocks for web appslications that operate on media data.

The methods are written in C++ and compiled to WASM, and exposed as simple vanilla Javascript functions developers can run on the client side.

web dsp

Debugging

  • devtools
  • wasm text representation — no sourcemaps

Security

  • Sandbox
  • Same origin policy
  • Control flow integrity
  • Memory safety

webassembly.org/docs/security

Browser Support

BrowserVersion
Firefox
desktop & mobile
52
march 28
Chrome
desktop & mobile
57
march 29
Opera44
Safari⛔
Edge⛔

Photo: Tim Green

(a glimpse of) the future

  • :scream: sourcemaps
  • 👷 improved tooling
  • 🚮 garbage collection
  • 🏗️ DOM access & web API integration
  • ✨ support for JS data types (strings, objects)

wasm future features

Conclusion

❌ probably too early for greenfields

✔ good for porting stuff

👍 go hack stuff!

WebAssembly

@ashkyd | ash.ms