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?
Your classic JavaScript engine representation
Why the need?
Where do you even start?
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
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
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!
