Readit News logoReadit News
Posted by u/fzyzcjy 2 years ago
Show HN: Rust GUI Library via Fluttercjycode.com/posts/rust-ui...
Hi, I made a bridge (https://github.com/fzyzcjy/flutter_rust_bridge v2.0.0) between Flutter and Rust, which auto translates syntaxes like arbitrary types, &mut, async, traits, results, closure (callback), lifetimes, etc. The goal is to make a bridge between the two, seamlessly as if working in one single language.

Then, as an example, I showed how to write Rust applications with GUI by utilizing Flutter. That is discussed in the link in details.

To play with it, please visit the GitHub repo, or refer to the end of the article for detailed folders and commands.

When I first released 1.0.0 years ago, it only contained few features compared to today. It is the result of the hard work of contributors and me, and many thanks to all the contributors!

tmpfs · 2 years ago
I have been using this to build an app[0] for the last couple of years and I want to say that it has been a pleasure to use, there are some wrinkles but overall I have been very happy with the experience.

Upgrading from v1 to v2 was not too difficult and v2 is a significant upgrade with lots of useful features, massively improved codegen experience and support for tokio async were the big gamechangers for me.

Writing all the app business logic in Rust and using Dart as the front-end works out really well. I know Flutter/Dart doesn't get much love here on HN but in my opinion I think it's much easier to reason about than a system like React which I think is the wrong level of abstraction compared to Flutter's render the entire widget tree approach.

Massive thanks to @fzyzcjy for all the work on FRB, great job!

[0]: https://saveoursecrets.com

bmitc · 2 years ago
Flutter is not bad, but I hesitate diving into it based upon who controls it. Using a Google product feels like you're in constant threat of it just disappearing.

It also still has all the remnants of mobile and fingers and not desktop and mouse. Support for improving this is non-existent in my experience.

sgarg26 · 2 years ago
If this takes off it is only a matter of time before someone creates a rust based engine around this framework that does not rely on Google. For now, one pro of google maintaining flutter is that they also maintain android.
seabrookmx · 2 years ago
Why conflate Google's customer facing products with their OSS technology contributions? It seems a weird comparison to make, as if their sales and marketing departments are the ones behind technology decisions.

Angular came out of Google and hasn't gone anywhere. Also GoLang.. even GWT was supported well past its prime and is now maintained by the community. What evidence is there that they abandon languages and frameworks?

MrJohz · 2 years ago
> I know Flutter/Dart doesn't get much love here on HN but in my opinion I think it's much easier to reason about than a system like React which I think is the wrong level of abstraction compared to Flutter's render the entire widget tree approach.

Could you expand on this a bit? My impression was that Flutter and React had relatively similar approaches to components, but I haven't had much experience with Flutter yet, so I'm interested to hear your experiences!

mdhb · 2 years ago
I’m too lazy right now to get into all of the specifics but just wanted to drop a quick note to say that I’ve been doing web development since 1997 and the difference between React and Flutter is like day and night.

It’s genuinely hard for me to overstate the general quality of life improvements both from the developer experience and the overall quality of the apps I can produce in any given time frame.

A big part of the reason for that is Dart is itself hands down the nicest language I’ve ever worked with. The team behind it got real serious when it comes to tooling and language design and everytime I have to go back to TypeScript I feel like I’m trying to run with a 50kg backpack on.

tmpfs · 2 years ago
At a basic level Flutter renders the entire widget tree and caches components that don't need to re-render rather than applying a diff of changes to the DOM.

But it's really the Flutter/Dart API and widgets that make it much easier to work with, if I need to load some data asynchronously I use a `FutureBuilder`, if I need a stream of events I can use `StreamBuilder` etc. Compared to Reacts state, hooks, memo, effects etc. you end up with code that is far easier to reason about what is rendering when and why.

Oh and the real killer feature is Flutters hot reload experience, it's easily the best DX I've seen for GUI work.

As another comment mentioned it really is like night and day. I recommend giving it a try.

nu11ptr · 2 years ago
React = one small piece of a very large required ecosystem (HTML + CSS + Javascript + NPM + React + Vite + ???)

Flutter = a UI framework for mobile/desktop/web (Flutter + Dart)

On top of the purpose built nature, nearly everything is a Widget, even layout/styling making it pretty easy to grok very quickly.

satvikpendem · 2 years ago
They do have similar approaches, I'm not sure what the above commenter is saying as both work basically the same (with React class components at least). Flutter doesn't have hooks but they're addressing that via macros next year, and anyway today there are packages like flutter_hooks and ReArch that enable hook-like functionality in Flutter today.
satvikpendem · 2 years ago
But, Flutter and React work the same way where UI is a function of state. In fact, Flutter started off imperatively but after React was released, they changed it to be declarative, and now Android via Jetpack Compose is changing to be declarative, all on the same general principle. I also use packages like flutter_hooks or ReArch which make encapsulating state much easier, I couldn't stand using initState and not forgetting to dispose for each piece of functionality.
fzyzcjy · 2 years ago
You are welcome, and happy to hear it works for you!
nu11ptr · 2 years ago
> I know Flutter/Dart doesn't get much love here on HN but in my opinion I think it's much easier to reason about than a system like React which I think is the wrong level of abstraction compared to Flutter's render the entire widget tree approach.

Yeah I really like Flutter/Dart. I had less an issue with React itself than I did the whole HTML/CSS/Javascript ecosystem and tooling. Flutter is a breath of fresh air in that it is a purpose built ecosystem for UIs. You load the SDK and are ready to go with features like hot reload out of the box. No need for gamut of tools and to figure out how they all work together. Also, no need for HTML + CSS! I think the only reason it isn't more popular is because we have such a huge # of frontend devs already trained on HTML/CSS/JS, as Flutter is a lot simpler out of the gate, and much easier for traditional GUI paradigm people IMO.

samstave · 2 years ago
Just want to say, your site is very aesthetically pleasing. I hate blue websites (FB Blue) -- but the deep tones that SOS uses and contrasts are really appealing.

So is the app, subscribed.

nu11ptr · 2 years ago
Looks nice. What UI design system did you use here if I can ask?
blopker · 2 years ago
While I don't see the advantage of writing UI in Rust vs Dart, I'm a huge fan of flutter_rust_bridge.

The work fzyzcjy and the community have put into calling Rust code from Dart seamlessly is such an asset to Flutter apps. I remade the popular image compression app ImageOptim in Flutter over a weekend because webp wasn't supported. After a little pain in the initial setup, I was able to call mature Rust image libraries using flutter_rust_bridge and a small wrapper[0]. It even handled all the parallelism for me.

The app ended up being more capable and faster than ImageOptim, largely just because of the Rust integration. Thank you fzyzcjy!

[0]: https://github.com/blopker/alic/blob/main/rust/src/api/compr...

fzyzcjy · 2 years ago
You are welcome, and I am happy to see it helps! When I initially develop flutter_rust_bridge, my personal usage scenario is quite similar to yours: using Rust for some high performance algorithms.

Deleted Comment

bubblebeard · 2 years ago
Commendable effort! I’m currently using Tauri for a project myself and was wondering if anyone has any pros/cons between the two?
fzyzcjy · 2 years ago
Thank you! I heard some people saying that, for apps using JavaScript, Tauri is replacing Electron and is popular nowadays, since Electron is very widely used. It seems Tauri cannot let Rust communicate with JavaScript very seamlessly yet, e.g. https://tauri.app/v1/guides/features/command/ seems to have mainly basic features. oneshtein mentioned below that Tauri does not support mobile as first class citizen yet as well. Looking forward to seeing Tauri's bridge to improve and supporting mobile better in the future!
bubblebeard · 2 years ago
Thanks for the info! I will keep an eye on this for future projects, keen to try it out. I’m currently working on a project being converted from Electron to Rust/Tauri. I recall Flutter being discussed, but our frontend dev was more comfortable with React.
bobajeff · 2 years ago
From what I can tell. I've not used Tauri and it's been years since I've tried flutter.

Tauri currently has poor support for mobile and Linux (because of the state of WebkitGtk).

Flutter uses Dart which is not widely used for anything else. Harder to learn as there is no MDN, w3schools or standard spec for it. Also Flutter Web has issues due to it's use of Canvas over the DOM.

IMO, electron is still the way to go for cross platform apps.

burakemir · 2 years ago
Interesting! IIUC this is done using source-to-source translation? It is a bit hard to understand from the docs what technical approach is. The docs are clearly aimed at users and I find them impressive, well done. I'd be interested in knowing the approach and how it compares to wasm based Rust web frameworks before diving more deeply into it.

One advantage of combining Rust with Flutter seems to be that Flutter is a whole framework already and one would be able to share code and data structures between server and client side.

A comparison with other ways Rust

fzyzcjy · 2 years ago
Thanks! Shortly speaking, the Rust code is parsed (e.g. "here is a function and there is a struct"), and then some Rust and Flutter code are generated. As for comparison, some pros and cons are discussed in the blog.
sbt567 · 2 years ago
Well done! I've heard only good things about rust_flutter_bridge. Some questions though (more like flutter question), how bloated flutter is (i.e. final app size) compared to mobile native (Java, Swift?) for simple app? And how's the UI performance looks like?
fzyzcjy · 2 years ago
For app size, it depends on your specific scenario, because e.g. Flutter automatically removes library code that is not used. I remembered (but the memory is blur) simple app has something like ~5MB. Btw remember to split .so file per abi. For UI performance, I personally find it quite good, and Flutter(Dart) is compiled to assembly code via AOT (instead of e.g. JIT or interpreted), which theoretically speaking is also fast. For both, I would suggest to make a demo for your specific case to have more accurate results. Also I guess ask/discuss on the Flutter community may help.
BodyCulture · 2 years ago
How is the a11y story with this? I did not find any info about it in the document, but I can not imagine anyone releasing a GUI kit in 2024 without extensive a11y support, so why not mention it?
nsriv · 2 years ago
Do you mean in Flutter generally? I'd say it's very good, easy to build in on widget by widget basis, very easy to check and rest when running builds.
nu11ptr · 2 years ago
I use Flutter for my desktop UI and Rust for my backend. However, I chose to separate the two using gRPC instead of the bridge. This allows me to be agnostic of language on both sides and I suspect gives me a cleaner interface for mocking the backend from my frontend. It also makes it easy to place the UI and backend on different machines giving a true client/server architecture. The con is likely that the interface is probably more verbose, however.
nevi-me · 2 years ago
Do you run a gRPC service on the desktop where the UI runs, and connect the 2 via localhost?
duped · 2 years ago
If you do this please don't use localhost, the socket domain for IPC is AF_UNIX not AF_INET. Even Windows supports it.
mdhb · 2 years ago
Not op but I’m developing an application with this exact approach as we speak, although my backend code is in Dart also.

You can also do gRPC over Unix domain sockets too if you’re sticking with desktop but overall I really like this approach as it makes it trivial for me to move from desktop app to web app with only some minor config changes.

nu11ptr · 2 years ago
As one option, yes, the other option is to run them on different machines. App isn't done yet but the idea is that you are presented an option to either connect locally (if localhost detected) or remotely via auth on UI startup.
pjmlp · 2 years ago
Much better than reaching out to Chrome shells or Web widgets, kudos for the effort.
fzyzcjy · 2 years ago
Thank you!