Part 1: Swipe Right with Rust and WASM to craft a frontend app from scratch | Live Coding Session

🚀 Welcome to Part 1 of my journey into building a Mood Board App using Rust and WebAssembly! In this kick-off episode, I'm going to take you through the initial setup of the GitHub repo, lay down the Rust foundations, and get you acquainted with the magic of WebAssembly (WASM) for web development. 🧙‍♂️

👉 What to Expect:

• Setting up a Rust project specifically tailored for WebAssembly

• Deep dive into wasm-bindgen, the must-have dependency for WASM with Rust

• Introducing my game-changing attribute-based frontend framework, inspired by HTMX

• Real-time coding to create clickable buttons that dynamically fetch and display images

🎨 Why a Mood Board App? I thought this project sounded fun, especially since my wife Brandi mentioned wanting an app like this last week. So, I decided to explore this new HTMX-inspired framework while also creating an app that Brandi can use with her clients.

🛠 Technical Highlights:

• Experimenting with cja-click custom HTML attributes for interactive UI

• Tackling Rust closures for asynchronous code execution

• Achieving a no-reload image replacement on a button click using Rust and WASM

📌 Stay Tuned for Next Steps: I'll be working on crafting a more intuitive layout, saving your image ratings, and eventually, hooking up a database to save your mood board creations.

💡 Don't miss this opportunity to ride the wave of frontend innovation using Rust and WASM. Hit that subscribe button and ring the bell so you won't miss the next episode! 🛎️

Check out the repo here: https://github.com/coreyja/moodboards

Some of the crates I used for a full list check out the Cargo.toml files in the repo link above ^^

Server Crates

• tokio [for async stuff] https://lib.rs/crates/tokio

• axum [for web framework] https://lib.rs/crates/axum

• maud [for html templating] https://lib.rs/crates/maud

• miette [for error handling] https://lib.rs/crates/miette

Client/WASM Crates

• wasm_bindgen [for basic JS to/from Rust interop] https://github.com/rustwasm/wasm-bindgen

• js_sys and web_sys to allow me to call existing JS/web APIs from within Rust https://lib.rs/crates/js-sys

• wasm_bindgen_futures [for async Rust in wasm js] https://lib.rs/crates/wasm-bindgen-futures