5.5 KiB
🌗🚀 Dioxus
Frontend that scales.
Dioxus is a portable, performant, and ergonomic framework for building cross-platform user experiences in Rust.
static Example: FC<()> = |ctx, props| {
let selection = use_state(&ctx, || "...?");
ctx.render(rsx! {
div {
h1 { "Hello, {selection}" }
button { "?", onclick: move |_| selection.set("world!")}
button { "?", onclick: move |_| selection.set("Dioxus 🎉")}
}
})
};
Dioxus can be used to deliver webapps, desktop apps, static pages, liveview apps, Android apps, iOS Apps, and more. At its core, Dioxus is entirely renderer agnostic and has great documentation for creating new renderers for any platform.
Things you'll love ❤️:
- Ergonomic design
- Minimal boilerplate
- Simple build, test, and deploy
- Support for html! and rsx! templating
- SSR, WASM, desktop, and mobile support
- Rust! (enums, static types, modules, efficiency)
Get Started with...
| WebApps | Desktop | Mobile | State Management | Docs | Tools |
|---|---|---|---|---|---|
Explore
- HTML Templates: Drop in existing HTML5 templates with html! macro
- RSX Templates: Clean component design with rsx! macro
- Running the examples: Explore the vast collection of samples, tutorials, and demos
- Building applications: Use the Dioxus CLI to build and bundle apps for various platforms
- Liveview: Build custom liveview components that simplify datafetching on all platforms
- State management: Easily add powerful state management that comes integrated with Dioxus Core
- Concurrency: Drop in async where it fits and suspend components until new data is ready
- 1st party hooks: Cross-platform router hook
- Community hooks: 3D renderers
Why?
CRUD applications are more complex than ever, requiring knowledge of multiple programming languages on top of annoying build systems and opinionated frameworks. Most JavaScript solutions require libraries to patch core language limitations like Immer for immutable state and TypeScript for static typing.
Certainly, there has to be a better way. Dioxus was made specifically to bring order to this complex ecosystem, taking advantage of immutability-by-default, algebraic datatypes, and efficiency of the Rust programming language. Because Rust runs in both the browser and the server, we can finally write isomoprhic applications that run everywhere, bind to native libraries, and scale well.
Don't be scared of the learning curve - the type of code needed to power a webapp is fairly simple. Diouxs opts to use unsafe (but miri tested!) code to expose an ergonomic API that requires understanding of very few Rust concepts to build a powerful webapp. In many cases, Rust code will end up simpler than JavaScript through the use of immutability, ADTs, and a powerful iterator system that doesn't require annoying "hacks" like Object.fromEntries.
Liveview?
Liveview is an architecture for building web applications where the final page is generated through 3 methods:
- Statically render the bundle.
- Hydrate the bundle to add dynamic functionality.
- Link individual components to the webserver with websockets.
In other frameworks, the DOM will be updated after events from the page are sent to the server and new html is generated. The html is then sent back to the page over websockets (ie html over websockets).
In Dioxus, the user's bundle will link individual components on the page to the Liveview server. This ensures local events propogate through the page virtual dom if the server is not needed, keeping interactive latency low. This ensures the server load stays low, enablinmg a single server to handle tens of thousands of simultaneous clients.