This content originally appeared on DEV Community and was authored by Pratham Jagga
Hola Amazing Devs 👋,
Welcome to the third episode of our Frontend Development in Rust and WebAssembly blog series. Earlier, we have understood the basics of WebAssembly and set-up the development environment.
Now, let's start with our first application: Social Media Application in Rust + Yew. So buckle up your seat belts as we'll be doing the Rust WASM Magic 🪄. Also you can follow along if you'd wish to :)
Well, in this episode we'll start with a login form and in the next episodes we'll proceed ahead.
Prerequisites
- Cargo and Rust is required.
- Compilation target for WebAssembly must be added, for Rust to compile into WebAssembly:
rustup target add wasm32-unknown-unknown - Next up, we require trunk for serving Yew applications:
cargo install --locked trunk
Setting up a new Yew project
Follow the steps in the previous blog in this series (until step 4) to set up a new Yew project. After that, we'll end up with a src/main.rs file with some relevant Yew code and an index.html file in the root directory.
use yew::prelude::*;
#[function_component]
fn App() -> Html {
html! {
<h1>Hello from rust in browser 🦀👋</h1>
}
}
fn main() {
yew::Renderer::<App>::new().render();
}
The flow
We'll create a function component
LoginForm. This will contain the state variables for username, password and login message, the change handling methods for our inputs and a method for handling form submission. And finally, we'll have to return the Html Template by this function component (html!).html!is a type provided by Yew which helps write html like template code in Rust, just like JSX. This is a blessing from Yew 🥹.Then we just call our
LoginFormcomponent from ourApp.And finally, we'll render the
Appwithin main method.
Writing the component
- Navigate to
src/main.rs, and add the following code right aboveAppfunction:
use web_sys::HtmlInputElement;
#[function_component(LoginForm)]
fn login_form() -> Html {
let username = use_state(|| "".to_string());
let password = use_state(|| "".to_string());
let message = use_state(|| "".to_string());
let on_username_input = {
let username = username.clone();
Callback::from(move |e: InputEvent| {
let input = e.target_unchecked_into::<HtmlInputElement>();
username.set(input.value());
})
};
let on_password_input = {
let password = password.clone();
Callback::from(move |e: InputEvent| {
let input = e.target_unchecked_into::<HtmlInputElement>();
password.set(input.value());
})
};
let on_submit = {
let username = username.clone();
let password = password.clone();
let message = message.clone();
Callback::from(move |_| {
if *username == "dev.to" && *password == "dev.to" {
message.set("Login successful!".to_string());
} else {
message.set("Invalid username or password.".to_string());
}
})
};
html! {
<div>
<h1>{ "Login" }</h1>
<input
type="text"
placeholder="Username"
value={(*username).clone()}
oninput={on_username_input}
/>
<input
type="password"
placeholder="Password"
value={(*password).clone()}
oninput={on_password_input}
/>
<button onclick={on_submit}>{ "Login" }</button>
<p>{ (*message).clone() }</p>
</div>
}
}
This code defines a function component with the name LoginForm, with three states: username, password and message, with empty strings as their initial values.
Then, at the last we are returing an HTML Template with a login form. Note that we are giving the values for inputs as *(input_state).clone() as we are in the closure, similarly we are doing for the message.
Also, for both of the inputs and the for the button, we are passing handlers. (the oninput and onclick).
In the input handler callbacks, we are just cloning the states, listening for the InputEvent, typecasting it to HtmlInputElement and setting the state to its value after typecasting. Since HtmlInputElement is from the crate web_sys, we also need to import it in our main.rs file and mention it as a dependency in Cargo.toml. Cargo.toml should look like:
[package]
name = "wasm-dev"
version = "0.1.0"
edition = "2021"
[dependencies]
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
web-sys = "0.3"
Now in the onsubmit handler, we check if the username and password values are correct, then we change the error message accordingly.
And do not forget to call our LoginForm component in the App component and render App in the main function:
#[function_component(App)]
fn app() -> Html {
html! {
<LoginForm />
}
}
fn main() {
yew::Renderer::<App>::new().render();
}
Finally we do: trunk serve and navigate to `localhost:8000 and Tadaa 😀:
We have our login form, written in Rust 😎.
Let's try example as username and example as password, you'll see te following message:
And trying the correct credentials: dev.to and dev.to:
Hurray, we made it.
So, this is it for today, in later blogs, we'll complete the authentication part and then create a news feed.
Final code can be found here on Github.
See you next week. Adios, Amigos 👋
This content originally appeared on DEV Community and was authored by Pratham Jagga
Pratham Jagga | Sciencx (2024-08-04T15:06:03+00:00) Ep. 3 – Social Media App in Rust + WebAssembly 🦀🌐. Retrieved from https://www.scien.cx/2024/08/04/ep-3-social-media-app-in-rust-webassembly-%f0%9f%a6%80%f0%9f%8c%90/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.