sauron

Guide

Sauron is an web framework for creating fast and interactive client side web application, as well as server-side rendering for back-end web applications.

Example

use log::trace;
use sauron::html::attributes::attr;
use sauron::html::text;
use sauron::prelude::*;
use sauron::{Cmd, Component, Node, Program};

#[derive(Debug)]
pub enum Msg {
    Click,
}

pub struct App {
    click_count: u32,
}

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

impl Component<Msg> for App {
    fn view(&self) -> Node<Msg> {
        node! {
            <main>
                <h1>"Minimal example"</h1>
                <div class="some-class" id="some-id" {attr("data-id", 1)}>
                    <input class="client"
                            type="button"
                            value="Click me!"
                            key=1
                            on_click={|_| {
                                trace!("Button is clicked");
                                Msg::Click
                            }}
                    />
                    <div>{text(format!("Clicked: {}", self.click_count))}</div>
                    <input type="text" value={self.click_count}/>
                </div>
            </main>
        }
    }

    fn update(&mut self, msg: Msg) -> Cmd<Self, Msg> {
        trace!("App is updating with msg: {:?}", msg);
        match msg {
            Msg::Click => self.click_count += 1,
        }
        Cmd::none()
    }
}

#[wasm_bindgen(start)]
pub fn main() {
    console_log::init_with_level(log::Level::Trace).unwrap();
    console_error_panic_hook::set_once();
    Program::mount_to_body(App::new());
}

index.html

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <title>Minimal sauron app</title>
  </head>
  <body>
    <script type=module>
        import init from './pkg/minimal.js';
        init().catch(console.error);
    </script>
  </body>
</html>

In Cargo.toml, specify the crate-type to be cdylib


[package]
name = "minimal"
version = "0.1.0"
edition = "2018"

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


[dependencies]
sauron = "0.36"
console_error_panic_hook = "0.1"
log = "0.4"
console_log = "0.2"

Build using

$> wasm-pack build --target web --release

Look at the examples and the build script for the details.

Demo examples

todomvc The todomvc example
futuristic-ui - A demo of futuristic-ui showcasing animation, transition and timed Component update.
data-viewer - A resizable spreadsheet CSV data viewer
svg-clock - A clock drawn using SVG and window tick event.
svg-graph - A simple graph using SVG
ultron code-editor - A web-base text-editor with syntax highlighting

Converting HTML into Sauron's syntax

html2sauron - A tool to easily convert html into sauron node tree for your views.

Prerequisite:

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

Performance:

Sauron is one of the fastest.

Benchmark

Run the benchmark yourself:

Benchmark 1 Benchmark 2

Please support this project:

License: MIT

sauron 0.36.0