Demystifying WebAssembly

and how to get started

Hi there!

I do JavaScript at

I also contribute to 

Andrei Cacio

The purpose of this talk

  • A smooth introduction into WebAssembly from a JavaScript developer to JavaScript developers
  • Entering the low-level realm can be a bumpy ride
  • A point to start

What is WebAssembly?

WebAssembly is a compilation target for "lower level" languages like: C/C++/Rust (and others).

 

This means that we can compile non-JS programs and run them in the browser.

What is WebAssembly?

👶MVP👶

Why the need?

Your classic JavaScript engine representation

Why the need?

Where do you even start?

Where do you even start?

C++

C++

C++

Tooling  (Compiler)

C++

app.wasm

Think of it as an ES Module

app.wasm

import fn1, fn2 ...

export data1, data2

What happens in the browser?

app.wasm

Browser

GET

buff: ArrayBuffer()

WebAssembly.instantiateStreaming(fetch('app.wasm'), {})

WebAssembly.instantiate(buff, {})

buff: ArrayBuffer()

WebAssembly

.Module(buff)

WebAssembly

.Instance(buff, {})

WebAssembly data types

  • i32: 32-bit integer
  • i64: 64-bit integer
  • f32: 32-bit floating point
  • f64: 64-bit floating point

 

What about... everything else?

app.wasm

import fn1, fn2 ...

export data1, data2

JS

const someData = {};

const someOtherData = {};

Array (ish) (Linear Memory)

Transporting a String

'Hello World!'

[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100, 33]

72

101

108

...

Linear Memory

Tooling

Pros:

  •  battle tested

Cons:

  • steep learning curve
  • overwhelming docs
  • setting up everything can be awkward
  • low level js glue code

Don't leave, things will get better

Let's give Rust a shot

Tooling

Pros:

  • no extra tooling, just the Rust compiler
  • wasm-bindgen: a more high level approach of JS ⇔ wasm interaction
  • easy setup
  • https://github.com/rustwasm
  • more "smarter" js glue code

Cons:

  • bleeding edge-ish, still under development (need Rust beta)

Rust's Ecosystem

rustup -> Similar to npm's NVM, it is a way to simply switch between Rust versions

 

cargo -> Similar to npm, cargo is the official package manager for Rust

 

rustc -> Rust's compiler

Rust + Wasm Ecosystem

  • cargo-generate
  • wasm-bindgen
  • wasm-pack
  • create-wasm-app
  • npm
  • webpack4

Demo already!

Thank you!

You guys are awesome!
🤘🤘🤘