No description
Find a file
2021-07-16 00:27:06 -04:00
.vscode feat: architecture document and edit list 2021-07-14 17:04:58 -04:00
docs wip: docs, html! macro, more 2021-07-16 00:27:06 -04:00
examples wip: docs, html! macro, more 2021-07-16 00:27:06 -04:00
notes feat: more suspended nodes! 2021-07-14 23:18:02 -04:00
packages wip: docs, html! macro, more 2021-07-16 00:27:06 -04:00
src wip: docs, html! macro, more 2021-07-16 00:27:06 -04:00
.gitignore chore: tweak gitignore to hide unnecessary vscode files 2021-06-16 11:27:10 -04:00
Cargo.toml wip: docs, html! macro, more 2021-07-16 00:27:06 -04:00
LICENSE Feat: wire up a very basic dom updater 2021-02-14 23:39:46 -05:00
README.md wip: fix styling for ssr 2021-07-15 11:06:52 -04:00
wip.md wip: docs, html! macro, more 2021-07-16 00:27:06 -04:00

🌗🚀 Dioxus

Frontend that scales.


Dioxus is a portable, performant, and ergonomic framework for building cross-platform user experiences in Rust.

fn App(cx: Context<()>) -> VNode {
    let mut count = use_state(cx, || 0);

    cx.render(rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    })
};

Dioxus can be used to deliver webapps, desktop apps, static pages, liveview apps, eventually mobile apps (WIP), and more. At its core, Dioxus is entirely renderer agnostic and has great documentation for creating new renderers for any platform.

If you know React, then you already know Dioxus.

Things you'll love ❤️:

  • Ergonomic design
  • Minimal boilerplate
  • Simple build, test, and deploy
  • Compile-time correct templating
  • Support for fine-grained reactivity
  • Support for html! and rsx! templates
  • SSR, WASM, desktop, and mobile support
  • Support for asynchronous batched rendering
  • Powerful and simple integrated state management
  • Rust! (enums, static types, modules, efficiency)

Unique features:

  • Incredible inline documentation. Supports hover and guides for all HTML elements, listeners, and events.
  • Templates are "constified" at compile time. Nodes that don't change will won't be diffed.
  • Custom bump-allocator backing for all components. Nearly 0 allocations for steady-state components.
  • Starting a new app takes zero templates or special tools - get a new app running in just seconds.
  • Desktop apps running natively (no Electron!) in less than 10 lines of code.
  • The most ergonomic and powerful state management of any Rust UI toolkit.
  • And more! Read the full release post here.

Get Started with...

Web Desktop Mobile State Docs Tools

Explore

Blog Posts

  • Why we need a stronger typed web
  • Isomorphic webapps in 10 minutes
  • Rust is high level too
  • Eliminating crashes with Rust webapps
  • Tailwind for Dioxus
  • The monoglot startup

Why?

TypeScript is a great addition to JavaScript, but comes with a lot of tweaking flags, a slight performance hit, and an uneven ecosystem where some of the most important packages are not properly typed. TypeScript provides a lot of great benefits to JS projects, but comes with its own "tax" that can slow down dev teams. Rust can be seen as a step up from TypeScript, supporting:

  • static types for all libraries
  • advanced pattern matching
  • immutability by default
  • clean, composable iterators
  • a good module system
  • integrated documentation
  • inline built-in unit/integration testing
  • best-in-class error handling
  • simple and fast build system (compared to webpack!)
  • powerful standard library (no need for lodash or underscore)
  • include_str! for integrating html/css/svg templates directly
  • various macros (html!, rsx!) for fast template iteration

And much more. Dioxus makes Rust apps just as fast to write as React apps, but affords more robustness, giving your frontend team greater confidence in making big changes in shorter time. Dioxus also works on the server, on the web, on mobile, on desktop - and it runs completely natively so performance is never an issue.

Parity with React

Dioxus is heavily inspired by React, but we want your transition to feel like an upgrade. Dioxus is most of the way there, but missing a few key features. This parity table does not necessarily include important ecosystem crates like code blocks, markdown, resizing hooks, etc.

Phase 1: The Basics

Feature Dioxus React Notes for Dioxus
Conditional Rendering if/then to hide/show component
Map, Iterator map/filter/reduce to produce rsx!
Keyed Components advanced diffing with keys
Web renderer for web browser
Desktop (webview) renderer for desktop
Shared State (Context) share state through the tree
Hooks memory cells in components
SSR render directly to string
Component Children cx.children() as a list of nodes
Headless components components that don't return real elements
Fragments multiple elements without a real root
Manual Props Manually pass in props with spread syntax
Controlled Inputs stateful wrappers around inputs
CSS/Inline Styles syntax for inline styles/attribute groups
Custom elements Define new element primitives
Suspense schedule future render from future/promise
Effects 🛠 Run effects after a component has been committed to render
Cooperative Scheduling 🛠 Prioritize important events over non-important events
NodeRef 🛠 gain direct access to nodes [1]
Runs natively runs as a portable binary w/o a runtime (Node)
1st class global state redux/recoil/mobx on top of context
Subtree Memoization skip diffing static element subtrees
Compile-time correct Throw errors on invalid template layouts
Heuristic Engine 🛠 track component memory usage to minimize future allocations
Fine-grained reactivity 🛠 Skip diffing for fine-grain updates
  • [1] Currently blocked until we figure out a cross-platform way of exposing an imperative Node API.

Phase 2: Advanced Toolkits

Feature Dioxus React Notes for Dioxus
1st class router 👀 Hook built on top of history
Assets 👀 include css/svg/img url statically
Integrated classnames 🛠 built-in classnames
Transition 👀 🛠 High-level control over suspense
Animation 👀 Spring-style animations
Native Mobile 👀 Render with cacao
Native Desktop 👀 Render with native desktop
3D Renderer 👀 react-three-fiber

Phase 3: Additional Complexity

Feature Dioxus React Notes for Dioxus
Portal cast elements through tree
Error/Panic boundary catch panics and display custom BSOD
Code-splitting 👀 Make bundle smaller/lazy
LiveView 👀 Example for SSR + WASM apps
  • = implemented and working
  • 🛠 = actively being worked on
  • 👀 = not yet implemented or being worked on
  • = not sure if will or can implement