yewstack / facade

Facade Framework - autogenerated embedded live dashboards for Rust apps

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.

facade's Issues

STATUS OF THE PROJECT

I've decided to split this project into two parts: Yewtify (https://github.com/yewstack/yewtify) and Facade (this project).
The former will contain all reusable components that we can use for any project. This project will use them later to render dashboards/views and let you to embed them into your apps.

Dashboard fails on the second click on the last menu item

Support TLS

Support certificates and consider a feature to generate one with Let's Encrypt.

Two-way WS interaction possibility?

Hi is it possible to have two-way interaction? Sendind some requests to backend?

Support multiple spaces (workspaces)

It would be great to have multiple spaces in the same app or have third-party spaces that can track/log something and has own visualization of that process.

Sadly broken due to versioning 😞

Current Rust 1.40 and the async features breaks compilation.

Also, whatever styles the submodule is importing from Vue is also broken so it might be best to just vendor the styles out.

I would be happy to give it a fix sometime in the next two weeks or so.

Custom compiling error

Cant figure out whats happening...
Compiling facade v0.1.0 (https://github.com/DenisKolodin/facade#0498b46c) error: failed to run custom build command forfacade v0.1.0 (https://github.com/DenisKolodin/facade#0498b46c)`

Caused by:
process didn't exit successfully: c:\dev\capitalist_bot_v5\target\debug\build\facade-b9a32e24080021bf\build-script-build (exit code: 1)
--- stderr
Compiling facade-ui v0.1.0 (C:\Users\serzh.cargo\git\checkouts\facade-ce9b2e419f186bdf\0498b46\ui)
error[E0432]: unresolved import yew::Properties
--> src\widgets\bind.rs:2:17
|
2 | use yew::{html, Properties};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\container.rs:3:17
|
3 | use yew::{html, Properties};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\control.rs:2:17
|
2 | use yew::{html, Properties};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\dashboard.rs:3:17
|
3 | use yew::{html, Properties, ShouldRender};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\dynamic.rs:4:17
|
4 | use yew::{html, Properties, ShouldRender};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\fixed.rs:3:17
|
3 | use yew::{html, Properties};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\layout.rs:3:17
|
3 | use yew::{html, Properties};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\list.rs:2:17
|
2 | use yew::{html, Properties};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\page.rs:3:17
|
3 | use yew::{html, Properties};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\panel.rs:2:17
|
2 | use yew::{html, Properties};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\scene.rs:4:17
|
4 | use yew::{html, Properties, ShouldRender};
| ^^^^^^^^^^ no Properties in the root

error[E0432]: unresolved import yew::Properties
--> src\widgets\widget.rs:3:60
|
3 | use yew::{Bridge, Bridged, Component, ComponentLink, Html, Properties, Renderable, ShouldRender};
| ^^^^^^^^^^ no Properties in the root

error: cannot determine resolution for the derive macro Properties
--> src\widgets\bind.rs:10:10
|
10 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\container.rs:11:10
|
11 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\control.rs:10:10
|
10 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\dashboard.rs:12:10
|
12 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\dynamic.rs:12:10
|
12 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\fixed.rs:11:10
|
11 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\layout.rs:11:10
|
11 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\list.rs:10:10
|
10 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\page.rs:11:10
|
11 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\panel.rs:10:10
|
10 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot determine resolution for the derive macro Properties
--> src\widgets\scene.rs:12:10
|
12 | #[derive(Properties, PartialEq, Clone)]
| ^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error[E0658]: the attribute props is currently unknown to the compiler and may have meaning added to it in the future
--> src\widgets\bind.rs:12:5
|
12 | #[props(required)]
| ^^^^^^^^^^^^^^^^^^
|
= note: for more information, see rust-lang/rust#29642
= help: add #![feature(custom_attribute)] to the crate attributes to enable

error[E0658]: the attribute props is currently unknown to the compiler and may have meaning added to it in the future
--> src\widgets\container.rs:13:5
|
13 | #[props(required)]
| ^^^^^^^^^^^^^^^^^^
|
= note: for more information, see rust-lang/rust#29642
= help: add #![feature(custom_attribute)] to the crate attributes to enable

error[E0658]: the attribute props is currently unknown to the compiler and may have meaning added to it in the future
--> src\widgets\control.rs:12:5
|
12 | #[props(required)]
| ^^^^^^^^^^^^^^^^^^
|
= note: for more information, see rust-lang/rust#29642
= help: add #![feature(custom_attribute)] to the crate attributes to enable

error[E0658]: the attribute props is currently unknown to the compiler and may have meaning added to it in the future
--> src\widgets\dashboard.rs:14:5
|
14 | #[props(required)]
| ^^^^^^^^^^^^^^^^^^
|
= note: for more information, see rust-lang/rust#29642
= help: add #![feature(custom_attribute)] to the crate attributes to enable

error[E0658]: the attribute props is currently unknown to the compiler and may have meaning added to it in the future
--> src\widgets\layout.rs:13:5
|
13 | #[props(required)]
| ^^^^^^^^^^^^^^^^^^
|
= note: for more information, see rust-lang/rust#29642
= help: add #![feature(custom_attribute)] to the crate attributes to enable

error[E0658]: the attribute props is currently unknown to the compiler and may have meaning added to it in the future
--> src\widgets\list.rs:12:5
|
12 | #[props(required)]
| ^^^^^^^^^^^^^^^^^^
|
= note: for more information, see rust-lang/rust#29642
= help: add #![feature(custom_attribute)] to the crate attributes to enable

error[E0658]: the attribute props is currently unknown to the compiler and may have meaning added to it in the future
--> src\widgets\page.rs:13:5
|
13 | #[props(required)]
| ^^^^^^^^^^^^^^^^^^
|
= note: for more information, see rust-lang/rust#29642
= help: add #![feature(custom_attribute)] to the crate attributes to enable

error[E0658]: the attribute props is currently unknown to the compiler and may have meaning added to it in the future
--> src\widgets\panel.rs:12:5
|
12 | #[props(required)]
| ^^^^^^^^^^^^^^^^^^
|
= note: for more information, see rust-lang/rust#29642
= help: add #![feature(custom_attribute)] to the crate attributes to enable

error: aborting due to 31 previous errors
Some errors have detailed explanations: E0432, E0658.
For more information about an error, try rustc --explain E0432.
error: Could not compile facade-ui.

To learn more, run the command again with --verbose.
error: build failed

Error: ErrorMessage { msg: "Can't compile UI" }`