How to Build Web Applications Using Sauron

Welcome to the fascinating world of Sauron! This versatile web framework allows you to create both client-side and server-side web applications with ease, emphasizing simplicity and elegance. With Sauron, you can focus more on your business logic rather than getting tangled in the complexities of the framework. In this blog, we’ll walk through the steps of building a simple counter application to showcase Sauron’s capabilities.

Understanding the Basics

In Sauron, you only need to deal with three main components:

• Model: This represents your application’s state.
• View: This component describes how to present the model to the user.
• Update: This function describes how to modify the model based on user inputs.

Building a Counter Application

Let’s illustrate Sauron’s structure by using an analogy. Imagine Sauron as a well-organized kitchen where:

• The model is like the recipe book containing your dish (application) details, such as ingredients and their quantities (state).
• The view is the beautifully plated dish that is presented to the guests (users) so they can enjoy.
• The update function is like the chef adjusting the recipe based on feedback from the gathering (user inputs), making sure that the food is always to taste.

Creating Your Application

Follow these steps to create your counter application:

1. Setup Your Project

Start by creating a new Rust project using Cargo. Inside your project setup, specify the crate type in Cargo.toml as follows:

[package]
name = "counter"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"]

[dependencies]
sauron = "0.6.1"

2. Writing the Code

Next, create a source file src/lib.rs and write the following code:

use sauron::{
    html::{text, units::px, jss, node, wasm_bindgen, Application, Cmd, Node, Program},
    Msg,
};

enum Msg {
    Increment,
    Decrement,
    Reset,
}

struct App {
    count: i32,
}

impl App {
    fn new() -> Self {
        App { count: 0 }
    }
}

impl Application for App {
    type MSG = Msg;

    fn view(self) -> Node {
        node! {
            

                 Msg::Increment />
                 Msg::Reset>{text(self.count)}
                 Msg::Decrement />
            
        }
    }

    fn update(mut self, msg: Msg) -> Cmd {
        match msg {
            Msg::Increment => self.count += 1,
            Msg::Decrement => self.count -= 1,
            Msg::Reset => self.count = 0,
        }
        Cmd::none()
    }

    fn stylesheet() -> Vec {
        vec![jss! {
            body: {
                font_family: "verdana, arial, monospace",
            },
            main: {
                width: px(300),
                height: px(100),
                margin: auto,
                text_align: center,
            },
            input, .count: {
                font_size: px(40),
                padding: px(30),
                margin: px(30),
            },
        }]
    }
}

#[wasm_bindgen(start)]
pub fn start() {
    Program::mount_to_body(App::new());
}

3. Create the HTML File

Next, create an index.html file to load your application:

!DOCTYPE html


    
    
    

4. Installing Prerequisites

Run the following commands to install necessary tools:

sh
cargo install wasm-pack
cargo install basic-http-server

5. Build and Serve

Now, build and serve your application using:

sh
wasm-pack build --target web --release
basic-http-server -a 0.0.0.0:4000

Finally, navigate to http://localhost:4000 to view your running application.

Troubleshooting

If you encounter issues while following this guide, here are some troubleshooting tips:

• Make sure Rust and Cargo are correctly installed.
• Check your Cargo.toml and ensure that the dependencies are properly listed.
• If you face build errors, verify your Rust code for any syntax mistakes.
• For any unexplained runtime errors, consider clearing your build cache or reinstalling dependencies.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Explore More Examples

To see more examples of applications built with Sauron, check out the following:

• todovm – Todo MVC Example
• data-viewer – CSV Data Viewer
• svg-clock – SVG Clock
• ultron code-editor – Web-based Text Editor
• hackernews-sauron – Hacker News Clone

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.