#declarative-ui #dioxus #cross-platform #ecs #bevy #ecs-architecture #ui-framework

bevy_dioxus

Write cross-platform application with React-like declarative UI framework and scalable ECS architecture all in Rust

2 releases

0.1.1 Jul 14, 2022
0.1.0 May 22, 2022

#1521 in Game dev


Used in bevy_dioxus_desktop

MIT/Apache

1.5MB
564 lines

bevy_dioxus

Dioxus Plugin for Bevy

Write cross-platform application with React-like declarative UI framework
and scalable ECS architecture all in Rust.


WARNING: bevy_dioxus is still in the very early stages of development.

use bevy::prelude::*;
use bevy_dioxus::desktop::prelude::*;
use dioxus::prelude::*;

fn main() {
    App::new()
        .insert_resource(WindowDescriptor {
            title: "Bevy Dioxus Plugin Example".to_string(),
            ..Default::default()
        })
        .add_plugin(DioxusPlugin::<EmptyGlobalState, (), ()>::new(Root))
        .run();
}

fn Root(cx: Scope) -> Element {
    cx.render(rsx! {
        h1 { "Hello, World !" }
    })
}

About Dioxus and Bevy

Dioxus

Dioxus is a cross-platform declarative UI framework. It provides familiar features that React developer expects such as component, state, props, hooks, global state, and router. If you familiar with any modern state driven UI framework, you should be able to read or write Dioxus components without knowing Rust.

Bevy

Bevy is a cutting-edge game engine in Rust based on Entity Component System(ECS) design pattern. Think of it as a global state management tool like Redux but much more performant because all systems will run concurrently as much as possible. Thanks to its plugin system, there's already a handlfull of third-party Bevy plugins out there. Imagine implemnenting core logic as CorePlugin seperated from UI layer. You may start with bevy_dioxus to build desektop application. Then let's say you want to release a metaverse edition at some point in the future, it's as simple as swapping UI plugin to Bevy's 3d rendering plugin while still using the same CorePlugin.

Try examples

Make sure to install all prerequisites for Tauri. Prerequisites

gh repo clone JunichiSugiura/bevy_dioxus
cd bevy_dioxus

cargo run --example counter

More examples can be found in examples/ directory.

Development

Prerequisites

General

  • Tauri prerequisites
  • convco: Conventional commits, changelog, versioning, validation
    cargo install convco
    # or
    brew install convco/formulae/convco
    
  • cargo-workspaces: A tool for managing cargo workspaces and their crates, inspired by lerna
    cargo install cargo-workspaces
    

Website

  • Zola: A fast static site generator in a single binary with everything built-in.
    brew install zola
    
  • Node.js: To install Tailwind CSS

API Reference

  • cargo-watch: Watches over your Cargo project's source.
    cargo install cargo-watch
    

Run

Examples

# Build
cargo build --examples

# or Run
cargo run --example counter

Website

# Install dependencies
npm i

# Serve locally
zola -r packages/website serve --drafts

# Watch Tailwind CSS
npm run watch

# or build
npm run build

API Reference

# Serve doc locally
cargo doc --open --no-deps

# Watch file changes and serve doc locally
cargo watch -s 'cargo doc && http target/doc'

Conventions

Branch name example

git checkout -b docs/#20-guide-website

Conventional Commits

Make sure to use convco commit instead of git commit when it should be noted in changelog. git-cliff will automatically generates changelog on conventional-commit message that convco produces.

convco commit

Dependencies

~24–69MB
~1M SLoC