Valerie
Rust front-end framework for building web apps.
Valerie is still in a very early phase. A lot of features are not available at the moment. A lot of work is left and you are welcome to try it out.
- No Virtual DOM.
- UI can be made in a simple manner, by following an MVVM architecture rather an MVC architecture.
- Use state variables to update the UI where required.
- Written without any unsafe code.
Architecture
- Every UI element has to implement the
Componenttrait. - A page is a function which returns a
Node. - Two type of State variables
StateAtomicfor types implementingCopy.StateMutexfor types implementingClone.
Setting up
- Run
cargo new --lib some_name - Add
valerieto the dependencies - Create a
staticdirectory and create anindex.htmlinside it
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script type="module">
import init from "./wasm.js"
init()
</script>
</head>
<body></body>
</html>- Also in the
Cargo.tomlenable lto.
[profile.release]
lto = true
opt-level = 3- Compile it using
wasm-packby runningwasm-pack build --target web --out-name wasm --out-dir ./static - Use some server, like
miniserve, to host the./staticfolder and try it out.
Take a look at wasm-pack docs for more options.
Examples
Hello world
use valerie::prelude::components::*;
use valerie::prelude::*;
fn ui() -> Node {
h1!("Hello World").into()
}
#[valerie(start)]
pub fn run() {
App::render_single(ui());
}Add and Subtract one using a Button
use valerie::prelude::components::*;
use valerie::prelude::*;
fn ui() -> Node {
let value = StateAtomic::new(0isize);
div!(
h1!("Value ", value.clone()),
button!("Add 1")
.on_event("click", value.clone(), move |x, _| {
*x += 1;
}),
button!("Subtract 1")
.on_event("click", value.clone(), move |x, _| {
*x -= 1;
})
)
.into()
}
#[valerie(start)]
pub fn run() {
App::render_single(ui());
}Time Counter
use valerie::prelude::components::*;
use valerie::prelude::*;
use wasm_timer::Delay;
fn ui() -> web_sys::Node {
let timer = StateAtomic::new(0);
execute(time(1, timer.clone()));
p!("Seconds passed: ", timer).into()
}
async fn time(n: u64, mut timer: StateAtomic<usize>) {
while Delay::new(core::time::Duration::from_secs(n))
.await
.is_ok() {
timer += 1;
}
}
#[valerie(start)]
pub fn run() {
App::render_single(ui());
}There are more examples in the examples directory.
Missing features
- Library support for CSS.
- Using States for CSS.
- Routing and multi-page support.
- Global Variables for Multiple Pages.
Issues and Contributing
Pick out some issues and start contributing. Our contribution guidelines are available here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent