The story of Distil
a bumpy journey
Hi there!
Andrei Cacio
What is Distil?
-
I wanted to learn Rust
-
I wanted to learn about WebAssembly
What is Distil?
an open source library for color palette extraction written in Rust
The purpose of this talk
- How I managed to take an open-source library written in Rust and run it in the Browser
- 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?
It is considered a stable technology
current version: 1.0
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?
Rust
Rust
Rust
Tooling (Compiler)
Rust
app.wasm
Think of it as an ES Module
app.wasm
import fn1, fn2 ...
export data1, data2
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
Don't leave, things will get better
So... what about Rust?
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 active development
![](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!
🤘🤘🤘
The story of Distil
By Andrei Cacio
The story of Distil
- 1,050