DEV Community: Pratham Jagga

Ep. 4 - Ditch Javascript, Let's Write Our Frontend in Rust🦀💻

Pratham Jagga — Thu, 12 Sep 2024 09:50:11 +0000

Having read the previous blogs in this series, you must have known that:

WASM is not only a way to build and run fast & light-weight frontend apps but also fully functional & complete frontends.

And if you doubt this statement, let's build one ourselves. Let's Gooo🚀💥

🙌 Welcome back to the fourth episode of our journey into building a social media application using Yew, a Rust-based framework for building front-end applications (uses WASM under the hood). In the last episode, we created a basic login page for our social media app. Now, we’ll take a significant step forward by allowing users to add posts and display them using local storage.

What We Will Cover

Creating Routes for Navigation
Setting up Post Submission Form
Displaying Posts from Local Storage
Using localStorage to Persist Posts and Username

If you haven't been following along, feel free to catch up with the previous episodes:

Episode 1: Introduction to WebAssembly
Episode 2: Setting up the Yew Environment
Episode 3: Building a Login Page

Prerequisites

Knowledge of Rust and basic Yew concepts (covered in previous episodes).
Working Yew development environment. All the code in this blog can be used in the main.rs file. Also, make sure you have the required dependencies. This is the Cargo.toml file for our project:

[package]
name = "your_app_name"
version = "0.1.0"
edition = "2024"

[dependencies]
yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
yew-router = { git = "https://github.com/yewstack/yew.git" }
web-sys = "0.3.70"
gloo-storage = "0.3.0"a
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"

Without further ado, let’s dive in!

Structuring Our Application with Routes

Before we can build the functionality for adding posts, we need to define routes for navigation. We’ll create three pages:

Home page (which includes a login form)
Post creation page
Feed page (where users can view submitted posts)

#[derive(Routable, PartialEq, Clone, Debug)]
enum Route {
    #[at("/posts")]
    Hello,
    #[at("/world")]
    World,
    #[at("/")]
    Home,
    #[not_found]
    #[at("/404")]
    NotFound,
}

In this enum, each variant corresponds to a different route. The Home route will display the login form, Hello is for creating posts, and World will show the list of posts.

We’ll also set up route switching logic that renders the appropriate component for each route:

fn switch(routes: &Route) -> Html {
    match routes {
        Route::Hello => html! { <Hello /> },
        Route::World => html! { <World /> },
        Route::Home => html! { <Home /> },
        Route::NotFound => html! { <h1>{ "404 - Page Not Found" }</h1> },
    }
}

This switch function ensures that navigating to a different URL correctly renders the associated component.

Adding a Post Submission Form

Next, let’s focus on the Hello component, where users can add new posts. We’ll use Yew’s use_state hook to manage the post content and localStorage to store the post and the username.

#[function_component(Hello)]
fn hello() -> Html {
    let content = use_state(|| String::new());

    let on_content_input = {
        let content = content.clone();
        Callback::from(move |e: InputEvent| {
            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
            content.set(input.value());
        })
    };

    let on_submit = {
        let content = content.clone();
        Callback::from(move |_| {
            if let Some(storage) = window().unwrap().local_storage().unwrap() {
                if let Ok(Some(username)) = storage.get_item("username") {
                    let mut posts: Vec<Post> =
                        if let Ok(Some(posts_str)) = storage.get_item("posts") {
                            serde_json::from_str(&posts_str).unwrap_or_else(|_| vec![])
                        } else {
                            vec![]
                        };

                    let new_post = Post {
                        username: username.clone(),
                        content: (*content).clone(),
                    };
                    posts.push(new_post);

                    let posts_str = serde_json::to_string(&posts).unwrap();
                    storage.set_item("posts", &posts_str).unwrap();

                    web_sys::console::log_1(&"Post added!".into());
                }
            }
        })
    };

    html! {
        <div>
            <h1>{ "Hello" }</h1>
            <div>
                <label for="content">{ "Content: " }</label>
                <input id="content" type="text" value={(*content).clone()} oninput={on_content_input} />
            </div>
            <button onclick={on_submit}>{ "Submit" }</button>
        </div>
    }
}

The content state stores the current post content.
The on_content_input function captures user input from the text field.
The on_submit function handles saving the post to localStorage. It first retrieves the username from localStorage (set during login) and then stores the post as a serialized JSON string.

Displaying Posts from Local Storage

Once posts are stored, we can display them on the World page. Here’s how to retrieve and display posts from localStorage:

#[function_component(World)]
fn world() -> Html {
    let posts: Vec<Post> = {
        if let Some(storage) = window().unwrap().local_storage().unwrap() {
            if let Ok(Some(posts_str)) = storage.get_item("posts") {
                serde_json::from_str(&posts_str).unwrap_or_else(|_| vec![])
            } else {
                vec![]
            }
        } else {
            vec![]
        }
    };

    html! {
        <div>
            <h1>{ "World" }</h1>
            <h2>{ "User Posts" }</h2>
            <ul>
                { for posts.iter().map(|post| html! {
                    <li>
                        <strong>{ format!("{}: ", post.username) }</strong>
                        <span>{ &post.content }</span>
                    </li>
                })}
            </ul>
        </div>
    }
}

This component reads posts from localStorage, deserializes them, and then iterates through the list to display each post with the associated username and content.

Connecting Everything in the Root Component

Finally, let’s tie everything together in our App component. This component uses the Yew Router to render the correct page based on the current route.

#[function_component(App)]
fn app() -> Html {
    html! {
        <BrowserRouter>
            <Switch<Route> render={|routes: Route| switch(&routes)} />
        </BrowserRouter>
    }
}

The App component will be rendered in the index.html file, which acts as the entry point for our application. Make sure you have a basic HTML setup in index.html like this:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Yew App</title>
    </head>
    <body>
    </body>
</html>

Now just do: trunk serve and we'll have our app up and running at localhost:8000:

With this setup, our social media app should be fully functional. You can now navigate between the pages, add posts, and view them in the feed.

So, in this episode, we extended our social media app to support post creation and viewing. By utilizing Yew, we’ve made significant progress toward building a nice little application.

I am not planning to add more functionalities to this application as of now, instead I will be implementing these concepts (WASM, Rust, Yew, etc.) in my other projects and I'll keep sharing my learnings in future blogs.

If you've followed everything till here, you deserve a clap. 😉

Github Repository ⭐

Follow me on Dev.to 👍

Stay tuned and follow me here for more blogs!
👋 Adios, Amigos!!

Ep. 3 - Social Media App in Rust + WebAssembly 🦀🌐

Pratham Jagga — Sun, 04 Aug 2024 15:06:03 +0000

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 LoginForm component from our App.
And finally, we'll render the App within main method.

Writing the component

Navigate to src/main.rs, and add the following code right above App function:

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 👋

Setting up the Environment and Hello world in WASM with Rust 🦀

Pratham Jagga — Wed, 24 Jul 2024 10:42:42 +0000

Well, in the previous post, we've already discussed the What and Why of Webassembly.

I've decided to keep the WebAssembly series ongoing, where we'll be making cool projects and learning cool concepts along the way.

So, why wait?? Let's gear up and setup our environment for working on WASM apps. Note that throughout the series we'll use Rust as the programming language for writing our applications and Yew as the framwork. Also, we are using Yew for a couple of reasons: Intuitiveness, Readablity and its Rich ecosystem.

Setting up the Development Environment

1) Installing Rust from here
2) Installing the WASM Target. This is the compilation target to compile our rust code to WASM Modules.

rustup target add wasm32-unknown-unknown

3) Installing Trunk. Trunk is used for deployment and packaging for Yew Applications.

cargo install --locked trunk

Setting up the Yew project

Well, having the necessary stack installed, now let's start with a minimalistic application.

1) First off, lets initialize a project with cargo: cargo new my-wasm-app You can verify if the project is successfully initialized by running cargo run and it should show the following output: Hello, World!
2) Let's now add yew as a dependency in Cargo.toml file (it is present in the project's directory.

[package]
name = "wasm-dev"
version = "0.1.0"
edition = "2021"

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

3) Now, make changes to your main.rs file. It should look like:

use yew::prelude::*;

#[function_component]
fn App() -> Html {
    html! {
        <h1>Hello from rust in browser 🦀👋</h1>
    }
}

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

4) Let's add a placeholder html file (index.html) in the root directory as well.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello Web in Rust!!</title>
    </head>
    <body>
    </body>
</html>

5) Lets serve it and see the application in browser. By default, the port is 8080.
trunk serve
6) Now, opening localhost:8080 in your browser window will display:

So, now our rust app is up and running and the dev environment is also setup successfully😀. Cheers! 🍻.

So this was it for this blog, now as I said we'll be continuing this series and every week we'll have a new blog. Next up, we'll be making a complete Social Media app in Rust and Yew and see many frontend concepts in action in Rust.

Adios Amigos 👋

The WebAssembly Magic 🪄

Pratham Jagga — Sun, 30 Jun 2024 15:08:51 +0000

Hello amazing people 👋,

Have you ever thought about running some other programming language on the browser, other than Javascript 🤔. But then thought it is not possible since Browsers natively support only Javscript right?

Now what if I tell you that WebAssembly is the solution here, it enables us to run any compiled programming language on the web with near native execution times. But how ??? Okay, now in order for you to understand this, let us first discuss about what WebAssembly is right? But hey, in order to understand what WebAssembly is let’s first look at how compiled languages work on any machine.

So languages such as C++, Java, Rust have their compilers which first convert this code in a low level syntax (mostly some assembly like language) and then that low level code can be executed natively on the machines.

HLL (C++/Java/Rust) ———> LLL (Assembly) ———> Execution on machine.

Here can you a see a common thing ?? You guessed right, all the languages here gets compiled to some low level targets. And what if we define a low level target language which can be run on the browser ?? Well, WebAssembly is that only, it is a compilation target for high level languages which can be executed on the browsers.

But how is it possible to compile languages to WebAssembly, you might think. Well, we have different compilers in the WASM (WebAssembly) Ecosystem. One of the popular examples being Emscripten (EMCC) which is a compiler for C/C++ which compiles them into WebAssembly code.

But why do we even need to use WebAssembly in the first place, why can’t we simply compile these other languages in Javascript and then run them on browser. Well for many years, asm.js was a popular standard. But for many use cases we want speed and performance right, then what is the point of compiling faster languages to Javascript. That is why we want to achieve native speeds by directly running their low level targets on the Web.

Lets now understand the WebAssembly’s magic with a simple example:

Suppose we want to sort 1 million random numbers in the browser, but Javascript seems slow for this operation and we decided to implement this in C++ and then load its WebAssembly target code in the browser, then let’s see how much it can optimize the things.

So, lets have this code in Javascript and C++ which sorts the 1 million random numbers and then also prints the time taken in sorting them.

const arr = [];

for (let i = 0; i < 1000000; i++) {
  arr.push(Math.floor(Math.random() * 100000000));
  if (i % 10000 === 0) {
      console.log("I", i);
  }
}

console.time("sort");
arr.sort((a, b) => a - b);
console.timeEnd("sort");

Now the C++ code:

#include <iostream>

#include <vector>

#include <algorithm>

#include <chrono>

extern "C" {

    void sortArray() {

        std::vector<int> arr;

        for (int i = 0; i < 1000000; ++i) {

            arr.push_back(rand());

        }

        auto start = std::chrono::high_resolution_clock::now();

        std::sort(arr.begin(), arr.end());

        auto end = std::chrono::high_resolution_clock::now();

        std::chrono::duration<double> diff = end - start;

        std::cout << "Time to sort in C++: " << diff.count() << " seconds" << std::endl;

    }

}

We can compile the above code to a WASM target using emscripten:
emcc -o sort.js sort.cpp

Then we get sort.wasm and sort.js files as the Webassembly target code and js code for loading the wasm code using the Browser’s WebAssembly API.

Now when we run sort.js files and the respective sorting code in a browser we can clearly see the time difference in the console:

See the numbers above are much smaller in Javascript and it takes around 0.3 seconds to sort them whereas numbers in CPP are way greater, still it is taked only 0.1 seconds.

Also, this is not the only thing where other languages are faster at, languages like Rust and C++ can also be used in graphics and video processing as well. One great example for this use case is “The Figma’s implementation of WebAssembly on their WebApplication” where they were able to achieve 10X faster loading times using C++ on their canvas editor.

Also, WebAssembly is never going to replace Javascript, they both go hand in hand, WebAssembly can be leveraged for complex operations whereas for DOM operations Javascript will always be good at atleast in the upcoming years.

So, this was my learning for this week. See you the next week. Do like and share this post with friends and colleagues :)

Keep learning and have a great day 🙋‍♂️

What are DTOs and their significance?

Pratham Jagga — Thu, 20 Jun 2024 19:49:51 +0000

What's up amazing people 👋

I just wanted to talk a lil bit about the concept of DTOs in programming and how they might be useful and significant in your code.

So, what is a DTO? Well, it stands for Data Transfer Object. It is basically defining an interface for various types of data transfers within a system. Some examples are: typescript interfaces which we use in our typescript code, mongoose schemas, etc.

DTOs make it easier to identify the flow of data between functions, services, modules and components of our application. Having the structure of data clear makes it easier to understand code, apply validations on data, identify unintentional flow of sensitive information and easier to document the code.

Let's take an example of our simple Node.js application and implement a simple API controller first without using DTO and then using DTOs. Later we will compare both of the strategies.

Basic API example without using DTO

const express = require("express");
const app = express();

// controller without using DTO
async function getUserData(req, res) {
    const username = req.query.username;
    const key = req.query.key;
    if (!username || !key) {
        return res.json({ success: false, info: "Invalid parameters!" });
    }

    // process user data
    // may be from your database
    // like db.get(users, {username})
    const userData = {
        name: "XYZ",
        age: "23",
        // ... more data
    };

    return res.json({ success: true, data: userData });
}

// route
app.get("/user", getUserData);

app.listen(5000, () => console.log("SERVER LISTENING ON 5000"));

This is a very basic API implementation in Nodejs using express, right?

Let's try implementing the same with a DTO object.

const express = require("express");
const app = express();

class UsernameQueryDTO {
    username;
    key;
    constructor(query) {
        this.username = query.username;
        this.key = query.key;
    }
    isValid() {
        if (
            !this.username ||
            this.username.length < 5 ||
            !this.key ||
            this.key != "your_secret_key"
        ) {
            return false;
        }
        return true;
    }
    get() {
        return { username: this.username };
    }
}

// controller using our DTO object
async function getUserData(req, res) {
    const query = (new UsernameQueryDTO(req.query)).get();
    if (!query.isValid())
        return res.json({ success: false, info: "Invalid parameters!" });

    // process user data
    // may be from your database
    // like db.get(users, {username: query.username})
    const userData = {
        name: "XYZ",
        age: "23",
        // ... more data
    };

    return res.json({ success: true, data: userData });
}

// route
app.get("/user", getUserData);

app.listen(5000, () => console.log("SERVER LISTENING ON 5000"));

You can clearly see now we are easily able to:

define validations. 🤨
see the structure of incoming data. 📊
determine sensitive data such as secret key is filtered beforehand (you can see our get function only returns the username). 🔒
understand the flow of data and document the APIs more effectively as we already have the data defined. 📏

I hope you got the point now !!
Now I leave it up to you as a task to define a DTO class for the response object as well and post it in the comments 💬.

That was it guys, Thankyou for reading the blog and if you like my work you can follow me here 😃

See you next week with a new blog :)

Top 10 Youtube channels to follow if you're a Programmer 🚀

Pratham Jagga — Tue, 04 Jun 2024 16:40:49 +0000

PS: nothing fancy in the blog; Just listing here, some of the best youtube channels that will make you fall in love with software development.

(i) ThePrimeTime -- This guy reacts to programming blogs, videos, etc, sharing his opinion and insights.
(ii) ByteByteGo -- Videos on System Design concepts and case studies.
(iii) Gaurav Sen -- Videos on System Design concepts and case studies.
(iv) Theo - t3.gg -- Videos on whats happening in programming world.
(v) Perfology -- Videos on Scaling systems and Performance testing.
(vi) Scaler -- Podcasts with top developers.
(vii) Beyond Coding -- Podcasts with top developers.
(viii) Honeypot -- Documentaries on different technologies and their origin.
(ix) GO TO Conferences -- Sessions from Software Conferences.
(x) NDC Conferences -- Sessions from Software Conferences.
(xi) Arpit Bhayani -- Videos on System Design concepts, case studies and podcasts.

Some honorable mentions: Just me and open source, FastAI, Deeplearning.ai.

Show some love by sharing, liking and commenting ✌️

Cheers, let's meet next time with a next cool blog 😃