Building WASM web UI with Rust
Rust has become a popular language for web development due to its performance and safety features. With the introduction of WebAssembly (WASM), it is now possible to use Rust to build web UIs that are fast and efficient.
Getting Started
The first step to building a web UI with Rust and WASM is to install the necessary tools. You will need to install Rust and the wasm-pack tool, which is used to build and package WebAssembly projects.
$ curl https://sh.rustup.rs -sSf | sh
$ cargo install wasm-pack
Creating a New Project
Once you have the tools installed, you can create a new Rust project for your web UI. Use the following command to generate a new project with wasm-pack.
$ wasm-pack new my-web-ui
This will create a new directory called “my-web-ui” with the necessary files and folder structure for a Rust project that can be compiled to WebAssembly.
Writing Rust Code
Next, you can start writing your Rust code for the web UI. You can use any Rust library for building web UIs, such as yew or stdweb. These libraries provide a high-level interface for building UI components and handling user interactions.
Here is an example of a simple Rust code that creates a button and logs a message when it is clicked using the yew library.
// src/main.rs
use yew::prelude::*;
struct Model {
link: ComponentLink,
}
enum Msg {
Click,
}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, link: ComponentLink) -> Self {
Model { link }
}
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
Msg::Click => {
web_sys::console::log_1(&"Button clicked".into());
false
}
}
}
fn view(&self) -> Html {
html! {
}
}
}
#[wasm_bindgen(start)]
pub fn run_app() {
yew::start_app::();
}
Building and Bundling
Once you have written your Rust code, you can use wasm-pack to build and bundle your project into a single JavaScript file that can be used in a web application. Use the following command to build your project.
$ wasm-pack build
Integrating with Web Application
Finally, you can integrate your compiled JavaScript file into a web application. You can use HTML and JavaScript to create a web page that loads and runs your web UI built with Rust and WASM.
This article has provided a brief overview of building web UI with Rust and WebAssembly. With the growing popularity of Rust and WASM, it is becoming easier and more efficient to build high-performance web applications using these technologies.
what is this fuc*** garbege code!! painfull to read even if to write!
Which code editor you use
TIL one pass has a cli
Hey Chris, thanks for the cool videos. I just wanted to let you know that when I tried signing up to get notified of new posts on Rust Adventure I got a 405 error.
love the dashboard, is the code open source on github?
is this like the Rust version of tRPC?
How is the performance of the WASM binaries and compilation on the client for you? Is the WASM being streamed and compiled in steps for you automatically for speed ups? I am pretty sure this isn't server side generated only – but still have limited experience with leptos, so ignore my question if I am not tracking how this works 🙂
Super cool to see how useful cargo toml's can be. Straightforward configs – clear client server dependency breakdown. Great content! Thanks
How is use of limited javascript client side in wasm/leptos these days?
on the side-nav by the left, if you scroll more than 100vh you will reach the end, which looks odd. you can fix that by setting its height .side_nav{ min-height = 100vh }
Should I use yew or leptos to make a web app, for say a client? and why
Do you have a video about why one might choose Leptos over Yew?
Hmm.. I am not well versed in Leptos nor in Rust but why use raw SQL files wth SQLx? Whats the advantage over having some ORM handle it for you (eg. Diesel?) From the file structure alone it looks really verbose. Not to mention the current implementation makes for a very static approach.
super interesting insights!
can you not use macros to write registration like some sort of decorator (which you would do e.g. in python frameworks), that makes a pub sub registry, that rolls out all registration calls?
I kind of dislike as a backend dev to see stuff like needing to get the pool in what seems to be a business function and doing a bunch of dB stuff, that looks very much like boiler plate, that you at least would hide in some kind of ORM Manager or other repo pattern, as it kind of looks like this is something that becomes quite a copypaste thing
What are you using for the JSX highlighting in leptos?
Nice to see some "real world" example and have clear explanations. Do you plan to open-source that project at some point?
How do you embed Bevy into a Leptos app?