Hacker News Reader

Comment by blackbear_ | Hacker News Reader

React is indeed really neat. At the same time, however, I miss the visual drag & drop GUI designers that were in vogue a few decades ago. HTML and CSS are the tragedy of modern UI design.

View on HN

The drag and drop GUI designers used to work because most people were using screens that were approximately the same size and resolution for the most part back then. That is no longer the case today when there is pressure to support everything from a smart watch all the way up to a UHD 4K monitor or TV. Fixed layouts are also much more difficult to localize and translate to other languages than modern layout systems.

And yet, I found Apple's Interface Builder to work pretty well, for apps that should work on phones and tablets in both portrait and landscape mode.

Mind you, this was a long time ago now.

Apple's IB used a constraint-based layout by default. It was a fairly novel idea at the time. HTML was ill-suited for that until flexbox/grid came along.

Yeah, it’s stunning how many UIs fit within their struts and springs model, and how well they model scales to resolution changes.

Modern drag and drop designers / components do support flexible layouts

It's one of those "grass is greener on the other side" situations.

I'm currently bouncing back and forth between VB6 and HTML/CSS and yeah sometimes it is nice to just quickly drag something into place, but other times I really wish I could just use a layout system like CSS Grid (or Flexbox) and give it all the items I need and let it figure out how to lay it out.

For instance, recently I had to edit some "tables" in VB6 that turned out to have been hand-drawn with pixel-perfect lines and changes were incredibly slow and I would have murdered for that to be in HTML/CSS.

Sometimes I like (and miss) the best of both worlds in XAML where it has drag-and-drop design tools, but also the copy-and-paste and handwrite support of XML, and it has modern layout tools like Grids for auto-layouts/responsive layouts.

And you can search/diff the pure text representation which is a major plus as well. I absolutely hate the workflow of constantly moving the mouse back and forth between the visual components and some gigantic property panel sitting at the edge of the window (index-finger programming). Floating windows are even worse, as they always seem to get in the way, so now also spend time on window ceremony (moving / resizing the "floaters"). In graphics tools(InkScape for instance) I almost always move objects around using the cursor keys as my mouse based positioning skills are just not accurate enough (and I know that I'm not the only one)

Anybody have good examples of tools (graphics editors for instance) that has a good alternative to that clunky property pane?

The grid system of wxWidgets also works like that.

It has drag-and-drop design tools, and copy-paste, and it can be written programmatically.

So the best of both worlds exists, and it is just not used enough.

wxWidgets has Python bindings.

I view the rise of React and especially Electron as the failure of things like GTK, Qt, and e.g. Swing to make a useable cross-platform GUI toolkit that isn't a total nightmare to work with / compile / debug / install / package...it's literally easier to ship [most of] an entire web browser instead. That's insane to me.

>"/ compile / debug / install / package"

Replace "compile" with transpile, "install" with deploy that are the same things anyways and it sounds like most projects done by web developers.

>"That's insane to me"

Congrats

I said this before, but here it goes. People always wished for the *one stack that would work the same 99% of the time for all available platforms. Now that it's here, they hate it.

Yes, Electron is bad, but there are alternatives in progress. Layouting with HTML and CSS is here to stay. It's like git, the best of all the worst tools to get the job done.

Well, there's also Flutter

Flutter isn't acceptable for Apple platforms, especially iOS. It technically exists, but barely works.

As someone who relies on accessibility, flutter is a nightmare.

you can use drag and drop GUI builders on top of react. there's been a lot of attempts at that. a significant recent effort from Wix: https://www.codux.com/

Try CLOG, https://github.com/rabbibotton/clog

I worked with many different UI kits. From native windows to Ubuntu to automotive to embedded to Android to Apple. I find HTML and css by far the most convenient UI toolkit there is. Never have creating UIs been so easy as with css. A relief it is.

That's what a lot of low code platforms are trying to achieve.

Have you tried WebFlow?

Reply on news.ycombinator.com