Ever wondered what it would be like to build a web frontend without the comfort of React, Vue, or Angular? Well, that’s exactly what I did - but with a twist. I decided to use Rust, because who needs a life right? 🦀
The Mission
My goal was simple, create a frontend web application using Rust without using any of the magic frameworks that do everything for you (I used some libraries though)
The Foundation
Setting Up the Project
The project structure reveals a typical Rust web assembly setup, with some interesting additions. Here’s the Cargo.toml with which I started the project:
[dependencies]
wasm-bindgen = "0.2.92"
spin = "0.9"
reqwest = { version = "0.11.26", features = ["json", "cookies"] }
serde_json = "1.0.114"
serde = { version = "1.0.197", features = ["derive"] }
tokio = { version = "1.36.0" }
wasm-bindgen-futures = "0.4.42"
[dependencies.web-sys]
version = "0.3.4"
features = [
'Document',
'Element',
'HtmlElement',
'HtmlInputElement',
'Node',
'Window',
'MouseEvent',
'KeyboardEvent',
'Location',
'Storage',
]
The key players here are:
wasm-bindgen: Can’t get rid of Javascript completely so… yeahweb-sys: For DOM manipulationreqwest: For making HTTP requestsspin: For state management
The Architecture
Component System
I implemented a component-based architecture similar to modern frontend frameworks. The core of this system is a simple Component trait, that I can use to create components.
use web_sys::HtmlElement;
// Component trait for defining components
pub trait Component {
fn render(&self) -> HtmlElement;
}
Each component implements this trait, giving us a consistent way to render HTML elements. Here’s an example of how components look:
pub struct ExampleComponent {
text: String,
}
impl ExampleComponent {
pub fn new(text: &str) -> ExampleComponent {
ExampleComponent {
text: text.to_string(),
}
}
// Function to handle button click event
fn handle_click(&mut self) {
self.text = "Text Changed!".to_string();
let router = store::get::<Router>();
router.render("/login");
}
}
State Management
One thing I’ve learned (one of the things) from building in React that always invest some time in state management! So I decided implement a make-shift global store so that I can access local state data from anywhere in the application
So I built a global store using HashMap, which makes reading and writing data a breeze, and is safe to access from and share across multiple threads.
use spin::{Mutex, MutexGuard};
use std::sync::OnceLock;
use std::{
any::{Any, TypeId},
collections::HashMap,
};
static GLOBALS_LIST: OnceLock<Mutex<HashMap<TypeId, &'static (dyn Any + Send + Sync)>>> =
OnceLock::new();
This gives us a type-safe way to manage global state with methods like store::get<T>() and store::set<T>(). It’s like Redux, but with more compiler yelling at you (in a good way).
pub fn get<T>() -> MutexGuard<'static, T>
where
T: 'static + Default + Send + Sync,
{
let globals = GLOBALS_LIST.get_or_init(|| Mutex::new(HashMap::new()));
{
let mut globals = globals.lock();
let type_id = TypeId::of::<T>();
if let Some(value) = globals.get(&type_id) {
// Safe downcast from &dyn Any to &Mutex<T>
let mutex = value
.downcast_ref::<Mutex<T>>()
.expect("Type mismatch in global storage");
return mutex.lock();
}
// Initialize new value if not present
let new_mutex = Box::new(Mutex::new(T::default()));
let leaked_mutex: &'static Mutex<T> = Box::leak(new_mutex);
globals.insert(type_id, leaked_mutex);
}
// Recursive call to get the newly inserted value
get()
}
pub fn set<T>(data: T)
where
T: 'static + Default + Send + Sync,
{
let globals = GLOBALS_LIST.get_or_init(|| Mutex::new(HashMap::new()));
{
let mut globals = globals.lock();
let type_id = TypeId::of::<T>();
// Create and insert new mutex
let new_mutex = Box::new(Mutex::new(data));
let leaked_mutex: &'static Mutex<T> = Box::leak(new_mutex);
globals.insert(type_id, leaked_mutex);
}
}
pub fn remove<T>()
where
T: 'static + Default + Send + Sync,
{
if let Some(globals) = GLOBALS_LIST.get() {
let mut globals = globals.lock();
globals.remove(&TypeId::of::<T>());
}
}
Routing
On to the routing part, for navigating between pages. The router implementation is surprisingly clean:
pub struct Router {
routes: Vec<Route>,
}
impl Default for Router {
fn default() -> Self {
Router { routes: Vec::new() }
}
}
impl Router {
pub fn new() -> Router {
Router { routes: Vec::new() }
}
pub fn add_route(&mut self, path: &str, component: Box<dyn Component + Send + Sync>) {
self.routes.push(Route {
path: path.to_string(),
component,
});
}
pub fn render(&self, path: &str) {
let route = self.routes.iter().find(|r| r.path == path);
println!(
"routes: {:#?} path: {:?} single_route: {:?}",
&self.routes.iter().for_each(|r| {
println!("nested path: {}", r.path);
}),
&path,
&route.unwrap().path,
);
if let Some(route) = route {
let root = window().unwrap().document().unwrap().body().unwrap();
root.set_inner_html(""); // Clear existing content
let mut component = route.component.render();
root.append_child(&component).unwrap();
} else {
// Handle 404
let root = window().unwrap().document().unwrap().body().unwrap();
root.set_inner_html("404 - Page Not Found");
}
}
}
It maintains a vector of routes and their corresponding components, handling navigation and rendering. Here I’ve used a seemingly messy implementation of actually rendering components when route is changed, but it works.
The Cool Parts
Virtual DOM? Nah, Real DOM!
Unlike modern frameworks that use a Virtual DOM, I went straight for the real thing. The Element utility provides a builder pattern for DOM manipulation:
pub struct Element {
pub element: HtmlElement,
}
pub trait HtmlElementMethod {
fn call(self, element: &HtmlElement);
}
impl<F> HtmlElementMethod for F
where
F: FnOnce(&HtmlElement),
{
fn call(self, element: &HtmlElement) {
self(element);
}
}
impl Element {
pub fn new(name: &str) -> Self {
let document = window().unwrap().document().unwrap();
let element = document
.create_element(name)
.unwrap()
.dyn_into::<HtmlElement>()
.unwrap();
Element { element }
}
pub fn set<M>(&mut self, method: M) -> &mut Self
where
M: HtmlElementMethod,
{
let element = self.element.clone();
method.call(&element);
self
}
pub fn child(&mut self, child: HtmlElement) -> &mut Self {
let _ = self.element.append_child(&child);
self
}
pub fn build(&mut self) -> HtmlElement {
let element = self.element.clone();
element
}
}
use web_sys::HtmlElement;
// Component trait for defining components
pub trait Component {
fn render(&self) -> HtmlElement;
}
Putting it in general terms, if this were a library or framework this Element would can be used as a template to easily build components without having to redefine all the DOM stuff.
Type-Safe Forms
The login form implementation is a great example of how to handle forms in a type-safe way. It’s not the most advanced authentication solution out there, but it’s a fun way to experiment and learn.
pub async fn handle_login(&self) {
let router = store::get::<Router>();
let mut headers = reqwest::header::HeaderMap::new();
headers.insert(CONTENT_TYPE, HeaderValue::from_static("application/json"));
let login_input = store::get::<LoginInput>();
let data = format!(
r#"{{ "username": "{}", "password": "{}" }}"#,
login_input.username, login_input.password
);
let json: serde_json::Value = serde_json::from_str(&data).unwrap();
let response = api::post("http://localhost:7878/auth/login", headers.clone(), json).await;
match response {
Ok(res) => {
if res.status().is_success() {
let body = res.bytes().await.unwrap();
let body_str = String::from_utf8(body.to_vec()).unwrap();
let json_response: LoginResponse = serde_json::from_str(&body_str).unwrap();
store::set::<User>(User::new(
json_response.id,
json_response.username,
json_response.access_token,
json_response.refresh_token,
));
}
}
Err(err) => {
println!("Error sending request: {}", err);
}
}
router.render("/home");
}
How it all works together
This is the entry point of our application, this where everything is initialized and setup.
mod components;
mod models;
mod routers;
mod store;
mod utils;
use components::{auth::login::Login, example::ExampleComponent, home::Home};
use reqwest::{Client, ClientBuilder};
use routers::router::Router;
use wasm_bindgen::prelude::*;
#[wasm_bindgen(start)]
pub fn main() -> Result<(), JsValue> {
// Initialize page router
let mut router = store::get::<Router>();
let client_builder: ClientBuilder = reqwest::Client::builder();
let client = client_builder.build().unwrap();
let _global_client = store::set::<Client>(client);
// Add routes and components
router.add_route("/", Box::new(ExampleComponent::new("Not the home page")));
router.add_route("/about", Box::new(ExampleComponent::new("About Page")));
router.add_route("/contact", Box::new(ExampleComponent::new("Contact Page")));
router.add_route("/home", Box::new(Home::new()));
router.add_route("/login", Box::new(Login::new()));
// Get current path and render corresponding component
let location = web_sys::window().unwrap().location();
let pathname = location.pathname().unwrap();
let path = pathname.to_string();
router.render(&path);
Ok(())
}
Let me walk you through this
// Initialize page router
let mut router = store::get::<Router>();
First, I setup the router. I want the router to be globally accessible through the application so I’m creating an instance for it in the store. This get method will not be able to find any instance of router and will create a new one for me since Router has a Default implementation.
I don’t think putting router in the global store is the most elegant of solutions but I’ll figure out a better way to do this later… let’s just focus on making this work.
let client_builder: ClientBuilder = reqwest::Client::builder();
let client = client_builder.build().unwrap();
let _global_client = store::set::<Client>(client);
Now, for the API requests we want to setup the client and just like the router we want it to be accessible throughout the web app. However, unlike the router we’re initializing it with a value which is why I’m using the set method for this.
// Add routes and components
router.add_route("/", Box::new(ExampleComponent::new("Not the home page")));
router.add_route("/about", Box::new(ExampleComponent::new("About Page")));
router.add_route("/contact", Box::new(ExampleComponent::new("Contact Page")));
router.add_route("/home", Box::new(Home::new()));
router.add_route("/login", Box::new(Login::new()));
This is the frontend-y part, creating components! So I’ve setup the routes with certain components, which I created from.
The next part is going to be a bit lengthy, stay with me…
use serde_json;
use std::borrow::{Borrow, BorrowMut};
use std::collections::HashMap;
use std::rc::Rc;
use reqwest::header::{HeaderValue, CONTENT_TYPE};
use wasm_bindgen::prelude::*;
use web_sys::{window, Event, HtmlElement, HtmlInputElement, KeyboardEvent};
use crate::components::component::Component;
use crate::models::login_input::LoginInput;
use crate::routers::router::Router;
use crate::store;
use crate::utils::{api, Element};
use crate::models::user::User;
#[derive(Debug, serde::Deserialize)]
struct LoginResponse {
id: i32,
username: String,
access_token: String,
refresh_token: String,
}
#[derive(Debug, Copy, Clone)]
pub struct Login {}
impl Login {
pub fn new() -> Self {
let _ = store::get::<LoginInput>();
Login {}
}
pub async fn handle_login(&self) {
let router = store::get::<Router>();
let mut headers = reqwest::header::HeaderMap::new();
headers.insert(CONTENT_TYPE, HeaderValue::from_static("application/json"));
let login_input = store::get::<LoginInput>();
let data = format!(
r#"{{ "username": "{}", "password": "{}" }}"#,
login_input.username, login_input.password
);
let json: serde_json::Value = serde_json::from_str(&data).unwrap();
let response = api::post("http://localhost:7878/auth/login", headers.clone(), json).await;
match response {
Ok(res) => {
if res.status().is_success() {
let body = res.bytes().await.unwrap();
let body_str = String::from_utf8(body.to_vec()).unwrap();
let json_response: LoginResponse = serde_json::from_str(&body_str).unwrap();
store::set::<User>(User::new(
json_response.id,
json_response.username,
json_response.access_token,
json_response.refresh_token,
));
}
}
Err(err) => {
println!("Error sending request: {}", err);
}
}
router.render("/home");
}
}
impl Component for Login {
fn render(&self) -> HtmlElement {
let mut login_component = Login::new();
let document = window().unwrap().document().unwrap();
let container = document
.create_element("div")
.unwrap()
.dyn_into::<HtmlElement>()
.unwrap();
let mut heading = Element::new("h2");
let mut login_form = Element::new("form");
let mut username_row = Element::new("tr");
let mut username_label = Element::new("td");
let mut username_container = Element::new("td");
let mut username_input = Element::new("input");
let mut password_row = Element::new("tr");
let mut password_label = Element::new("td");
let mut password_container = Element::new("td");
let mut password_input = Element::new("input");
let mut submit_button_row = Element::new("tr");
let mut submit_button_container = Element::new("td");
let mut submit_button = Element::new("button");
let mut form_table = Element::new("table");
form_table.set(|table: &HtmlElement| {
table.set_attribute("cellspacing", "10").unwrap();
});
heading.set(|h2: &HtmlElement| {
h2.set_inner_text("Login");
});
username_label.set(|label: &HtmlElement| {
label.set_attribute("align", "right").unwrap();
label.set_inner_text("Username: ");
});
username_input
.set(|input: &HtmlElement| {
input.set_id("username");
input.set_attribute("type", "text").unwrap();
input.set_attribute("name", "username").unwrap();
input.set_attribute("placeholder", "Username").unwrap();
})
.set(|input: &HtmlElement| {
let handler = Closure::wrap(Box::new(|e: Event| {
let input = e
.current_target()
.unwrap()
.dyn_into::<HtmlInputElement>()
.unwrap();
let mut login_input = store::get::<LoginInput>();
login_input.set_username(input.value());
}) as Box<dyn FnMut(_)>);
input
.add_event_listener_with_callback("input", &handler.as_ref().unchecked_ref())
.unwrap();
handler.forget();
});
password_label.set(|label: &HtmlElement| {
label.set_attribute("align", "right").unwrap();
label.set_inner_text("Password: ")
});
password_input
.set(|input: &HtmlElement| {
input.set_id("password");
input.set_attribute("type", "password").unwrap();
input.set_attribute("name", "password").unwrap();
input.set_attribute("placeholder", "password").unwrap();
})
.set(|input: &HtmlElement| {
let handler = Closure::wrap(Box::new(|e: Event| {
let input = e
.current_target()
.unwrap()
.dyn_into::<HtmlInputElement>()
.unwrap();
let mut login_input = store::get::<LoginInput>();
login_input.set_password(input.value());
}) as Box<dyn FnMut(_)>);
input
.add_event_listener_with_callback("input", &handler.as_ref().unchecked_ref())
.unwrap();
handler.forget();
});
submit_button_container.set(|container: &HtmlElement| {
container.set_attribute("colspan", "2").unwrap();
container.set_attribute("align", "center").unwrap();
});
submit_button.set(|button: &HtmlElement| {
button.set_inner_text("Submit");
button.set_attribute("type", "submit").unwrap();
});
let built_login_form = login_form
.set(|form: &HtmlElement| {
form.set_attribute("action", "http://localhost:7878/auth/login")
.unwrap();
form.set_attribute("method", "POST").unwrap();
})
.set(|form: &HtmlElement| {
let handler = Closure::wrap(Box::new(move |event: Event| {
event.prevent_default();
let _ = wasm_bindgen_futures::future_to_promise(async move {
login_component.handle_login().await;
Ok::<JsValue, JsValue>(JsValue::undefined())
});
}) as Box<dyn FnMut(_)>);
let _ = form
.add_event_listener_with_callback("submit", handler.as_ref().unchecked_ref());
handler.forget();
})
.child(
form_table
.child(
username_row
.child(username_label.build())
.child(username_container.child(username_input.build()).build())
.build(),
)
.child(
password_row
.child(password_label.build())
.child(password_container.child(password_input.build()).build())
.build(),
)
.child(
submit_button_row
.child(submit_button_container.child(submit_button.build()).build())
.build(),
)
.build(),
)
.build();
container.set_attribute("align", "center").unwrap();
container.append_child(&heading.build()).unwrap();
container.append_child(&built_login_form).unwrap();
container
}
}
This is where I’m actually making use of all that boilerplate that I had setup previously. It enables us to create HTML elements and setup event listeners and other attributes on the element. Probably should think about the structure.
I went ahead and created something similar to a view-model for keeping the business logic separate.
pub struct LoginInput {
pub username: String,
pub password: String,
}
impl LoginInput {
pub fn new(username: String, password: String) -> Self {
LoginInput { username, password }
}
pub fn set_username(&mut self, username: String) {
self.username = username;
}
pub fn set_password(&mut self, password: String) {
self.password = password;
}
}
impl Default for LoginInput {
fn default() -> Self {
LoginInput {
username: String::new(),
password: String::new(),
}
}
}
The final project structure looks something like this:
├── build.bat
├── build.sh
├── Cargo.lock
├── Cargo.toml
├── dist
│ ├── index.html
│ ├── index.js
│ └── pkg_index_js.index.js
├── index.html
├── index.js
├── package.json
├── package-lock.json
├── README.md
├── src
│ ├── components
│ │ ├── auth
│ │ │ ├── login.rs
│ │ │ └── mod.rs
│ │ ├── component.rs
│ │ ├── example.rs
│ │ ├── home.rs
│ │ └── mod.rs
│ ├── lib.rs
│ ├── models
│ │ ├── login_input.rs
│ │ ├── mod.rs
│ │ └── user.rs
│ ├── routers
│ │ ├── mod.rs
│ │ └── router.rs
│ ├── store.rs
│ └── utils
│ ├── api.rs
│ ├── mod.rs
│ └── storage.rs
└── webpack.config.js
Conclusion
Was this a practical way to build a web app? Probably not. Was it an incredible learning experience? Absolutely! This project helped me understand both Rust and frontend web development at a deeper level.
The next time someone asks “How do web frameworks work?”, I can confidently say “Let me tell you about the time I built one from scratch… in Rust… for fun.” And then watch their expression change from curiosity to concern.
P.S. If you’re thinking of trying this yourself, remember: with great power comes great responsibility… and a lot of compiler errors ;).
Repo: No Framework Frontend