mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 06:34:20 +00:00
docs: add a roadmap
This commit is contained in:
Jonathan Kelley
parent
1560e2daca
commit
baf722de11
4 changed files with 140 additions and 8 deletions
2
.vscode/spellright.dict
vendored
2
.vscode/spellright.dict
vendored
|
|
@ -69,3 +69,5 @@ Jank
|
||||||
noderef
|
noderef
|
||||||
reborrow
|
reborrow
|
||||||
VirtualDoms
|
VirtualDoms
|
||||||
|
bootstrapper
|
||||||
|
WebkitGtk
|
||||||
|
|
|
||||||
114
docs/guide/src/ROADMAP.md
Normal file
114
docs/guide/src/ROADMAP.md
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
# Roadmap & Feature-set
|
||||||
|
|
||||||
|
Before we dive into Dioxus, feel free to take a look at our feature set and roadmap to see if what Dioxus can do today works for you.
|
||||||
|
|
||||||
|
If a feature that you need doesn't exist or you want to contribute to projects on the roadmap, feel free to get involved by [joining the discord](https://discord.gg/XgGxMSkvUM).
|
||||||
|
|
||||||
|
Generally, here's the status of each platform:
|
||||||
|
|
||||||
|
- **Web**: Dioxus is a great choice for pure web-apps - especially for CRUD/complex apps. However, it does lack the ecosystem of React, so you might be missing a component library or some useful hook.
|
||||||
|
|
||||||
|
- **SSR**: Dioxus is a great choice for pre-rendering, hydration, and rendering HTML on a web endpoint. Be warned - the VirtualDom is not (currently) `Send + Sync`.
|
||||||
|
|
||||||
|
- **Desktop**: You can build very competent single-window desktop apps right now. However, multi-window apps require support from Dioxus core and are not ready.
|
||||||
|
|
||||||
|
- **Mobile**: Mobile support is very young. You'll be figuring things out as you go and there are not many support crates for peripherals.
|
||||||
|
|
||||||
|
- **LiveView**: LiveView support is very young. You'll be figuring things out as you go. Thankfully, none of it is too hard and any work can be upstreamed into Dioxus.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
---
|
||||||
|
|
||||||
|
| Feature | Status | Description |
|
||||||
|
| ------------------------- | ------ | -------------------------------------------------------------------- |
|
||||||
|
| 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 |
|
||||||
|
| Integrated error handling | ✅ | Gracefully handle errors with ? syntax |
|
||||||
|
| NodeRef | ✅ | gain direct access to nodes |
|
||||||
|
| Re-hydration | ✅ | Pre-render to HTML to speed up first contentful paint |
|
||||||
|
| Jank-Free Rendering | ✅ | Large diffs are segmented across frames for silky-smooth transitions |
|
||||||
|
| Effects | ✅ | Run effects after a component has been committed to render |
|
||||||
|
| Portals | 🛠 | Render nodes outside of the traditional tree structure |
|
||||||
|
| Cooperative Scheduling | 🛠 | Prioritize important events over non-important events |
|
||||||
|
| Server Components | 🛠 | Hybrid components for SPA and Server |
|
||||||
|
| Bundle Splitting | 👀 | Efficiently and asynchronously load the app |
|
||||||
|
| Lazy Components | 👀 | Dynamically load the new components as the page is loaded |
|
||||||
|
| 1st class global state | ✅ | redux/recoil/mobx on top of context |
|
||||||
|
| Runs natively | ✅ | runs as a portable binary w/o a runtime (Node) |
|
||||||
|
| Subtree Memoization | ✅ | skip diffing static element subtrees |
|
||||||
|
| High-efficiency templates | 🛠 | rsx! calls are translated to templates on the DOM's side |
|
||||||
|
| 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 |
|
||||||
|
|
||||||
|
- ✅ = implemented and working
|
||||||
|
- 🛠 = actively being worked on
|
||||||
|
- 👀 = not yet implemented or being worked on
|
||||||
|
- ❓ = not sure if will or can implement
|
||||||
|
|
||||||
|
|
||||||
|
## Roadmap
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Core:
|
||||||
|
- [x] Release of Dioxus Core
|
||||||
|
- [x] Upgrade documentation to include more theory and be more comprehensive
|
||||||
|
- [ ] Support for HTML-side templates for lightning-fast dom manipulation
|
||||||
|
- [ ] Support for multiple renderers for same virtualdom (subtrees)
|
||||||
|
- [ ] Support for ThreadSafe (Send + Sync)
|
||||||
|
- [ ] Support for Portals
|
||||||
|
|
||||||
|
SSR
|
||||||
|
- [x] SSR Support + Hydration
|
||||||
|
- [ ] Integrated suspense support for SSR
|
||||||
|
|
||||||
|
Desktop
|
||||||
|
- [ ] Declarative window management
|
||||||
|
- [ ] Templates for building/bundling
|
||||||
|
- [ ] Fully native renderer
|
||||||
|
- [ ] Access to Canvas/WebGL context natively
|
||||||
|
|
||||||
|
Mobile
|
||||||
|
- [ ] Mobile standard library
|
||||||
|
- [ ] GPS
|
||||||
|
- [ ] Camera
|
||||||
|
- [ ] filesystem
|
||||||
|
- [ ] Biometrics
|
||||||
|
- [ ] WiFi
|
||||||
|
- [ ] Bluetooth
|
||||||
|
- [ ] Notifications
|
||||||
|
- [ ] Clipboard
|
||||||
|
- [ ]
|
||||||
|
|
||||||
|
Bundling (CLI)
|
||||||
|
- [x] translation from HTML into RSX
|
||||||
|
- [ ] dev server
|
||||||
|
- [ ] live reload
|
||||||
|
- [ ] translation from JSX into RSX
|
||||||
|
- [ ] hot module replacement
|
||||||
|
- [ ] code splitting
|
||||||
|
- [ ] asset macros
|
||||||
|
- [ ] css pipeline
|
||||||
|
- [ ] image pipeline
|
||||||
|
|
||||||
|
Essential hooks
|
||||||
|
- [ ] Router
|
||||||
|
- [ ] Global state management
|
||||||
|
- [ ] Resize observer
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
# Summary
|
# Summary
|
||||||
|
|
||||||
- [Introduction](README.md)
|
- [Introduction](README.md)
|
||||||
|
- [Roadmap](ROADMAP.md)
|
||||||
- [Getting Setup](setup.md)
|
- [Getting Setup](setup.md)
|
||||||
- [Hello, World!](hello_world.md)
|
- [Hello, World!](hello_world.md)
|
||||||
- [Describing the UI](elements/index.md)
|
- [Describing the UI](elements/index.md)
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ Dioxus requires a few main things to get up and running:
|
||||||
|
|
||||||
Dioxus integrates very well with the Rust-Analyzer IDE plugin which will provide appropriate syntax highlighting, code navigation, folding, and more.
|
Dioxus integrates very well with the Rust-Analyzer IDE plugin which will provide appropriate syntax highlighting, code navigation, folding, and more.
|
||||||
|
|
||||||
### Installing Rust
|
## Installing Rust
|
||||||
|
|
||||||
Head over to [https://rust-lang.org](http://rust-lang.org) and install the Rust compiler.
|
Head over to [https://rust-lang.org](http://rust-lang.org) and install the Rust compiler.
|
||||||
|
|
||||||
|
|
@ -30,24 +30,39 @@ Once installed, make sure to install wasm32-unknown-unknown as a target if you'
|
||||||
rustup target add wasm32-unknown-unknown
|
rustup target add wasm32-unknown-unknown
|
||||||
```
|
```
|
||||||
|
|
||||||
### Platform-Specific Dependencies
|
## Platform-Specific Dependencies
|
||||||
|
|
||||||
If you are running a modern, mainstream operating system, you should need no additional setup to build WebView-based Desktop apps. However, if you are running an older version of Windows or a flavor of linux with no default web rendering engine, you might need to install some additional dependencies.
|
If you are running a modern, mainstream operating system, you should need no additional setup to build WebView-based Desktop apps. However, if you are running an older version of Windows or a flavor of linux with no default web rendering engine, you might need to install some additional dependencies.
|
||||||
|
|
||||||
For windows users: download the [bootstrapper for Webview2 from Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/webview2/)
|
|
||||||
|
|
||||||
For linux users, we need the development libraries for libgtk.
|
### Windows
|
||||||
|
|
||||||
````
|
Windows Desktop apps depend on WebView2 - a library which should be installed in all modern Windows distributions. If you have Edge installed, then Dioxus will work fine. If you *don't* have Webview2, [then you can install it through Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/webview2/). MS provides 3 options:
|
||||||
|
|
||||||
|
- 1) A tiny "evergreen" *bootstrapper* which will fetch an installer from Microsoft's CDN
|
||||||
|
- 2) A tiny *installer* which will fetch Webview2 from Microsoft's CDN
|
||||||
|
- 3) A statically linked version of Webview2 in your final binary for offline users
|
||||||
|
|
||||||
|
For development purposes, use Option 1.
|
||||||
|
|
||||||
|
### Linux
|
||||||
|
|
||||||
|
Webview Linux apps require WebkitGtk. When distributing, this can be part of your dependency tree in your `.rpm` or `.deb`. However, it's very likely that your users will already have WebkitGtk.
|
||||||
|
|
||||||
|
```
|
||||||
sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libappindicator3-dev
|
sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libappindicator3-dev
|
||||||
```
|
```
|
||||||
|
|
||||||
When distributing onto older Windows platforms or less-mainstream
|
|
||||||
|
If you run into issues, make sure you have all the basics installed, as outlined in the [Tauri docs](https://tauri.studio/en/docs/get-started/setup-linux).
|
||||||
|
|
||||||
|
|
||||||
|
### macOS
|
||||||
|
|
||||||
|
Currently - everything for macOS is built right in! However, you might run into an issue if you're using nightly Rust due to some permissions issues in our Tao dependency (which have been resolved but not published).
|
||||||
|
|
||||||
|
|
||||||
### Dioxus-CLI for dev server, bundling, etc.
|
## Dioxus-CLI for dev server, bundling, etc.
|
||||||
|
|
||||||
We also recommend installing the Dioxus CLI. The Dioxus CLI automates building and packaging for various targets and integrates with simulators, development servers, and app deployment. To install the CLI, you'll need cargo (should be automatically installed with Rust):
|
We also recommend installing the Dioxus CLI. The Dioxus CLI automates building and packaging for various targets and integrates with simulators, development servers, and app deployment. To install the CLI, you'll need cargo (should be automatically installed with Rust):
|
||||||
|
|
||||||
|
|
@ -63,7 +78,7 @@ $ cargo install --force dioxus-cli
|
||||||
|
|
||||||
We provide this 1st-party tool to save you from having to run potentially untrusted code every time you add a crate to your project - as is standard in the NPM ecosystem.
|
We provide this 1st-party tool to save you from having to run potentially untrusted code every time you add a crate to your project - as is standard in the NPM ecosystem.
|
||||||
|
|
||||||
### Suggested extensions
|
## Suggested extensions
|
||||||
|
|
||||||
If you want to keep your traditional `npm install XXX` workflow for adding packages, you might want to install `cargo-edit` and a few other fun `cargo` extensions:
|
If you want to keep your traditional `npm install XXX` workflow for adding packages, you might want to install `cargo-edit` and a few other fun `cargo` extensions:
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue