![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/5523843/pasted-from-clipboard.png)
Demystifying WebAssembly
and how to get started
Hi there!
I do JavaScript at
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/4713542/hqdefault.jpg)
I also contribute to
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/5500130/jsheroes2.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/5505850/pasted-from-clipboard.png)
Your classic JavaScript engine representation
Why the need?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/5505855/pasted-from-clipboard.png)
Where do you even start?
![](https://media2.giphy.com/media/lvzdeWk12qjmM/giphy.gif)
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
![](https://media1.giphy.com/media/8OlT82jKm6Ugg/giphy.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/5512414/pasted-from-clipboard.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/5512427/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/5517870/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/164793/images/4646356/JavaScript-logo.png)
- create-wasm-app
- npm
- webpack4
Demo already!
![](https://media2.giphy.com/media/87kMRGS5WabzG/giphy.gif)
Thank you!
You guys are awesome!
🤘🤘🤘
wasm for js
By Andrei Cacio
wasm for js
- 1,833