5 ms·

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 t

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.

kamikaz1k 3y ago
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/ https://www.codux.com/
WorldMaker 3y ago
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.
- jalk 3y ago
  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?
- Shorel 3y ago
  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.
kaeland 3y ago
Try CLOG, https://github.com/rabbibotton/clog https://github.com/rabbibotton/clog
_2z1p 3y ago
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.
- Cthulhu_ 3y ago
  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.
  - nathancahill 3y ago
    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.
    - pcl 3y ago
      Yeah, it’s stunning how many UIs fit within their struts and springs model, and how well they model scales to resolution changes.
- FpUser 3y ago
  Modern drag and drop designers / components do support flexible layouts
manojlds 3y ago
That's what a lot of low code platforms are trying to achieve.
rcme 3y ago
Have you tried WebFlow?
holoduke 3y ago
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.
seanp2k2 3y ago
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.
- FpUser 3y ago
  >"/ 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
- selfmodruntime 3y ago
  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.
  - flexagoon 3y ago
    Well, there's also Flutter
    - Conscat 3y ago
      Flutter isn't acceptable for Apple platforms, especially iOS. It technically exists, but barely works.
    - selfmodruntime 3y ago
      As someone who relies on accessibility, flutter is a nightmare.

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.

kamikaz1k 3y ago

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/ https://www.codux.com/

WorldMaker 3y ago

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.

jalk 3y ago
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?
Shorel 3y ago
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.

kaeland 3y ago

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

_2z1p 3y ago

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.

Cthulhu_ 3y ago
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.
- nathancahill 3y ago
  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.
  - pcl 3y ago
    Yeah, it’s stunning how many UIs fit within their struts and springs model, and how well they model scales to resolution changes.
FpUser 3y ago
Modern drag and drop designers / components do support flexible layouts

manojlds 3y ago

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

rcme 3y ago

Have you tried WebFlow?

holoduke 3y ago

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.

seanp2k2 3y ago

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.

FpUser 3y ago
>"/ 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
selfmodruntime 3y ago
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.
- flexagoon 3y ago
  Well, there's also Flutter
  - Conscat 3y ago
    Flutter isn't acceptable for Apple platforms, especially iOS. It technically exists, but barely works.
  - selfmodruntime 3y ago
    As someone who relies on accessibility, flutter is a nightmare.