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?




Tooling  (Compiler)



Think of it as an ES Module


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?


import fn1, fn2 ...

export data1, data2


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]





Linear Memory

Don't leave, things will get better

So... what about Rust?



  • no extra tooling, just the Rust compiler
  • wasm-bindgen: a more high level approach of JS ⇔ wasm interaction
  • easy setup
  • more "smarter" js glue code


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

Thank you!

You guys are awesome!