itch.io

Hey, cool question!

It's been a while since I've done "traditional" GUI programming (I've done a bit of GTK back in the days, looked at QT some, etc.) but I definitely agree with both the "hellish" and "awful" labels.

I think GUI will always be hard, and even though I ~like the modern web tools we have available (like reactive UIs, immutable data structures, the Chrome developer tools, etc.) it is definitely its own kind of hell.

That said, as far as the shell is concerned (creating a window, menu, interacting with the host OS), Electron has been treating us very nicely, and will get you started quite quickly.

Hi! For the Superpowers app, we used NW.js in the past and we've just finished our transition to Electron. I like it a lot, the separation between the "server-side" (Node.js) and the client-side (windows & browser) is much cleaner than in NW.js.

Regarding building user interfaces with Electron / HTML5 technologies, I find it's a pretty capable platform. I'd say CSS stylesheets are the big thing to master, the Web platform has many small quirks and there are a few key things to know that will make your life much better.

The following might be more specific information that you were asking for, but I hope it'll give a concrete idea of what it's like.

First, the good

CSS is often mocked and I'm sure it could be a lot better, but it lets you do a lot of things visually that many UI development kits won't. Custom borders, transforms, text transforms, web fonts, shadows, gradients, keyframe animations, relative sizing... it's pretty good in many ways. The ever-increasing ability to edit things visually from browser devtools and the many compile-to-CSS languages make it even better.

It all takes a while to learn though.

The box model kerfuffle*

(* I've been meaning to slip this word into a post or tweet for a couple days now. VICTORY... I think. I'm not entirely sure it means what I think it means though.)

Web pages and apps are made out of boxes (<div> elements and stuff like that). Historically, browsers have standardized on the "wrong" model for calculating box sizes: when specifying widths and heights, they do not include padding, border or margin sizes. This is terrible for precise UI design. Thankfully, you can override this box size computation model with the following CSS code:

* { box-sizing: border-box; }

I think most designers now include this at the top of their CSS files. I know I do.

The flexbox miracle

A few years ago, the Flexbox standard emerged. It lets you do fluid designs by specifying some sizes explicitly and then letting other blocks flow to fill in the gaps. Great for menus and side-panels, almost essential to any application, really.

The spec had a lot of iterations and took a long time to settle into its final form. There are still some bugs being worked out in the various browsers but overall it just works. Make sure to look for recent / up-to-date tutorials!

Missing UI primitives and palliative tooling

The biggest pain might be that browsers are lacking various UI primitives you'd love to have in many applications: no native tree views, no tab strips, no resizable panes. It's getting better but sometimes you'll need to use existing libraries or build your own.

The npm package manager has everything under the sun, and combined with a tool like Browserify or Webpack, you'll be able to manage dependencies fairly well. Obviously, it's another layer of things to master before you can have a good development experience. And then you'll probably want to use Babel.js or TypeScript to be able to write the JavaScript of tomorrow today :). Because the JavaScript of today (soon to be the JavaScript of yesterday) sucks.

In conclusion

Standing from where I am, having invested all that time into it, I enjoy the Web as it lets me build multiplatform and ubiquitous apps that will work for many years. If you're just getting started though, it's a fairly big pill to swallow, so I guess there's no other way to know than try it out and see if you like it!