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!
🤘🤘🤘
wasm for js
By Andrei Cacio
wasm for js
- 1,950