Skip to content
Facade Framework - autogenerated embedded live dashboards for Rust apps
Rust CSS HTML
Branch: master
Clone or download
Latest commit 3d1b906 Sep 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/baseline Update dependencies Sep 22, 2019
protocol Move Footer to a separate widget module Aug 19, 2019
src Update dependencies Sep 22, 2019
ui Update dependencies Sep 22, 2019
.gitignore Replace less with sass embedded compiler Aug 11, 2019
.gitmodules Add Vuetify as a submodule Aug 17, 2019
Cargo.toml Update dependencies Sep 22, 2019
README.md Add Vuetify as a submodule Aug 17, 2019
build.rs Refactor errors Aug 11, 2019

README.md

Facade

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.

Vuetify relations

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

Use-cases

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.

How to use

Add dependency

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

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()?;

Declare UI

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);

Send live data

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.

Tuning

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.

You can’t perform that action at this time.