Dioxus: User interfaces that run anywhere
dioxuslabs.com
dioxuslabs.com
The average desktop/mobile binary is less than 2mb, but that’s with zero size optimizations to shrink the output. You can certainly get less.
Dioxus runs on a native thread and renderers into the webview, so there’s very little JS footprint and the render resources are shared among all webview on your system.
I haven’t experimented with it, but it’s entirely possible to run on a raspi with webkitgtk. We’re building a native renderer with WGPU and already support rendering to the terminal.
So I need to have some sort of WebView library pre-installed? What WebView would that be on, e.g., Linux? And is it possible to include it in the build to create a standalone binary? If so, how much would that make the binary size go up?
In my experience, relying on a system-wide WebView is a recipe for desaster.
Dioxus runs its test suite on modern versions of windows, macOS and linux
After flipping through the different target platform info, looks like the front page claims are partly aspirational, not currently implemented or integrated.
(Reason I ask: Coincidentally, I'm just starting a new TUI project with Cursive tonight, but looked at Dioxus when I saw it on HN, because I'd love to not have to keep relearning different UI toolkit bureaucracies, for also doing Android&iOS, Web, and Linux desktop. But I've seen countless cross-platform GUI toolkit efforts over the decades, and unclear how mature Dioxus is going to become.)
Here is a rough roadmap: https://github.com/DioxusLabs/dioxus/blob/master/docs/guide/...
The major projects for the next year are to improving the native render (Blitz), the full stack framework (Tokamak), Router, and subtree rendering.
I hope this Dioxus is very successful, since I'd love to be doing all this work in Rust.
wifi scanner is named bluetooth scanner and doesnt show any networks. im typing this on wifi. also code has 15 levels of indentation.
weather app search doesnt work
e-commerce cant fake-buy anything
dog-app lit says instagram, nothing is clickable, tons of deeply nested jss
I'm assuming there is a plan given "run anywhere".
Given Qt, Slint[1] and similar, and Rust being supported on a lot of embedded platforms, it didn't seem out of place to imagine it on an higher-end STM32, ESP32 or similar.
Will definitely dig deeper, looks interesting.
How is this used on a very high level? Is this a pure front-end framework? So, let's say I write an app using Dioxus. Then the input are .rs files but what is the output? For desktops: an executable? For web: a folder with HTML/JS/CSS?
And how does this work under the hood? Is it drawing all UI elements from scratch using Canvas/WebGL? Or is it more like a translator that fills a regular DOM at runtime and uses that for rendering?
It’s written in Rust so it doesn’t need a JS engine which gives it this huge portability. Your intuition on the outputs is correct. For the web, you get a folder of HTML, CSS, and the tiniest amount of bootstrapping JavaScript. For most other platforms you get a small binary that is self contained.
> Our native renderer is essentially a GPU-accelerated HTML/CSS renderer
You'll just implement a subset of an HTML/CSS renderer that is capable enough for a specific subset of HTML and CSS that Dioxus generates, you're not planning to develop a fully browser-compliant HTML/CSS renderer, right?
Being browser compliant would be great, but just being 70% of the way there would be cool too.
Thanks. I think aiming a 70% compatibility is a realistic goal, going up to 90% would probably need 10 times more efforts, and 95% ten times more, with 100% being unreachable anyway because no two browser behave exactly the same.
I'd check myself, but none of your examples seem to be available to just look at without cloning the repo locally.
Why? Choosing to use a webview renderer initially allows us to support many platforms quickly with fully featured renderer and accessibility built in. Comparing to Flutter targeting a web based model also allows our web renderer to render using elements instead of a canvas, and has a much smaller bundle size.
Dioxus is render agnostic and the plan for the future is to invest more time into blitz (our native renderer). This will allow us to achieve native performance on desktop and mobile.
On desktop, does it support multiple windows? I can't find any information. I'm generally not a fan of multi-target UI platforms, as desktop is almost always de-prioritized compared to mobile and web.
Looking at the docs, LiveView is referred to as Server Side Rendering so I'm guessing yes
It's not a nitpick to point out that the explicit claim of running everywhere is horseshit.
Running Firefox 108.1 (24234) on latest iOS 16.1.3 with sunrise/sunset dark/light screen mode (currently dark)
idk, whenever I have to use win32 and I see some app which uses the win32 widgets i'm like, "finally some good software"
I've been tinkering with wxPython since I can't get pygobject to work in Python 3 in Windows. It really isn't that bad, certainly not nearly as weird as trying to wrap my head around folks' awful (are they ever not?) React codebases and this moronic idea that everything has to bundle Chromium
Also you really can't beat an instantaneous cold startup time. It's the tits
Simple. You want to be able to make cross-platform UIs that are more performant, less resource-intensive, and more extensible than electron apps.
Some of us want stable software that feels fast and responsive and doesn't lag on high-end machines while using 2GB of RAM despite being extremely simple
It doesn’t render native widgets though, AFAIK it’s „just“ OpenGL/Metal/Vulkan/CPU-rasterization.
EDIT: Someone is already working on a Skia adapter for Dioxus: https://github.com/marc2332/freya
I'd expect there to be something useable by the end of 2023.
I missed that. Previous discussion https://news.ycombinator.com/item?id=33066593 and some updates and upstream contributions in https://blog.system76.com/post/november-at-system76-products...
1. Dart is a terrible language with no signs of improving, Rust is somewhat decent
2. Flutter is terrible on the web, this isn't.
Wow! I was wondering if this exists TODAY. Even did a quick search but couldn’t find anything. Wild.
Edit: oh, doesn’t seem like it uses native UI
I imagined something like React & React Native, except implemented in a performant compiled language and runs anywhere using WASM.
But now that I think about it, maybe React/RN will be able to switch the core to WASM and keep the user code in JS, maybe this will be good enough for performance while still being more developer friendly.
Is SciViz available somewhere yet?
(note I'm not talking about you specifically here)
There are many solutions out there that "run everywhere" (that matters) and it's always some variation of this compromise.
I get the obsession of having things run natively, but at some point you have to ask yourself if it's really that important.
This reminds me of people who want a game, but spend most if not all of their time trying to find the perfect game engine or even trying to make their own engine. I get it, it's fun. But it can potentially be mentally exhausting if you want an end product and a perfect prebuilt framework.
Personally I just enjoy building frameworks and tooling and find happiness just doing that. If I were to make a product I'd be using something that works well enough and try to leave my obsession with finding/building the perfect framework out of it.
https://github.com/Satellite-im
Dioxus is still less than a year old, but it’s getting more and more use.
I loved electron before it got bloated, I found NW.js before that and wished it was more popular and had more love. I contributed a swig wrapper to webview to support any language you wish (swig interface naming amalgamations aside).
Keep going!!! I want a world where I can write an app for any platform and it spits out some standardized UI that could be augmented with some CSS. I’m super interested in this.
nw.js made me appreciate HTML5 so much.
I ran into bugs with literally every single nw.js API I used in the application. Here's a taste:
* nw.js window menu: arrow keys don't properly navigate across menus, accelerator shortcuts randomly break (bog standard ones like <ctrl-1>), some weird race condition displaying the menu which affects the dimensions of the document that get returned by the DOM, inability to change an accelerator shortcut during runtime, and many, many more
* at one point, the nwworkingdir attribute for input tags didn't work unless I injected the tag/attr/value as innerHTML
* win.zoom and menu.popup didn't play well together
* many others
On the other hand, the only HTML5 limitation I can remember was that SVG's getbbox will include clipped content in the returned bounding box. There's apparently a newer option to exclude the clipped areas, but AFAICT it isn't honored in any of the browsers.
So each time a user would submit a bug, I'd get a sinking feeling because I just knew it'd be some weirdness in one of the nw.js APIs which would have scant documentation. If that turned out to be the cause of the bug it would either be unfixable or require really nasty kludges to work around. (E.g., at one point nw.js didn't play well with the @font tag, but after hacking I figured out that it would work if I included the font inline in the relevant css as a data url.)
On the other hand, if the bug had to do with my own buggy js code or a misunderstanding of the DOM, I'd get excited because I knew there'd be 1000 pages of documentation, 10 years of various workarounds (most with code examples on SO), and probably even a blog with smooth animations showing why that part of the DOM works the way it does.
The lesson of Electron is that a server/protocol based UI is better than a library. Particularly a large/framework library that requires a lot of resources and is limited in scope would be better done this way to increase it's audience and participation.
Why do you keep copying worst parts of react
E.g.:
Literal HTML
``` <div class="active">Hello!</div> ```
Procedural JS
``` let elt = document.createElement('div'); elt.setAttribute("class", "active"); elt.innerText = "Hello!"; ```
Rust literals + HTML macro
``` html! { div(class: "active") { "Hello!" } } ```
Modern Lisp (Clojure, Fennel, et. al.)
``` [:div {:class "active"} "Hello!"] ```
Dunno about you, but when I'm comparing my template source code to the materialized DOM in my browser dev tools, the latter is a _lot_ simpler for me to reason about.
<div class="active">Hello!</div>
Ah, you can also get italics using asterisks instead of _underscores_. \*
or **Edit: it works
[0] https://github.com/DioxusLabs/taffy [1] https://docs.rs/cosmic-text/latest/cosmic_text/
I just played around with it today again and I immediately ran into like 5 bugs with font matching until I found out that there's not even an implementation for font matching other than "every property has to match 100%" (and if not, it falls back to an emoji font which is another bug), so there's not even the basic CSS font matching algorithm implemented (and the state of the fallback algorithm might be even worse then, as unlike the nicely documented CSS font matching algorithm, the latter is the undocumented hard part).
Even statements like, "One codebase, every platform" are just... wrong.