Facade is a framework to rapidly add web-UI to any Rust program. It let enrich your console or server app with an awesome UI just in a matter of seconds.
Facade fuses web-server and WASM-based web-app into Rust program. No external files. No external dependencies. Just your binary.
To achieve that effect Facade uses Yew framework to build a universal UI and use WebSocket connection to interact with your app that supply live updates to UI that renders them reactively.
We reuse CSS components' styles from Vuetify project: https://github.com/vuetifyjs/vuetify
You can read the license of Vuetify here: https://github.com/vuetifyjs/vuetify/blob/master/LICENSE.md
Uses-cases of this framework are unlimited and include but are not limited to the following cases (checkbox list used to show layouts that implemented to make these cases possible):
- Dashboards
- Admin panels for server
- Installation wizards
- Logs explorers
- Business-intelligence panels
- Swagger-compatible API playgrounds
- Blockchain explorers
- Presentations (yeah, you can create presentations for Rust conferences with Rust soon)
- Polls and quizes
- Interactive docs
EXTRA: Mobile compatibility! It already works, but need flexible layouts.
You know that very hard to keep maintainance of the projects without external supports. Become a sponsor on Patreon to help us bring these cases faster.
Add a dependency to your Cargo.toml
file:
[dependencies]
facade = { git = "https://github.com/DenisKolodin/facade" }
We used git here since the framework is very fast changed yet.
Spawn a server in your main function and take a control object to declare UI and supply live updates to it.
let mut control = facade::main()?;
Create a scene and put it to Control
instance:
let page_one = Page(
"Page One",
"Live information",
Row(vec![
TitledPanel("Server Status", Dynamic("status")),
]),
);
let scene = Dashboard(
"My Dashboard",
vec![page_one],
);
control.scene(scene);
Now you can use Control
instance to send live updates to UI using unique IDs you used in UI declaration:
let mut counter = 0;
loop {
counter = 1;
control.assign("status", format!("Counter is {}", counter));
thread::sleep(Duration::from_millis(300));
}
And yeah, you supplied updates too fast in this example, but that's not a problem, because Facade accumulate updates before send them, overwrites changed values and send the latest update only.
Start and enjoy live updates by connecting to: http://localhost:12400 port (by default) with your favorite browser.
If you want to check it with your smartphone than set bind address to FACADE_ADDRESS=0.0.0.0
and connect
to the same port, but to IP address of your PC/Mac (both to avoid sexism).
You can also check ready to use example here.
You can use FACADE_
prefixed variables to control parameters of the Facade in your app. For example,
to change address or port you can use FACADE_ADDRESS
and FACADE_PORT
environment variables respectively.