You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -161,11 +161,11 @@ Dioxus is heavily inspired by React, but we want your transition to feel like an
161
161
Remember: Dioxus is a library - not a compiler like Svelte. Plus, the inner VirtualDOM allows Dioxus to easily port into different runtimes, support SSR, and run remotely in the cloud. VDOMs tend to more ergonomic to work with and feel roughly like natural Rust code. The overhead of Dioxus is **extraordinarily** minimal... sure, there may be some overhead but on an order of magnitude lower than the time required to actually update the page.
162
162
163
163
164
-
### Isn't the overhead for interacting with the DOM from WASM too much?
165
-
The overhead layer between WASM and JS APIs is extremely poorly understood. Rust web benchmarks typically suffer from differences in how Rust and JS cache strings. In Dioxus, we solve most of these issues and our JS Framework Benchmark actually beats the WASM Bindgen benchmark in many cases. Compared to a "pure vanilla JS" solution, Dioxus adds less than 5% of overhead and takes advantage of batched DOM manipulation.
164
+
### Isn't the overhead for interacting with the DOM from Wasm too much?
165
+
The overhead layer between Wasm and JS APIs is extremely poorly understood. Rust web benchmarks typically suffer from differences in how Rust and JS cache strings. In Dioxus, we solve most of these issues and our JS Framework Benchmark actually beats the Wasm Bindgen benchmark in many cases. Compared to a "pure vanilla JS" solution, Dioxus adds less than 5% of overhead and takes advantage of batched DOM manipulation.
166
166
167
-
### Aren't WASM binaries too huge to deploy in production?
168
-
WASM binary sizes are another poorly understood characteristic of Rust web apps. 50kb of WASM and 50kb of JS are _not_ made equally. In JS, the code must be downloaded _first_ and _then_ JIT-ted. Just-in-time compiling 50kb of JavaScript takes a while which is why 50kb of JavaScript sounds like a lot! However, with WASM, the code is downloaded and JIT-ted _simultaneously_ through the magic of streaming compilation. By the time the 50kb of Rust is finished downloading, it is already ready to go. Again, Dioxus beats out many benchmarks with time-to-interactivity.
167
+
### Aren't Wasm binaries too huge to deploy in production?
168
+
Wasm binary sizes are another poorly understood characteristic of Rust web apps. 50kb of Wasm and 50kb of JS are _not_ made equally. In JS, the code must be downloaded _first_ and _then_ JIT-ted. Just-in-time compiling 50kb of JavaScript takes a while which is why 50kb of JavaScript sounds like a lot! However, with Wasm, the code is downloaded and JIT-ted _simultaneously_ through the magic of streaming compilation. By the time the 50kb of Rust is finished downloading, it is already ready to go. Again, Dioxus beats out many benchmarks with time-to-interactivity.
169
169
170
170
For reference, Dioxus `hello-world` clocks in at around 70kb gzip or 60kb brotli, and Dioxus supports SSR.
171
171
@@ -176,7 +176,7 @@ There are plenty Rust Elm-like frameworks in the world - we were not interested
176
176
The `RSX` DSL is _barely_ a DSL. Rustaceans will find the DSL very similar to simply assembling nested structs, but without the syntactical overhead of "Default" everywhere or having to jump through hoops with the builder pattern. Between RSX, HTML, the Raw Factory API, and the NodeBuilder syntax, there's plenty of options to choose from.
177
177
178
178
### What are the build times like? Why on earth would I choose Rust instead of JS/TS/Elm?
179
-
Dioxus builds as roughly as fast as a complex WebPack-TypeScript site. Compile times will be slower than an equivalent TypeScript site, but not unbearably slow. The WASM compiler backend for Rust is very fast. Iterating on small components is basically instant and larger apps takes a few seconds. In practice, the compiler guarantees of Rust balance out the rebuild times.
179
+
Dioxus builds as roughly as fast as a complex WebPack-TypeScript site. Compile times will be slower than an equivalent TypeScript site, but not unbearably slow. The Wasm compiler backend for Rust is very fast. Iterating on small components is basically instant and larger apps takes a few seconds. In practice, the compiler guarantees of Rust balance out the rebuild times.
180
180
181
181
### What about Yew/Seed/Sycamore/Dominator/Dodrio/Percy?
182
182
- Yew and Seed use an Elm-like pattern and don't support SSR or any alternate rendering platforms
@@ -193,7 +193,7 @@ In the future, we are interested in using Webrenderer to provide a fully native
193
193
You shouldn't use Dioxus if:
194
194
- You don't like the React Hooks approach to frontend
195
195
- You need a no-std renderer
196
-
- You want to support browsers where WASM or asm.js are not supported.
196
+
- You want to support browsers where Wasm or asm.js are not supported.
Copy file name to clipboardExpand all lines: docs/src/README.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3

4
4
5
-
**Dioxus** is a framework and ecosystem for building fast, scalable, and robust user interfaces with the Rust programming language. This guide will help you get up-and-running with Dioxus running on the Web, Desktop, Mobile, and more.
5
+
**Dioxus** is a framework and ecosystem for building fast, scalable, and robust user interfaces with the Rust programming language. This guide will help you get up-and-running with Dioxus running on the Web, Desktop, Mobile, and more.
6
6
7
7
```rust, ignore
8
8
// An example Dioxus app - closely resembles React
@@ -24,7 +24,7 @@ The Dioxus API and patterns closely resemble React - if this guide is lacking in
24
24
### Web Support
25
25
---
26
26
27
-
The Web is the most-supported target platform for Dioxus. To run on the Web, your app must be compiled to WebAssembly and depend on the `dioxus` crate with the `web` feature enabled. Because of the WASM limitation, not every crate will work with your web-apps, so you'll need to make sure that your crates work without native system calls (timers, IO, etc).
27
+
The Web is the most-supported target platform for Dioxus. To run on the Web, your app must be compiled to WebAssembly and depend on the `dioxus` crate with the `web` feature enabled. Because of the Wasm limitation, not every crate will work with your web-apps, so you'll need to make sure that your crates work without native system calls (timers, IO, etc).
28
28
29
29
Because the web is a fairly mature platform, we expect there to be very little API churn for web-based features.
30
30
@@ -88,7 +88,7 @@ Examples:
88
88
### LiveView Support
89
89
---
90
90
91
-
The internal architecture of Dioxus was designed from day one to support the `LiveView` use-case, where a web server hosts a running app for each connected user. As of today, there is no out-of-the-box LiveView support - you'll need to wire this up yourself. While not currently fully implemented, the expectation is that LiveView apps can be a hybrid between WASM and server-rendered where only portions of a page are "live" and the rest of the page is either server-rendered, statically generated, or handled by the host SPA.
91
+
The internal architecture of Dioxus was designed from day one to support the `LiveView` use-case, where a web server hosts a running app for each connected user. As of today, there is no out-of-the-box LiveView support - you'll need to wire this up yourself. While not currently fully implemented, the expectation is that LiveView apps can be a hybrid between Wasm and server-rendered where only portions of a page are "live" and the rest of the page is either server-rendered, statically generated, or handled by the host SPA.
Copy file name to clipboardExpand all lines: docs/src/advanced-guides/custom-renderer.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -49,7 +49,7 @@ enum DomEdit {
49
49
}
50
50
```
51
51
52
-
The Dioxus diffing mechanism operates as a [stack machine](https://en.wikipedia.org/wiki/Stack_machine) where the "push_root" method pushes a new "real" DOM node onto the stack and "append_child" and "replace_with" both remove nodes from the stack.
52
+
The Dioxus diffing mechanism operates as a [stack machine](https://en.wikipedia.org/wiki/Stack_machine) where the "push_root" method pushes a new "real" DOM node onto the stack and "append_child" and "replace_with" both remove nodes from the stack.
53
53
54
54
55
55
### An example
@@ -60,7 +60,7 @@ For the sake of understanding, lets consider this example - a very simple UI dec
60
60
rsx!( h1 {"hello world"} )
61
61
```
62
62
63
-
To get things started, Dioxus must first navigate to the container of this h1 tag. To "navigate" here, the internal diffing algorithm generates the DomEdit `PushRoot` where the ID of the root is the container.
63
+
To get things started, Dioxus must first navigate to the container of this h1 tag. To "navigate" here, the internal diffing algorithm generates the DomEdit `PushRoot` where the ID of the root is the container.
64
64
65
65
When the renderer receives this instruction, it pushes the actual Node onto its own stack. The real renderer's stack will look like this:
66
66
@@ -228,7 +228,7 @@ For example, the `div` element is (approximately!) defined as such:
228
228
```rust
229
229
structdiv;
230
230
impldiv {
231
-
/// Some glorious documentaiton about the class proeprty.
231
+
/// Some glorious documentation about the class property.
@@ -251,7 +251,7 @@ There are three opportunities for platform incompatibilities to break your progr
251
251
252
252
The best hooks will properly detect the target platform and still provide functionality, failing gracefully when a platform is not supported. We encourage - and provide - an indication to the user on what platforms a hook supports. For issues 1 and 2, these return a result as to not cause panics on unsupported platforms. When designing your hooks, we recommend propagating this error upwards into user facing code, making it obvious that this particular service is not supported.
253
253
254
-
This particular code _will panic_ due to the unwrap on downcast_ref. Try to avoid these types of patterns.
254
+
This particular code _will panic_ due to the unwrap on downcast_ref. Try to avoid these types of patterns.
Copy file name to clipboardExpand all lines: docs/src/advanced-guides/liveview.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
# Dioxus Liveview
2
-
Liveview is a configuration where a server and a client work together to render a Dioxus app. Liveview monomorphizes a web application, eliminating the need for frontend-specific APIs.
2
+
Liveview is a configuration where a server and a client work together to render a Dioxus app. Liveview monomorphizes a web application, eliminating the need for frontend-specific APIs.
3
3
4
-
This is a developer-friendly alternative to the JAM-stack (Javascript + API + Markdown), combining the WASM-compatibility and async performance of Rust.
4
+
This is a developer-friendly alternative to the JAM-stack (Javascript + API + Markdown), combining the Wasm-compatibility and async performance of Rust.
5
5
6
6
## Why liveview?
7
7
8
-
### No APIs necessary!
9
-
Because Liveview combines the server and the client, you'll find dedicated APIs unnecessary. You'll still want to implement a datafetching service for Live-apps, but this can be implemented as a crate and shared between apps. This approach was designed to let you model out your data requirements without needing to maintain a public versioned API.
8
+
### No APIs necessary!
9
+
Because Liveview combines the server and the client, you'll find dedicated APIs unnecessary. You'll still want to implement a data-fetching service for Live-apps, but this can be implemented as a crate and shared between apps. This approach was designed to let you model out your data requirements without needing to maintain a public versioned API.
10
10
11
11
You can find more information to data modeling and fetching for LiveApps in the "Book of Dioxus Patterns".
Copy file name to clipboardExpand all lines: docs/src/concepts/00-index.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
In this chapter of the book, we'll cover some core topics on how Dioxus works and how to best leverage the features to build a beautiful, reactive app.
4
4
5
-
At a very high level, Dioxus is simply a Rust framework for _declaring_ user interfaces and _reacting_ to changes.
5
+
At a very high level, Dioxus is simply a Rust framework for _declaring_ user interfaces and _reacting_ to changes.
6
6
7
7
1) We declare what we want our user interface to look like given a state using Rust-based logic and control flow.
8
8
2) We declare how we want our state to change when the user triggers an event.
@@ -12,7 +12,7 @@ At a very high level, Dioxus is simply a Rust framework for _declaring_ user int
12
12
13
13
Dioxus is a *declarative* framework. This means that instead of manually writing calls to "create element" and "set element background to red," we simply *declare* what we want the element to look like and let Dioxus handle the differences.
14
14
15
-
Let's pretend that we have a stoplight we need to control - it has a color state with red, yellow, and green as options.
15
+
Let's pretend that we have a stoplight we need to control - it has a color state with red, yellow, and green as options.
16
16
17
17
18
18
Using an imperative approach, we would have to manually declare each element and then handlers for advancing the stoplight.
Copy file name to clipboardExpand all lines: docs/src/concepts/vnodes.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# VNodes and Elements
2
2
3
-
At the heart of Dioxus is the concept of an "element" - a container that can have children, properties, event handlers, and other important attributes. Dioxus only knows how to render the `VNode`datastructure - an Enum variant of an Element, Text, Components, Fragments, and Anchors.
3
+
At the heart of Dioxus is the concept of an "element" - a container that can have children, properties, event handlers, and other important attributes. Dioxus only knows how to render the `VNode`data structure - an Enum variant of an Element, Text, Components, Fragments, and Anchors.
4
4
5
5
Because Dioxus is meant for the Web and uses WebView as a desktop and mobile renderer, almost all elements in Dioxus share properties with their HTML counterpart. When we declare our elements, we'll do so using HTML semantics:
6
6
@@ -27,8 +27,8 @@ And produce the corresponding html structure:
27
27
<div>hello world</div>
28
28
```
29
29
30
-
Our structure declared above is made of two variants of the `VNode`datastructure:
31
-
- A VElement with a tagname of `div`
30
+
Our structure declared above is made of two variants of the `VNode`data structure:
31
+
- A VElement with a tag name of `div`
32
32
- A VText with contents of `"hello world"`
33
33
34
34
## All the VNode types
@@ -49,7 +49,7 @@ To speed up the process of building our elements and text, Dioxus uses a special
In other frontend frameworks for Rust, nearly every string is allocated using the global allocator. This means that strings in Rust do not benefit from the immutable string interning optimizations that JavaScript engines employ. By using a smaller, faster, more limited allocator, we can increase framework performance, bypassing even the naive WasmBindgen benchmarks for very quick renders.
52
+
In other frontend frameworks for Rust, nearly every string is allocated using the global allocator. This means that strings in Rust do not benefit from the immutable string interning optimizations that JavaScript engines employ. By using a smaller, faster, more limited allocator, we can increase framework performance, bypassing even the naive wasm-bindgen benchmarks for very quick renders.
53
53
54
54
It's important to note that VNodes are not `'static` - the VNode definition has a lifetime attached to it:
Copy file name to clipboardExpand all lines: docs/src/gettingstarted/fromjs.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ let val = 10; // rust
18
18
constval=10; // js
19
19
```
20
20
21
-
However, `const` in JS does not prohibit you from modify the value itself only disallowing assignment. In Rust, immutable **is immutable**. You _never_ have to work about accidentally mutating data; mutating immutable data in Rust requires deliberate advanced datastructures that you won't find in your typical frontend code.
21
+
However, `const` in JS does not prohibit you from modify the value itself only disallowing assignment. In Rust, immutable **is immutable**. You _never_ have to work about accidentally mutating data; mutating immutable data in Rust requires deliberate advanced data structures that you won't find in your typical frontend code.
Copy file name to clipboardExpand all lines: docs/src/hello_world.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -78,7 +78,7 @@ If you plan to develop extensions for the `Dioxus` ecosystem, please use the `di
78
78
Now, let's edit our `main.rs` file:
79
79
80
80
```rust
81
-
usediouxs::prelude::*;
81
+
usedioxus::prelude::*;
82
82
83
83
84
84
fnmain() {
@@ -97,7 +97,7 @@ Let's dissect our example a bit.
97
97
This bit of code imports everything from the the `prelude` module. This brings into scope the right traits, types, and macros needed for working with Dioxus.
98
98
99
99
```rust
100
-
usediouxs::prelude::*;
100
+
usedioxus::prelude::*;
101
101
```
102
102
103
103
This initialization code launches a Tokio runtime on a helper thread - where your code will run, and then the WebView on the main-thread. Due to platform requirements, the main thread is blocked by this call.
@@ -124,7 +124,7 @@ The closure `FC<()>` syntax is identical to the function syntax, but with lifeti
Copy file name to clipboardExpand all lines: docs/src/platforms/00-index.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -2,14 +2,14 @@
2
2
3
3
## Running Examples
4
4
5
-
We use the dedicated `dioxus-cli` to build and test dioxus web-apps. This can run examples, tests, build web workers, launch development servers, bundle, and more. It's general purpose, but currently very tailored to Dioxus for liveview and bundling. If you've not used it before, `cargo install --path pacakages/dioxus-cli` will get it installed. This CLI tool should feel like using `cargo` but with 1st party support for assets, bundling, and other important dioxus-specific features.
5
+
We use the dedicated `dioxus-cli` to build and test dioxus web-apps. This can run examples, tests, build web workers, launch development servers, bundle, and more. It's general purpose, but currently very tailored to Dioxus for liveview and bundling. If you've not used it before, `cargo install --path packages/dioxus-cli` will get it installed. This CLI tool should feel like using `cargo` but with 1st party support for assets, bundling, and other important dioxus-specific features.
6
6
7
7
Alternatively, `trunk` works but can't run examples.
8
8
9
9
- tide_ssr: Handle an HTTP request and return an html body using the html! macro. `cargo run --example tide_ssr`
10
10
- doc_generator: Use dioxus SSR to generate the website and docs. `cargo run --example doc_generator`
11
11
- fc_macro: Use the functional component macro to build terse components. `cargo run --example fc_macro`
12
-
- hello_web: Start a simple wasm app. Requires a web packer like dioxus-cli or trunk `cargo run --example hello`
12
+
- hello_web: Start a simple Wasm app. Requires a web packer like dioxus-cli or trunk `cargo run --example hello`
13
13
- router: `cargo run --example router`
14
14
- tide_ssr: `cargo run --example tide_ssr`
15
15
- webview: Use liveview to bridge into a webview context for a simple desktop application. `cargo run --example webview`
0 commit comments