Rust to WebAssembly - A Practical Guide

_ .. .:, . `*-. ..,' ... 'cdOOl. .:dko,,ko. ) _`-. .':ox0K0l. 'kOccoo:;kW0:;dxo;. ;XNc . : `. . .,coxkkdxKKl. .dN0d:. .xWXOo;. ,KW0, : _ ' \ .codxkkxdc,..;xx' ,xXK: .:xXNd. ;KNNx. ; *` _. `*-._ .:ol:'. 'dk: ;doxNk..:dxdkNK; :0dkNl `-.-' `-. .lOl. .. 'xx,.oN0xkd:..xWd. l0;;KK; ... ; ` `. .:kd' 'kd..ONd:dKNk;. :X0, o0,.xN0dooool; :. . \ ,xx; .k0,.oOOxxXX: 'OXc ..';l0XkxxONKl.. . \ . : .-' . .dk:. ,OO; . ,0K, .dNo. xOOkxOXd'. .kNd. ' `+.; ; ' : .l0Olcodxxxkkkkx0NXd' ,KK, .oXd. ... lO, 'ONd. : ' | ; ;-. :ONXOxdl:;,'''',:cokKO ;KK, .dKl. .Ox. 'ONx. ; ' : :`-: _.`* ; .xKxc,. .. ,KNockk, lK: .kN0: .*' / .*' ; .*`- +' `*' .:' .dXKkc. '0k. .lx; `*-* `*-* `*-*' .. .;.

┌─────────────────────────────────┐ │HOME | ABOUT | PROJECTS | BLOG | CONTACT│ └─────────────────────────────────┘

╔═══════════════════════════════════════════╗ ║ HOME | ABOUT | PROJECTS | BLOG | CONTACT ║ ╚═══════════════════════════════════════════╝

╔══════════════════════════════════════════════════════════╗ ║ HOME | ABOUT | PROJECTS | BLOG | CONTACT ║ ╚══════════════════════════════════════════════════════════╝

╔══════════════════════════════════════════════════════════════════════════════╗ ║ HOME | ABOUT | PROJECTS | BLOG | CONTACT ║ ╚══════════════════════════════════════════════════════════════════════════════╝

┌────────────────────────────┐
│Rust to WebAssembly - A Practical Guide│
│ 2024-12-10                 │
│                            │
├────────────────────────────┤
│ << Back to Blog            │
└────────────────────────────┘

╔══════════════════════════════════════╗
║Rust to WebAssembly - A Practical Guide║
║ 2024-12-10                           ║
║                                      ║
╠══════════════════════════════════════╣
║ << Back to Blog                      ║
╚══════════════════════════════════════╝

╔══════════════════════════════════════════════════════════╗
║         Rust to WebAssembly - A Practical Guide          ║
║ 2024-12-10                                               ║
║                                                          ║
╠══════════════════════════════════════════════════════════╣
║ << Back to Blog                                          ║
╚══════════════════════════════════════════════════════════╝

╔══════════════════════════════════════════════════════════════════════════════╗
║                   Rust to WebAssembly - A Practical Guide                    ║
║ 2024-12-10                                                                   ║
║                                                                              ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ << Back to Blog                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝

WebAssembly lets you run Rust in the browser. Here's how this site uses it.

Setup

# Install wasm-pack
cargo install wasm-pack

# Build the WASM module
wasm-pack build --target web --out-dir static/wasm

Cargo.toml Config

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"
web-sys = { version = "0.3", features = ["Document", "Element"] }

Exposing Functions to JavaScript

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn render_ascii_cat(state: &str) -> String {
    match state {
        "sleep" => include_str!("../templates/ascii/cat/sleep1.txt"),
        "run" => include_str!("../templates/ascii/cat/run1.txt"),
        _ => include_str!("../templates/ascii/cat/still.txt"),
    }.to_string()
}

Loading in HTML

import init, { render_ascii_cat } from '/static/wasm/ascii_web.js';

await init();
const cat = render_ascii_cat("sleep");
document.getElementById("cat").textContent = cat;

Why WASM?

Near-native performance
Share code between server and client
Type safety all the way down

┌────────────────────────────┐ │

vxfemboy | meow <3 │ └────────────────────────────┘

╔══════════════════════════════════════╗ ║

vxfemboy | meow <3 ║ ╚══════════════════════════════════════╝

╔══════════════════════════════════════════════════════════╗ ║

vxfemboy | meow <3 ║ ╚══════════════════════════════════════════════════════════╝

╔══════════════════════════════════════════════════════════════════════════════╗ ║

vxfemboy | meow <3 ║ ╚══════════════════════════════════════════════════════════════════════════════╝