#front-end #web-front-end #web #web-framework #dom #html

hirola

Hirola is an un-opinionated web framework that is focused on simplicity and predictability

14 unstable releases (3 breaking)

0.4.0 Dec 28, 2023
0.3.1 Aug 31, 2023
0.3.0-alpha.0 Jul 19, 2023
0.2.0 Oct 1, 2022
0.1.3-alpha.0 Dec 30, 2020

#2020 in Web programming

Download history 1/week @ 2024-09-17 12/week @ 2024-09-24

76 downloads per month
Used in edita

MIT/Apache

81KB
1.5K SLoC

Hirola

Latest Version Browser Tests Unit Tests MIT licensed

Hirola is a declarative frontend framework that is focused on simplicity and reactivity.

Goals

  1. KISS: A simple and declarative way to build frontend UIs in rust.
  2. Make it easy to read, extend and share code.
  3. Frp signals allowing fine-grained reactivity.
  4. Familiarity: Uses rsx which is very similar to jsx.

Example

We are going to create a simple counter program.

cargo new counter

With a new project, we need to create an index file which is the entry point and required by trunk

cd counter

Create an index.html in the root of counter. Add the contents below

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hirola Counter</title>
  </head>
  <body></body>
</html>

Lets add some code to src/main.rs

use hirola::prelude::*;
use hirola::dom::*;

fn counter() -> Dom {
    let count = Mutable::new(0i32);
    let decrement = count.callback(|s| *s.lock_mut() -= 1);
    let increment = count.callback(|s| *s.lock_mut() += 1);
    html! {
        <>
            <button on:click=decrement>"-"</button>
            <span>{count}</span>
            <button on:click=increment>"+"</button>
        </>
    }
}
fn main() {
    hirola::dom::mount(counter()).unwrap();
}

Now lets run our project

trunk serve

Ecosystem

Check out Hirola Docs written with Hirola itself!

Here are some extensions for hirola:

  1. Form
  2. Router
  3. State
  4. Markdown

Milestones

Status Goal Labels
Basic templating with rust and rsx ready
Extend functionality with mixins ready
Components ready
SSR ready
Signals ready
🚧 Form management started
Markdown templating pending
🚧 Styling started
SSG pending

Dependencies

~1.7–5MB
~93K SLoC