+ - 0:00:00
Notes for current slide
Notes for next slide

wasm+rust

From Rust to Webpack: WebAssembly Tooling

Ashley Williams, @ag_dubs

1 / 26

Agenda

  • Overview
  • A Brief Intro to Rust
  • Writing A RustWASM Crate
  • wasm-bindgen
  • wasm-pack
  • Hello WASM! website
2 / 26

Overview

How does a piece of Rust code end up as code that can be consumed by the browser?

rustwasm pipeline

Lin Clark. https://hacks.mozilla.org/2018/03/making-webassembly-better-for-rust-for-all-languages/

3 / 26

Overview

  • Code is written in Rust
  • Rust is compiled to a WASM target
  • wasm-bindgen translates Rust function signatures to WASM
  • wasm-pack packages the compiled code for npm
  • webpack bundles the code for the browser
4 / 26

Overview

WASM is not trying to replace JS

rust loves js

Our goal is that WebAssembly work seamlessly with JS in workflows that developers already use

5 / 26

A Brief Intro to Rust

Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

rustwasm pipeline https://www.rust-lang.org

6 / 26

A Brief Intro to Rust

Rust is ? ???????? ?????? ?????? ????? ???? ?????? ?????? ???? ????????? ?????? ??????????? ??????? ?????? ?????? ??????????

rustwasm pipeline https://www.rust-lang.org

7 / 26

A Brief Intro to Rust

Rust is a systems programming language designed to empower developers of all kinds to write fast, safe code.

rustwasm pipeline

8 / 26

A Brief Intro to Rust

Tools

- rustup: a version manager and toolchain installer

- cargo: a package manager, build tool, test runner, and documentation generator

9 / 26

A Brief Intro to Rust

Setting up a Project

There are 2 types of projects: library and binary.

cargo new will create a skeleton project setup for you.

  1. cd to a directory where you like to store code
  2. cargo new hello-wasm --bin
  3. cd hello-wasm
10 / 26

A Brief Intro to Rust

Files created

  • Cargo.toml: metadata about your project and its dependencies
  • .gitignore: ignores compiled files built by Rust
  • src/main.rs: where your Rust code goes
11 / 26

A Brief Intro to Rust

Cargo.toml

This file contains metadata about your project as well as all the information about its dependencies. It's like a package.json.

[package]
name = "hello-wasm"
description = "a crate to learn about wasm"
version = "0.1.0"
authors = ["Ashley Williams <ashley666ashley@gmail.com>"]
license = "WTFPL"
repository = "https://github.com/ashleygwilliams/hello-wasm"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.1.0"
12 / 26

A Brief Intro to Rust

src/main.rs

fn main() {
println!("Hello, Rust!");
}

Every binary Rust application must have a main function.

To run this, type:

cargo run

13 / 26

A Brief Intro to Rust

Types

Rust is strongly, statically typed. Common fundamental types are:

  • u32: unsigned 32-bit integer
  • i32: signed 32-bit integer
  • f64: floating point number
  • String and/or &str: strings
  • bool: a boolean
14 / 26

A Brief Intro to Rust

A Tale of Two Strings

Strings are actually quite complicated! Dynamic languages hide this, but sadly Rust doesn't. In the beginning strings in Rust can feel difficult :(

String

  • Full featured with convenience methods
  • Can create with either:
    • something.to_string() OR String::from("string slice")

&str

  • Pronounced "and stir" or "string slice"
  • Hardcoded strings are &strs
15 / 26

A Brief Intro to Rust

Variables

let name = "ashley";
let age = 30;
println!("Hi, {}! You are {} years old.", name, age);

Mutability

Variables are immutable by default in Rust.

let name = "ashley";
let mut age = 30;
age += 1;
println!("Hi, {}! You are ACTUALLY {} years old.", name, age);
16 / 26

A Brief Intro to Rust

Functions

// In Rust:
fn greet(name: &str) -> String {
format!("Hello {}!", name)
}
fn main() {
println!(greet("Rust"));
}
// In JavaScript:
function greet(name) {
return `Hello ${name}!`
}
console.log(greet("Rust"))
17 / 26

A Brief Intro to Rust

Dependencies

  1. Add the dependency to your Cargo.toml.
  2. Add extern crate mydep; to your main.rs or lib.rs.
  3. Optionally, add use::mydep to bring the deps exports into namespace.
18 / 26

A Brief Intro to Rust

API Documentation

https://doc.rust-lang.org/

19 / 26

Writing A RustWASM Crate

Let's code together!

View the code for this exercise here

20 / 26

wasm-bindgen

JavaScript has all sorts of objects!

But WASM only has Integers and Floating Point Numbers.

21 / 26

wasm-bindgen

Enable WASM to pass objects to JavaScript.

cargo install wasm-bindgen

github repo

wasm-bindgen

Lin Clark. https://hacks.mozilla.org/2018/03/making-webassembly-better-for-rust-for-all-languages/

22 / 26

wasm-pack

Compile and package your WASM package for npm.

cargo install wasm-pack

github repo

wasm-pack

Lin Clark. https://hacks.mozilla.org/2018/03/making-webassembly-better-for-rust-for-all-languages/

23 / 26

wasm-pack

wasm-pack tutorial

Comment on the PR here!

24 / 26

Hello WASM! website

Bundlers are prepared to consume WASM already!

Thanks to ESModules!

bundle

Lin Clark. https://hacks.mozilla.org/2018/03/making-webassembly-better-for-rust-for-all-languages/

25 / 26

Hello WASM! website

Let's code together!

View the code for this exercise here

Lin Clark. https://hacks.mozilla.org/2018/03/making-webassembly-better-for-rust-for-all-languages/

26 / 26

Agenda

  • Overview
  • A Brief Intro to Rust
  • Writing A RustWASM Crate
  • wasm-bindgen
  • wasm-pack
  • Hello WASM! website
2 / 26
Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow