mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-21 19:53:04 +00:00
design: make the homepage snazzier (#580)
* feat: snazzy header * feat: better svg * fix: optimize svg for safari * feat: prettier homepage
This commit is contained in:
Jon Kelley
GitHub
parent
03bc63dacc
commit
4f1cf78e68
2 changed files with 106 additions and 90 deletions
176
README.md
176
README.md
|
|
@ -1,6 +1,6 @@
|
|||
<div align="center">
|
||||
<h1>Dioxus</h1>
|
||||
</div>
|
||||
<p align="center">
|
||||
<img src="./notes/header.svg">
|
||||
</p>
|
||||
|
||||
<div align="center">
|
||||
<!-- Crates version -->
|
||||
|
|
@ -68,115 +68,111 @@ Dioxus can be used to deliver webapps, desktop apps, static sites, mobile apps,
|
|||
|
||||
If you know React, then you already know Dioxus.
|
||||
|
||||
### Unique features:
|
||||
|
||||
## Unique features:
|
||||
---
|
||||
- Desktop apps running natively (no Electron!) in less than 10 lines of code.
|
||||
- Incredibly ergonomic and powerful state management.
|
||||
- Comprehensive inline documentation - hover and guides for all HTML elements, listeners, and events.
|
||||
- Extremely memory efficient - 0 global allocations for steady-state components.
|
||||
- Multi-channel asynchronous scheduler for first-class async support.
|
||||
- Blazingly fast 🔥🔥 and extremely memory efficient
|
||||
- Integrated hot reloading for fast iteration
|
||||
- First-class async support with coroutines and suspense
|
||||
- And more! Read the [full release post](https://dioxuslabs.com/blog/introducing-dioxus/).
|
||||
|
||||
## Get Started with...
|
||||
|
||||
<table style="width:100%" align="center">
|
||||
<tr >
|
||||
<th><a href="https://dioxuslabs.com/guide/">Tutorial</a></th>
|
||||
<th><a href="https://dioxuslabs.com/reference/web">Web</a></th>
|
||||
<th><a href="https://dioxuslabs.com/reference/desktop/">Desktop</a></th>
|
||||
<th><a href="https://dioxuslabs.com/reference/ssr/">SSR</a></th>
|
||||
<th><a href="https://dioxuslabs.com/reference/mobile/">Mobile</a></th>
|
||||
<tr>
|
||||
## Supported Platforms
|
||||
---
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<td><h2>Web<h2><td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Render directly to the DOM using WebAssembly
|
||||
<li>Pre-render with SSR and rehydrate on the client
|
||||
<li>Simple "hello world" at about 65kb, comparable to React
|
||||
<li>Built-in dev server and hot reloading for quick iteration
|
||||
<ul>
|
||||
<td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td><h2>Desktop<h2><td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Render using Webview or - experimentally - with WGPU or Skia
|
||||
<li>Zero-config setup. Simply cargo-run to build your app
|
||||
<li>Full support for native system access without electron-esque IPC
|
||||
<li>Supports macOS, Linux, and Windows. Portable <3mb binaries
|
||||
<ul>
|
||||
<td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td><h2>Mobile<h2><td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Render using Webview or - experimentally - with WGPU or Skia
|
||||
<li>Support for iOS and Android
|
||||
<li><em>Significantly</em> more performant than React Native
|
||||
<ul>
|
||||
<td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td><h2>Liveview<h2><td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Render apps - or just a single component - entirely on the server
|
||||
<li>Integrations with popular Rust frameworks like Axum and Warp
|
||||
<li>Extremely low-latency and ability to support 10,000+ simultaneous apps
|
||||
<ul>
|
||||
<td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td><h2>Terminal<h2><td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Render apps directly into your terminal, similar to <a href="https://github.com/vadimdemedes/ink"> ink.js</a>
|
||||
<li>Powered by the familiar flexbox and CSS model of the browser
|
||||
<li>Built-in widgets like text input, buttons, and focus system
|
||||
<ul>
|
||||
<td>
|
||||
<tr>
|
||||
</table>
|
||||
|
||||
## Example Projects:
|
||||
## Why Dioxus?
|
||||
---
|
||||
There's tons of options for building apps, so why would you choose Dioxus?
|
||||
|
||||
| File Navigator (Desktop) | WiFi scanner (Desktop) | TodoMVC (All platforms) | E-commerce w/ Tailwind (SSR/LiveView) |
|
||||
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| [](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer) | [](https://github.com/DioxusLabs/example-projects/blob/master/wifi-scanner) | [](https://github.com/DioxusLabs/example-projects/blob/master/todomvc) | [](https://github.com/DioxusLabs/example-projects/blob/master/ecommerce-site) |
|
||||
Well, first and foremost, Dioxus prioritizes developer experience. This is reflected in a variety of features unique to Dioxus:
|
||||
|
||||
See the [awesome-dioxus](https://github.com/DioxusLabs/awesome-dioxus) page for a curated list of content in the Dioxus Ecosystem.
|
||||
- Autoformatting of our meta language (RSX) and accompanying VSCode extension
|
||||
- Hotreloading using an interpreter of RSX for both desktop and web
|
||||
- Emphasis on good docs - our guide is complete and our HTML elements are documented
|
||||
- Significant research in simplifying
|
||||
|
||||
## Why Dioxus and why Rust?
|
||||
Dioxus is also a very extensible platform.
|
||||
|
||||
TypeScript is a fantastic addition to JavaScript, but it's still fundamentally JavaScript. TS code runs slightly slower, has tons of configuration options, and not every package is properly typed.
|
||||
- Easily build new renderers by implementing a very simple optimized stack-machine
|
||||
- Build and share components and even custom elements
|
||||
|
||||
By using Rust, we gain:
|
||||
So... Dioxus is great, but why won't it work for me?
|
||||
- It's not fully mature yet. APIs are still shifting, things might break (though we try to avoid it)
|
||||
- You need to run in a no-std environment.
|
||||
- You don't like the React-hooks model of building UIs
|
||||
|
||||
- Static types for _every_ library
|
||||
- Immutability by default
|
||||
- A simple and intuitive module system
|
||||
- Integrated documentation (`go to source` _actually goes to source_)
|
||||
- Advanced pattern matching
|
||||
- Clean, efficient, composable iterators
|
||||
- Inline built-in unit/integration testing
|
||||
- Best-in-class error handling
|
||||
- Powerful and sane standard library
|
||||
- Flexible macro system
|
||||
- Access to `crates.io`
|
||||
|
||||
Specifically, Dioxus provides us many other assurances:
|
||||
## Contributing
|
||||
---
|
||||
- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).
|
||||
- Join the discord and ask questions!
|
||||
|
||||
- Proper use of immutable data structures
|
||||
- Guaranteed error handling (so you can sleep easy at night not worrying about `cannot read property of undefined`)
|
||||
- Native performance on mobile
|
||||
- Direct access to system IO
|
||||
|
||||
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.
|
||||
|
||||
## Why NOT Dioxus?
|
||||
|
||||
You shouldn't use Dioxus if:
|
||||
|
||||
- You don't like the React Hooks approach to frontend
|
||||
- You need a no-std renderer
|
||||
- You want to support browsers where Wasm or asm.js are not supported.
|
||||
- You need a Send+Sync UI solution (Dioxus is not currently thread-safe)
|
||||
|
||||
## Comparison with other Rust UI frameworks
|
||||
|
||||
Dioxus primarily emphasizes **developer experience** and **familiarity with React principles**.
|
||||
|
||||
- [Yew](https://github.com/yewstack/yew): prefers the elm pattern instead, no borrowed props, supports SSR (no hydration), no direct desktop/mobile support.
|
||||
- [Percy](https://github.com/chinedufn/percy): Supports SSR but with less emphasis on state management and event handling.
|
||||
- [Sycamore](https://github.com/sycamore-rs/sycamore): VDOM-less using fine-grained reactivity, but no direct support for desktop/mobile.
|
||||
- [Dominator](https://github.com/Pauan/rust-dominator): Signal-based zero-cost alternative, less emphasis on community and docs.
|
||||
- [Azul](https://azul.rs): Fully native HTML/CSS renderer for desktop applications, no support for web/ssr
|
||||
|
||||
## Parity with React & Roadmap
|
||||
|
||||
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. These include:
|
||||
|
||||
- Portals
|
||||
- Suspense integration with SSR
|
||||
- Server Components / Bundle Splitting / Lazy
|
||||
|
||||
Dioxus is unique in the Rust ecosystem in that it supports:
|
||||
|
||||
- Components with props that borrow from their parent
|
||||
- Server-side-rendering with client-side hydration
|
||||
- Support for desktop applications
|
||||
|
||||
For more information on what features are currently available and the roadmap for the future, be sure to check out [the guide](https://dioxuslabs.com/guide/).
|
||||
|
||||
## Projects in the ecosystem
|
||||
|
||||
Want to jump in and help build the future of Rust frontend? There's plenty of places where your contributions can make a huge difference:
|
||||
|
||||
- [TUI renderer](https://github.com/dioxusLabs/rink)
|
||||
- [CLI Tooling](https://github.com/dioxusLabs/cli)
|
||||
- [Documentation and Example Projects](https://github.com/dioxusLabs/docsite)
|
||||
- LiveView and Web Server
|
||||
- Asset System
|
||||
<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
|
||||
</a>
|
||||
|
||||
## License
|
||||
|
||||
---
|
||||
This project is licensed under the [MIT license].
|
||||
|
||||
[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
|
||||
|
||||
### Contribution
|
||||
|
||||
Unless you explicitly state otherwise, any contribution intentionally submitted
|
||||
for inclusion in Dioxus by you, shall be licensed as MIT, without any additional
|
||||
terms or conditions.
|
||||
|
|
|
|||
20
notes/header.svg
Normal file
20
notes/header.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 23 KiB |
Loading…
Reference in a new issue