WebAssembly

@ashkyd | ash.ms

Remember when people used to write Javascript?

More sophisticated tools

  • CoffeeScript
  • Babel (ESNext)
  • TypeScript
  • C/C++
  • pretty much anything

JS has become a compile target

General precompiled workflow

  1. write code
  2. compile to JS
  3. run JS in browser

Run in the browser

download script
unzip
parse JS
optimize
compile to machine code
run on CPU

Parse times for a 1MB bundle of JS

parse time for JS is a major bottlenech

Addy Osmani: JavaScript Start-up Performance

Parse times for a 1MB bundle of JS

parse time in JS ramps up rapidly for older, and especially mobile devices

Addy Osmani: JavaScript Start-up Performance

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

WebAssembly precompiled workflow

  1. write code (C, C++, Rust)
  2. compile to wasm
  3. run wasm in browser

Run in the browser

JavascriptWasm
download scriptdownload binary
unzip¯\_(ツ)_/¯
parse JS-
optimize-
compile to machine codecompile to machine code
run on CPUrun on CPU

Key points

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

Oh, and it's fast

sometimes

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

Minimum viable product

  • wasm format
  • modules
  • stack machine
  • no DOM & no APIs
The WebAssembly logo complements the (unofficial) JS logo the metaphor being that JS has all the existing features whereas wasm has the raw power

logo by @carlosbaraza

WebAssembly concepts in code

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

Eventually: <script type='module'>

Data types

Type32 bit64 bit
Integer
Float
strings aren't supported and neither are objects

WebAssembly Memory

  • an ArrayBuffer
  • import & export
  • this is how we share data

So what can we do with it?

  • binary data
  • audio, video, gaming
  • everything else
the original code calls printf

The final product

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

Raw wasm power!

  • data types
  • imports & exports
  • isolated memory

innovation in wheel technology

Random cool stuff

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

and so much more…

Recently

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

All the games

Smooths away those pesky details

demo code should appear here... if not something has gone terribly wrong :o

Smooths away those pesky details

So what can we do today?

  • hack stuff
  • build games
  • migrate existing projects
  • write modules

The future looks like this:

  • spec will evolve
  • the tools will improve
  • many languages for the web

WebAssembly

@ashkyd | ash.ms

Some resources

intro
more info