UI is a tedious side-effect, albeit a desired one. As I wanted to write the backend for the calendar stacking algorithm in Rust, I had a few options: Write the UI in Javascript and interact with the calendar stacking algorithm via a JS object or write the UI in Rust using some sort of framework that provides WASM bindings. As I’d already built the app once in React I didn’t want to rebuild the same thing twice. Another reason is that crossing JS-WASM boundary comes with its own set of problems (that’s a tale for another time). I looked into Dioxus and Leptos, both sound like names of Pokemon.
The documentation for Leptos was a bit sparse, and I ran into a few problems getting their example project to run. I do want to check out fine grained reactivity at some point but I’ll come back to it later when I have some more time. Dioxus on the other hand had great documentation, and getting the example project up and running took very little time. Dioxus is very similar to React, which is what I’ve been working with for the last 8 years so it was pretty quick to get a hang of.
Initial State
Dioxus lets you store state between component renders similar to React’s hooks.
let calendar_blocks = use_state(&cx, || vec![
CalendarBlock {
start_minute: 750 - 420,
end_minute: 1050 - 420,
block_type: CalendarBlockType::Available,
},
CalendarBlock {
start_minute: 780 - 420,
end_minute: 915 - 420,
block_type: CalendarBlockType::Busy,
}
]
);