I'm very interested in (and a total novice in) cross platform GUI application development. Hadn't heard of GPUI, though I had heard of Tauri. I looked at the GPUI front page and saw this mess of almost-CSS method chaining... Surely there's a better way? This seems horrible to me.

> div() .flex() .flex_col() .gap_3() .bg(rgb(0x505050)) .size(px(500.0)) .justify_center() .items_center() .shadow_lg() .border_1() .border_color(rgb(0x0000ff)) .text_xl() .text_color(rgb(0xffffff)) .child(format!("Hello, {}!", &self.text)) .child( div() .flex() .gap_2() .child(div().size_8().bg(gpui::red())) .child(div().size_8().bg(gpui::green())) .child(div().size_8().bg(gpui::blue())) .child(div().size_8().bg(gpui::yellow())) .child(div().size_8().bg(gpui::black())) .child(div().size_8().bg(gpui::white())), )

IMHO Rust isn't a great language for describing UIs because it is too explicit in places that doesn't need to be for coding a UI. Which is why in Slint (another Rust UI framework) we opted for a DSL. The application logic stays in Rust, but the UI is described in a language designed for it.

Your example would look like this:

    export component Hello inherits Rectangle {
        in property <string> text: "World";
        width: 500px; height: 500px;
        background: #505050;
        border-width: 1px; border-color: blue;
        drop-shadow-blur: 15px; drop-shadow-color: #0008;
        VerticalLayout {
            alignment: center; spacing: 12px;
            Text { text: "Hello, \{root.text}!"; font-size: 20px; color: white; horizontal-alignment: center; }
            HorizontalLayout {
                alignment: center; spacing: 8px;
                for c in [#f00, #0f0, #00f, #ff0, #000, #fff]: Rectangle { width: 32px; height: 32px; background: c; }
            }
        }
    }
    

> Surely there's a better way?

I'd like to know it. I don't think that it can be substantially better. You have to compromise between the amount of customization you are allowed to do and the amount of options you have to pick values for.

I can't vouch for GPUI, I don't know how good its compromise is, but it bears enough similarities to other modern UI-toolkits. I don't think there is a better way, but if you know one, I'd like to know about it.

And, well, don't forget, it is a front-page example, that is not necessarily an example how one should compose their code, it demonstrates what you can do with GPUI. In real life code you'd probably move those children's construction into separate named functions, maybe you'd use some predefined styles to apply to individual elements, instead of picking fg/bg/text-colors, maybe sizes and some other attributes for each one explicitly, and maybe some other tricks.

All a language needs to be good at expressing UIs is some sort of tail lambda syntax like Swift and Kotlin. It's the perfect way to express a tree structure (which is essentially all UI) while also being in a true programming language (as opposed to a markup language like XML).

This is basically what coding UI in Bevy was like before the `bsn!` macro

Well, keep in mind that you’re not expected to have the entire UI in one statement. You’re supposed to break this up into functions. That’s why stuff like Flutter and SwiftUI work.

Also, this is basically what Tailwind code looks like.

That's a result of the borrow checker meeting dev ergonomics. Method chaining/functional style ks extremely common. GPUI is also fairly low level, it lets you do a ton of things!

I'm never going to complain about SwiftUI again

HTML and CSS, for all their faults, are the best layout engine we have.

Honestly I'd pick this over whatever is going on with tailwind.

On a more serious note I feel like it's not bad but could be improved if they managed to break it down by styling domain (sort of like SwiftUI).

Something along the lines of .flex(gap: 2).text(size: "xl", color: ...)

honestly I'm not sure why they didn't choose to define a curated subset of HTML/CSS and use a parser. That's what the code is defining anyway

Someone needs close the loop and make an HTML/CSS to GPUI transpiler

One person's mess is another person's Tailwind