Would you consider Declarative UI to be RAD?

I know RAD means Rapid Application Design, but would you consider Declarative UI to be RAD?

The idea is design the UI once (in code) to run on multiple targets, while it is coded and not drawn out, you do have a live preview, so… I for one think it would constitute RAD, but I’m also seeking other opinions.

I think, provisionally, that it probably qualifies. When you think about it, a round-trip visual <=> code designer like the one used for WinForms apps, or Xojo’s pure drag and drop, etc. really is only different in that it lets you work WITH the preview directly, by dragging things around. The main thing missing from a declarative UI coupled with a preview is the initial positioning of controls, and not being able to micro-position them with the arrow keys or snap-to-grid with the mouse. But from what I gather, declarative models tend to conceptualize the window as a stacked series of row and column-like zones and you choose which one you want a control to be in … so maybe that’s adequate, especially given that these are generally responsive designs that self-adapt to almost any form factor from mobile to desktop and browser.

With the caveat that I haven’t actually tried one of these design tools yet, I would say it’s at best a wash and at worst not quite as nice. “Rapid enough”, maybe?

One thing I’d want ideally is the ability to quickly change window size / form factor, so I can see how the design adapts on different devices with a good degree of accuracy. Ideally by dragging the window borders, but at least selecting from a drop down of common options (iPhone, Android, tablet, any other supported portable devices, and some common desktop window sizes).

2 Likes

I think it’s how you create the Declarative UI. I’m not using Desktop, but instead Web using PHP and I do not miss the Xojo GUI at all except for it’s easier to add code to events in Xojo.

Below is a responsive card and its code. I define a card and a table, and then add several Label / Input pairs. I could make the code even simpler, but this gives me flexibility. For the rapid part, I make a change and then use Keyboard Maestro to reload Safari and Safari Console. I love the speed.

Behind the scenes, I have a MySQL schema table that defines most of each columns attributes that I can pull from shown even further below.

My flow is to create a Table in MySQL, run the Schema updater, fill in Labels and such, then run the Schema Cache updater, then I can run some php code to create a page with many cards.

I’m super happy with it!

1 Like

Yeah while a drag & drop UI is nice I dont think it required for RAD
Doing it declaratively & previewing it really quickly is darned close
And since you can, in some cases, preview it in different sizes (web, small phone, larger phone, tablet, etc) very quickly thats perhaps even better
Many D&D interfaces dont support such things widely

I’d guess there are pros & cons to each

1 Like

It is a new paradigm. SwiftUI does all the positioning very well and there is a host of modifiers available that give developers the power to fine-tune visual appearance.

2 Likes

While it’s not only a visual designer but a complete low-code tool, FlutterFlow allows you to do just that: rearrange quickly and see the preview on different device sizes.

It has all the columns, rows and their controls on the left and in the middle of the screen you see how it looks like. On the top of the screen you can select different devices.

4 Likes

How are you liking Dart?

I like it. Coming from Xojo and with Basic (Visual Basic, VBA and Xojo) as the only language I am really familiar with, I did not have many alternatives and I did not want to learn a new language from scratch. FlutterFlow helped me develop apps even quicker than with Xojo (a lot quicker to be honest) and I’m learning a little bit of Dart along the way.

It is easy to understand once you wrap your head around the concept and while I’m exposed to it only when doing custom functions (like APIs, OneSignal integration, etc.), I learned a lot debugging my apps in Android Studio - also modifying some Dart code here and there - and right now there’s really nothing I can do in Xojo (with 13 years of experience) which I cannot do in FlutterFlow. I would not feel comfortable to write all the code from scratch in Dart right now though.

All in all, as it’s my hobby, it’s been a very fun & satisfactory experience moving from Xojo to FlutterFlow. The first app I completed in less than 2 months without any prior knowledge in FlutterFlow/Dart, it’s now available on both iOS and Android. I had spent half a year on it in Xojo with the app being finished about 60% to 70%. And that would have been the iOS version only.

1 Like

One more thing to get back on topic: I absolutely loved Xojo iOS’ auto layout because you could design the screens for all device sizes very comfortably. And I did not know how any other layout concept could match or even improve that but I feel that Flutter/Dart’s column & row concept is just as good or even better than auto-layout. I like designing the screens with it. At the same time though I believe I wouldn’t love it as much without the GUI in FlutterFlow.

Since I’ve done a ton of C# and it’s just another C-family language I doubt it would be a challenge for me but I haven’t looked into performance and what it compiles to and that sort of thing. If the tools are that good then that makes it something worth investigating as a platform even if it’s language bound at least for now.

I have to say, I have zero experience with large sets of data, so I can’t really say anything about how it scales or performs. At least it’s faster than anything I’m forced to use at work…

Hmm, no… but… once you have a well designed declarative UI system, it is a piece of cake for someone dedicated to write a drag and drop UI designer tool creating all the code behind the scenes, as people already said here, like FlutterFlow. You drag and drop “objects”, a code is inserted behind the scenes and you see the preview and that code, click on the dropped objects, make adjustments in parameters, and the code and the preview follows you. That’s a RAD tooling for a declarative UI capable system. Sad that Google did not include something like that for free in a Flutter/Dart IDE, and not a paid online service as FlutterFlow. I still follow them, but they are busy building bricks for walls I want since 2019 and they are slooow. The Flutter for Desktop is still a joke under development for years. It is basically a one window tablet app lacking everything. And they are working on that, multi-windows, multi-displays, multi-engine for years. Maybe we see some preview in 2024. The real Flutter for Desktop 1.0 never existed, we have a preview of a tablet Frankenstein app that runs on desktop OSes advertised as “Released and stable”.
But yes, Flutter future is great, and they are working on it, they just can’t fulfill people’s expectations in a good pace. For mobile it is great.

Sounds like Apple’s Catalyst, which appears to be all but forgotten about now.

To make sure I get what you’re saying, you consider RAD to be a drag-n-drop UI builder, not code the UI designer. In some cases it is much easier to adjust the UI in code than with a d-n-d designer.

RAD demands pick some blocks and throw on a surface and you have an UI in seconds. Not the best, not the most beautiful, but functional. A WYSYWYG drag and drop UI builder + code editor is RAD. Fast prototyping releasing a MVP rapidly with few clicks is RAD. Later you can start a beautification phase adding details to the code the UI builder gave to you, by hand.

1 Like