Building a Simple Counter Application with Yew.rs 🦀

Empowering Rust: From Command Line to Web Frontend with Yew.rs

Lama Lab

Introduction

Rust, known for its robustness in system programming, is making waves in the world of web development through frameworks like Yew.rs. In this tutorial, we’ll walk through building a basic counter application using Yew.rs, showcasing how Rust can be leveraged for frontend development.

Prerequisites

Ensure you have Rust and Cargo installed on your system.

Creating the Project

Let’s start by setting up our project. Open your terminal and create a new Cargo project:

cargo new yew-app
cd yew-app

Updating Cargo.toml:

Add Yew to the list of dependencies in your Cargo.toml:

[dependencies]
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }

Step by Step Explanation

1. Imports

use yew::prelude::*;

We import the necessary modules from Yew.rs to build our application.

2. Component Definition

#[function_component]
fn App() -> Html {

The App function defines our main component using the #[function_component] macro. It returns HTML (Html) and represents the root of our application.

3. State Management

let counter = use_state(|| 0);

We use the use_state hook to create a state variable counter initialized to 0. This hook returns a tuple containing the state variable and a function to update it

4. Event Handlers

let increment = {
    let counter = counter.clone();
    move |_| {
        let value = *counter + 1;
        counter.set(value);
    }
};

let decrement = {
    let counter = counter.clone();
    move |_| {
        let value = *counter - 1;
        counter.set(value);
    }
};

Two event handler functions, increment and decrement, are defined to handle the logic for increasing and decreasing the counter value, respectively. These functions are closures that capture the counter state variable and update it accordingly.

5. HTML Structure

html! {
    <div style="text-align: center; margin-top: 50px;">
        <button style="padding: 10px 20px; font-size: 18px; margin-right: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px;" onclick={increment}>{ "+1" }</button>
        <button style="padding: 10px 20px; font-size: 18px; background-color: #f44336; color: white; border: none; border-radius: 5px;" onclick={decrement}>{ "-1" }</button>
        <p style="font-size: 24px; margin-top: 20px;">{ *counter }</p>
    </div>
}

Inside the html! macro, we define the structure of our UI. It consists of two buttons for incrementing and decrementing the counter, along with a paragraph to display the current counter value. Event handlers are attached to the buttons using the onclick attribute.

6. Rendering

fn main() {
    yew::Renderer::<App>::new().render();
}

In the main function, we create a new instance of the Renderer for our App component and call the render method to render the component on the web page.

7. Final Code with Explanation

use yew::prelude::*;

#[function_component]
fn App() -> Html {
    let counter = use_state(|| 0);

    let increment = {
        let counter = counter.clone();
        move |_| {
            let value = *counter + 1;
            counter.set(value);
        }
    };

    let decrement = {
        let counter = counter.clone();
        move |_| {
            let value = *counter - 1;
            counter.set(value);
        }
    };

    html! {
        <div style="text-align: center; margin-top: 50px;">
            <button style="padding: 10px 20px; font-size: 18px; margin-right: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px;" onclick={increment}>{ "+1" }</button>
            <button style="padding: 10px 20px; font-size: 18px; background-color: #f44336; color: white; border: none; border-radius: 5px;" onclick={decrement}>{ "-1" }</button>
            <p style="font-size: 24px; margin-top: 20px;">{ *counter }</p>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

This code creates a simple counter application using Yew.rs, demonstrating how Rust can be utilized for frontend web development. It showcases the power of Rust’s expressive syntax and strong type system in building robust web applications.

Viewing Your Web Application

trunk serve --open

This command will open your default browser to view the application. Trunk will automatically rebuild your application if you modify any source code files.

Our Final Web Application

Conclusion

Congratulations! You've successfully set up your Yew development environment and built your first web application using Rust. Dive deeper into Yew's capabilities and explore more examples to enhance your understanding and skills in Rust-based frontend development.

lamalab