Keep the browser work in JavaScript
The browser owns the document, layout, events, and accessibility tree. This module exposes computation through generated wasm-bindgen functions; JavaScript calls those functions and updates the interface.
05 Across the boundary
WASM Boundary
JavaScript prepares the data. Rust does the computation. The browser makes the result useful. Follow three small workloads across that boundary.
Follow the data
Showing a saved Rust example with default input. Run your input to get a live result.
Input to output
Saved example · default input01 / JavaScript
Prepare the input
Input used for this result:
Edges: [0, 1, 0, 2, 1, 3, 2, 3, 3, 4]. Start 0 (A); destination 4 (E).JavaScript creates a Uint32Array of edge pairs. Generated bindings copy it into WASM memory.
02 / Rust + WASM
Breadth-first search
Rust finds a shortest path through an undirected six-node sample graph. F is deliberately disconnected. Labels stay in JavaScript.
One find_path call. The temporary graph instance is freed after retrieving the route.
03 / JavaScript
Render the result
The bindings copy the result into an independent Uint32Array. The adapter converts it into an ordinary array for React. Neither array is a live view into Rust state.
React supplies labels, SVG, tables, keyboard controls, and announcements. Rust never edits this page’s DOM.
- Array input
- 40 B
- Array output
- 16 B
- Returned values
- 4
Array payload sizes only. Scalar arguments, allocation, binding calls, loading, and rendering costs are excluded. These numbers are not a speed measurement.
Shortest route: A → B → D → E · 3 edges
- A (index 0)
- B (index 1)
- D (index 3)
- E (index 4)
Sample links: A–B, A–C, B–D, C–D, D–E. Links are undirected; F has no links. The shorter route wins; equal routes use the engine’s stable node order.
Inspect returned values (Uint32Array)
Display rounded to four decimals; payload sizes use the original typed array.
[ 0, 1, 3, 4 ]
How it works
Why use Rust/WASM here?
Graph traversal and numeric state updates make useful, testable boundaries. The route finder and flock model are shared with the other Workshop experiments. Normalization adds a small slice-in, vector-out example.
Crossing has a cost
Copying arrays, allocating state, and making repeated calls all add work. The flock batches its returned positions into one snapshot. A few numbers may be simpler to process directly in JavaScript; workload size and the whole application matter.
Examples, not a benchmark
There are no timing rankings or universal speed claims here. Every run is explicit and produces a still result. Saved examples and explanations remain readable if JavaScript or WebAssembly is unavailable.
Saved Rust examples for all three workloads
These default results were generated by the compiled Rust module and checked into the site. Opening this section does not run WebAssembly.
Find a route
Edges: [0, 1, 0, 2, 1, 3, 2, 3, 3, 4]. Start 0 (A); destination 4 (E).
Shortest route: A → B → D → E · 3 edges
- A (index 0)
- B (index 1)
- D (index 3)
- E (index 4)
Sample links: A–B, A–C, B–D, C–D, D–E. Links are undirected; F has no links. The shorter route wins; equal routes use the engine’s stable node order.
Step a flock
48 agents, seed 2026, 12 steps at 1/60 second.
48 agents after 12 steps. A still snapshot, with one packed x, y, vx, vy group per agent.
| Agent | x | y | vx | vy |
|---|---|---|---|---|
| 1 | 34.1271 | 31.3012 | 43.7721 | 14.2009 |
| 2 | 402.9808 | 187.7837 | -27.0017 | -26.7645 |
| 3 | 119.7716 | 379.3072 | 27.4549 | 6.3834 |
Normalize numbers
Values: [-3, 0, 3, 9].
| Input | Normalized (0–1) |
|---|---|
| -3 | 0 |
| 0 | 0.25 |
| 3 | 0.5 |
| 9 | 1 |
Read the Rust boundary examples on GitHub Gist →
← Back to the Workshop