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?

C++

C++

C++

C++

app.wasm

Think of it as an ES Module

app.wasm

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!'

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