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!

Thank you!

You guys are awesome!
🤘🤘🤘

The story of Distil

By Andrei Cacio

The story of Distil

  • 61
Loading comments...

More from Andrei Cacio