27 ms·
Dioxus: User interfaces that run anywhere
- _boffin_ 4y agoIt looks like everything is moving to a lisp-like structure. brackets... brackets everywhere.
- rcoder 4y agoDeclarative syntax to express {HT|X|...}ML/DOM-like structures in your source code are a big win if that's a significant percentage of the boilerplate code you have to write. 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.
- genezeta 4y agoJust so you know in case you don't, if you remove the ```backticks``` and just indent the line by 4 spaces it will be presented in a monospace font, like... <div class="active">Hello!</div> Ah, you can also get italics using asterisks instead of _underscores_.
- amelius 4y agoHow do you get a literal asterisk?
- steveklabnik 4y agoEither \* or **
- steveklabnik 4y agoYou only need two spaces, not four.
- genezeta 4y agoAh, yes. You're right, it's 2 :)
- 082349872349872 4y agoDioxus doesn't exactly manage anywhere yet, but it would be cool if it eventually included things like rendering to phone response tree: push 1 for X, 2 for Y...
- tomcam 4y agoNearing the end of a deadline so can’t explore too much, but this work looks comprehensive in scope. Lots of docs already, tons of complete examples. Can’t wait to learn more. Not a Rust guy but loving the examples.
- thoughtpalette 4y agoAm I crazy? I went to built a TODO app and almost 70% of the docs are blank pages. Anything "Advanced Guides" and onward.
- thoughtpalette 4y agoJust for posterity, the documentation was updated and looks to be complete.
- account-5 4y agoI wonder how this compares to Dart/Flutter which runs pretty much everywhere.
- throwawaydart__ 4y agoAs someone who has used both... 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.
- cuu508 4y agoThere are webview mentions, so I assume the user interfaces are built with HTML and CSS? Do the apps bundle the renderer (like Electron or Sciter) or use the OS webview (like Cordova)?
- brap 4y ago>User interfaces that run anywhere. Written in Rust, inspired by React 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
- nicoburns 4y agoIt doesn't... yet. But that is being worked upon. Native renderer is here: https://github.com/DioxusLabs/blitz https://github.com/DioxusLabs/blitz
- brap 4y agoI think this could really be the selling point, high performance native & web UIs. Nothing like it exists. 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.
- satvikpendem 4y agoIsn't that Flutter?
- brap 4y agoFlutter is quite terrible on the web. I don’t think they use WASM either, I think Dart just gets compiled to JS.
- satvikpendem 4y agoYeah it's not too great on the web but they are working on WASM as well: https://news.ycombinator.com/item?id=33908134#33910235 https://news.ycombinator.com/item?id=33908134#33910235
- 4y ago
- pdntspa 4y agoAre there any cross-platform native UIs for Rust? Something like wxWidgets or GTK?
- formerly_proven 4y agoThe question is why would you want something like that? Native is meaningless on non-Apple platforms. For Windows, wx is nowadays the opposite of a modern native Windows app, because it uses Win32. Gtk is "best viewed on" a Gtk-based Linux desktop. Qt Widgets, much like wx, emulates the LAF of Win32, so doesn't look correct any more on Windows. Qt Quick is a modern hardware-accelerated UI toolkit, but that's not a unique thing any more.
- jcelerier 4y ago> For Windows, wx is nowadays the opposite of a modern native Windows app, because it uses Win32. idk, whenever I have to use win32 and I see some app which uses the win32 widgets i'm like, "finally some good software"
- rstat1 4y agoI would certainly prefer properly written native software to web-based junk pretending to be native.
- pdntspa 4y agoI guess you can consider me a fan of WinForms. Besides, you can change the background color and add a stupid amount of padding to everything and voila, you now have "modern". Hell I used to have something for C# that did exactly that and made WinForms apps look like they were made for Windows 10. It was pretty cool, ngl 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
- bmitc 4y agoWhy is anything based on Win32 not native on Windows? As far as I know, it's the only way to create a window on Windows.
- ronreiter 4y agoI like the fact that the website isn’t responsive
- jkelleyrtp 4y agoWe’re using tailwind and it looks like the media breakpoint is set for a size too big/small. Should be easy fix!
- deleted 4y ago[deleted]
- midasz 4y agoHuh? When I make the screen smaller the layout adjusts perfectly
- enahs-sf 4y agoThought it was ironic to see “user interfaces that run anywhere” only to see the landing page break the viewport on my phone.
- silon42 4y agoI got an empty page myself.
- eikenberry 4y agoThey compare to Electron multiple times which makes it seems like it would run as a service with protocol layer support for the defining the UI and callback or something. But it looks like yet another UI framework/library that will only work with the implementation language (and ffi). 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.
- pomatic 4y agoRuns anywhere... except embedded platforms? (And no, android doesn't count so far as embedded platforms are concerned).
- satvikpendem 4y agoIs this like Flutter? I see they say you can use a WGPU based renderer but it seems like the desktop and mobile apps are still akin to using a webview which isn't a great user experience.
- demonthos 4y agoRight now Dioxus uses webview for all platforms except TUI and blitz. 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.
- satvikpendem 4y agoMakes sense, thanks. What do you mean by native renderer, is it like React Native where Dioxus calls are transformed into native system UI calls but keeps a JS bridge (which can sometimes be slow), or like Flutter which draws every pixel on a custom canvas but which is able to be compiled to machine code?
- demonthos 4y agoMore like flutter. Your code is compiled to machine code. It uses wgpu to render to desktop and mobile naively
- satvikpendem 4y agoSo I use Flutter currently and it seems like they're doing quite a bit of work to get everything to work well together on all of their platforms, with varying levels of success. How do you plan to handle all of that complexity as well, and compete with them, so to speak? I don't mean compete in a negative way but as a developer, I should be able to look at the pros and cons of all these Flutter-like frameworks popping up in different languages and choose the best one.
- bmitc 4y agoIs the LiveView reference referring to integration with Elixir's LiveView or is it just a poorly chosen name for some Rust thing? 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.
- jkelleyrtp 4y agoLiveView here describes the approach, not the integration with phoenix. Multi-window support is coming. You can hack it together today, but we’re actively upgrading the core architecture to support multiple renderers per UI tree for declarative multi-window setups.
- CuriousCosmic 4y ago> Is the LiveView reference referring to integration with Elixir's LiveView or is it just a poorly chosen name for some Rust thing? Looking at the docs, LiveView is referred to as Server Side Rendering so I'm guessing yes
- bmitc 4y agoI read that. LiveView is a specific Elixir package and solution. Is LiveView synonymous with server-side rendering, independent of Elixir?
- CuriousCosmic 4y agoI haven't seen it used that way outside of the elixir space but I suppose it could be catching on in some dev spheres.
- fallat 4y agoCanvas-like APIs are universal. What people want I guess is "text inputs and buttons with flexbox anywhere". Oh, and that it mimics component based dev. Concepts are more reusable than software.
- nicoburns 4y agoIt's coming. Flexbox (and CSS Grid) are implemented in Taffy [0]. Multiline text rendering and layout are implemented in cosmic_text [1]. Dioxus linked here implements a component system with state management and reactivity. It's all quite new though (cosmic text was only released 2 months ago, and it's only gotten to "mostly feature complete" as of a few days ago) and it hasn't all been combined together into a complete framework yet. [0] https://github.com/DioxusLabs/taffy https://github.com/DioxusLabs/taffy [1] https://docs.rs/cosmic-text/latest/cosmic_text/ https://docs.rs/cosmic-text/latest/cosmic_text/
- CryZe 4y ago> mostly feature complete 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).
- nicoburns 4y agoYeah, I think cosmic_text doesn't really have a good story for font matching yet, but it's done most of the hard shaping/layout bit, which was the bit that was previously missing in the Rust ecosystem.
- deleted 4y ago[deleted]
- lilyball 4y agoThis sounds neat, but something sorely missing from this page is ahh mention of accessibility. Does Dioxus integrate with the platform-native accessibility APIs?
- jkelleyrtp 4y agoIt uses web tech so all the accessibility is built right in!
- littlestymaar 4y agoIn another comment you mentioned some ongoing work on a native back-end, how is the accessibility story going in this scenario?
- jkelleyrtp 4y agoWe’re leveraging the work done by Druid so the plan is to use AccessibilityKit as the foundation. Our native renderer is essentially a GPU-accelerated HTML/CSS renderer so we’ll pull in all the accessibility tech there. We don’t want people to learn anything new to get started, so sticking with web foundations is smart even if it’s not as great as a bespoke solution.
- littlestymaar 4y agoThanks for your answer. This part confuses me a little bit though: > 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?
- jkelleyrtp 4y agoWe’ll implement what it takes to hit the majority of CSS we run into. The Rust ecosystem has some great packages for CSS and layout (we and Bevy comaintain Taffy) so at a certain point it’ll be filling in the blanks. Being browser compliant would be great, but just being 70% of the way there would be cool too.
- jkelleyrtp 4y agoCreator here - ask away! We added a bunch of new features to master that haven’t been released yet, like liveview, WGPU renderer, instant hot reloading, autoformatting, and more.
- amelius 4y agoWhat is the (minimum) application footprint?
- jkelleyrtp 4y agoOn the web, you can get the final bundle down to about 60k gzipped, which is comparable to react. 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.
- codethief 4y ago> 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. 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.
- jkelleyrtp 4y agoFor most platforms relying on the browser’s webview is fine since most platforms ship with a browser! But you can always specify WebKitGTK as a dependency which I think is a one time 2GB cost.
- 4y ago
- fxtentacle 4y agoYou should host your own copy of Tailwind CSS. As-is, it looks broken with uMatrix.
- nmilo 4y agoSo allow Tailwind CSS downloads. The site looks broken because you broke the site.
- matheusmoreira 4y agoI long for the day blockers are so ubiquitous that sites not working with them is considered a bug that developers will be forced to fix.
- mometsi 4y agoThis isn't a rock, it's a cup of delicious stone soup. It's perfectly edible once you've gone around the village requesting garnishes from random strangers.
- Existenceblinks 4y agoAnyone here have data on how many commercial apps built with each of these framework? There are quite many, but even Tauri has most of show cases as random free apps.
- jkelleyrtp 4y agoSatellite is building their startup’s app with Dioxus! https://github.com/Satellite-im https://github.com/Satellite-im Dioxus is still less than a year old, but it’s getting more and more use.
- Existenceblinks 4y agoThat looks like a solid business. Is there any risk to the business, like lack of a certain feature?
- gabereiser 4y agoIn 2007 I said that the future of all apps is html/js/css. I knew the front-end space was going to get complicated (it did) and that to really change the game (ie, force a standard in UX) it would have to be web based. I wrapped chromium in a Java applet for travel kiosks (now mobile is king), I wrapped chromium in C#, in Python, in Go, all to make web tech the standard. 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.
- davidpaulyoung 4y agoJust like the old Joyent "Slingshot". https://daringfireball.net/linked/2007/03/23/slingshot https://daringfireball.net/linked/2007/03/23/slingshot
- jancsika 4y ago> I found NW.js before that and wished it was more popular and had more love 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.
- cellularmitosis 4y agoHaving spent some spare time working on a package manager for OS X Tiger / PowerPC, I’ve had to learn to take “runs anywhere” with a giant grain of salt.
- deleted 4y ago[deleted]
- johnklos 4y agoYou know, you can't just say "anywhere". User interfaces are used on microcontrollers, on embedded systems, on legacy systems, on odd platforms, on old platforms. Rust certainly doesn't target all of those, or even most of those, and not even many of those. Even statements like, "One codebase, every platform" are just... wrong.
- xwolfi 4y agoAnd if they were right, would have so many compromises nobody would use them: we have different platforms because we have different constraints, and that percolates up to the interfaces.
- deleted 4y ago[deleted]
- nicative 4y agoIsnt Yew (https://yew.rs/ https://yew.rs/) similar in regard of the react like way to update the html document? I understood that Dioxus goes beyond and is the whole platform to run the app by including a webview, but wouldnt make sense to have another framework like yew as dependency to manipulate a "Virtual Dom"?
- demonthos 4y agoDioxus uses the virtual DOM as the core that allows rendering to many different platforms. Yew and Dioxus are somewhat similar but Dioxus represents it's virtual DOM very differently internally. Because of the way Dioxus' virtual DOM is made unlike Yew, Dioxus will never diff the static parts of a component (read more here https://dioxuslabs.com/blog/templates-diffing https://dioxuslabs.com/blog/templates-diffing)
- pimlottc 4y agoSounds interesting, but where are there some basic screenshots of what it looks like on various UI platforms? The screenshots on the homepage all link to sample app repos which (at best) just have a single screenshot of the app running on a single platform.
- deleted 4y ago[deleted]
- jkelleyrtp 4y agoIt renders HTML and CSS. It looks like what HTML would look like.
- jspaetzel 4y agoFirst impression, the landing page renders quite wrong on my phone. Viewport is too wide and I'm able to scroll left/right. Got some work to do on the running anywhere part I guess. Or maybe that's just the landing page. Either way there's work to be done somewhere.
- wetpaws 4y ago>hooks Why do you keep copying worst parts of react
- usgroup 4y agoAnyone else bail as soon as they saw “inspired by React” on the splash page?
- deleted 4y ago[deleted]
- needz 4y agoWas this website written in it? It’s awful on mobile. :/
- egberts1 4y agoBlack screen, no content, no text selectable, no interactive component. Running Firefox 108.1 (24234) on latest iOS 16.1.3 with sunrise/sunset dark/light screen mode (currently dark)