Hacker News Reader

As a developer of desktop applications as well, I've asked myself these same questions. While I don't have any definitive answers for you, I'll share my thoughts.

If you consider that an ecosystem evolves to the constraints of its environment, even from their pre-history at Xerox Parc, early GUI frameworks were incredibly constrained. But I think the most important constraint in their development was object orientation. Smalltalk blazed the trail for GUI programming, everyone else following after modeled their systems in that way. Object orientation became the most expressive way to program a hierarchical widget system (which most desktop systems are). Even early Windows HWND-style programming emulates virtual dispatch in non-object oriented C (also 'gobject').

In response, a vast body of knowledge and techniques around object orientation were amassed to mitigate these constraints as the ecosystem matured through the 80s and 90s. Not just patterns like MVC, Flyweight, Command et al, but also structural techniques like the event loop.

> Eventually, somewhere near the end of the 90s/middle of the 2000s, most of these things were "solved" for desktop/native, or put less charitably, they stopped changing.

So at the end of the 90s/middle of the 2000s the web browser grew out of being a document viewer into a very constrained widget kit, but the programming model was not object oriented and so the 'solved' problems needed to be solved again for a new set of constraints. Few of the traditional techniques applied, and the old object oriented way was either adapted (e.g. data binding became Redux, Flyweight/Prototype became templates) or disposed. Personally I find it a bit of a waste, but I don't expend any energy in the new ecosystem, so I don't want to be too judgy.

But I don't think desktop widget kits 'stopped changing', and are cherry-picking ideas from the browser, like 'declarative' (XAML, QML, etc) and 'responsive' (widget containers that re-flow the viewport for phone/tablet orientation etc). I hope I haven't misunderstood your question and wasted everyone's time.

Good thoughts, thanks for that reply.

How are you defining "widgets" in this sense, exactly? I'm not quite following what the line of questioning/thinking is here.

Like, I could say that React's "components" qualify. Self-encapsulated, reusable pieces of UI and logic, that expose a set of options for customization via props. What about libraries like React-Bootstrap, React-Widgets, Material-UI, or the dozens of other React-based prebuilt component libraries is different than the "widget" definition that you have in your head?

- https://react-bootstrap-v4.netlify.app/

- https://mui.com/

Or is the question more about the programming model and design patterns that React, Vue, and Angular are built around, and how they different from Gtk/Swing/WinForms?

A few basic widgets:

   * a treeview with expanding/collapsing nodes
   * vertical and horizontal resizable panes
   * scrollable container (i.e. contents exceed the view area)
   * spin buttons (display a value, with controls to increment/decrement)

that's the kind of thing I see missing from web frameworks. Are they there?

So I think the ultimate answer is that there is no standardized way to do some of these things on the web. There are many ways to accomplish UI as listed, I'll explain some here for a React app as an example.

* Tree view [0]: There is no browser level widget for this type of UI, so in a React app we would include the needed code as a dependency through NPM, and prepared for a browser with a bundler. For a tree view I think most devs would consider using a library/dependency.

* Resizable Pane [1]: Technically some resizing can be done with CSS but it's pretty superficial. I think many frontend devs would roll this themselves with some basic JS.

* Scrollable Container [2]: This is firmly in the CSS wheelhouse, and most cases will be handled by the overflow property. Some more advanced cases might use react-window [3] for a virtualized list, when you have 1000s of items.

* Spin buttons [4]: Here HTML does have us covered, as well as other basic controls like selects (drop downs), radio buttons, and checkboxes. But again if unhappy with the look you'll be reimplementing it with some light JS.

I'm a ~10yr frontend-ish web dev and have found this thread very interesting, thanks for sharing and discussing. On the web just don't have that standardized library of widgets like GTK+ or Qt, MUI is probably the closest, and that narrows you into a React app in most cases.

As for the vocabulary, a few things come to mind.

* Very low barrier to entry, just need Notepad and a browser, nothing to compile or install. One can find a beginning career without knowing much about coding logic at all. It wasn't until I moved into "modern" JS and "back of front-end" that I began to learn formal patterns and principles, and I still consider myself quite a novice in them.

* GUI exists on the barrier between design and code, so is hard to formalize and document in general. Additionally the culture of web development is slightly different, in that the expectation is every little thing can be styled and customized. This is at odds with the native approach, where a button looks like a OS button no matter what. This culture of customization/branding contributes to things like Electron where web CSS can be directly reused.

Thanks again for starting this thread, I've looked at making cross platform desktop applications before, but quickly abandoned it as it was so foreign to me. I usually opt for a small pkg'd [5] node server for my hobby application, exposing the GUI via a browser pointed to localhost.

[0] https://mui.com/components/tree-view/

[1] https://www.npmjs.com/package/react-resize-panel

[2] https://developer.mozilla.org/en-US/docs/Web/CSS/overflow\

[3] https://react-window.vercel.app/#/examples/list/fixed-size

[4] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...

[5] https://github.com/vercel/pkg

Thanks for the detailed response.

A few additional points. First, neither GTK nor Qt really represent a particularly standardized library of widgets. They are not particularly consistent across major versions, but then in addition if you compare to some other toolkit (e.g. Cocoa/NextStep on macOS), you'll find extras and omissions no matter how you do the comparison. Moving existing code between even just major versions of any cross-platform toolkit is painful and often triggers major rewrites/refactoring that quadruple whatever the time would have been anyway. Going between toolkits (e.g. Qt <-> GTK) is essentially a complete rewrite (you retain what you learned the first time, but very few lines of code will survive). Having said, the basic structure of your code will survive, because the fundamental model of a heirarchical structure of nested widgets that trigger callbacks in response to user input (and other) events remains in place.

One critical difference with native development is that we (the developer) control the event loop. This is important enough that even Qt was smart enough to allow you use it with a foreign event loop (e.g. the one from Glib that underpins GTK). In a browser context, the actual event loop is far below your JS that you could almost pretend there's another "virtual" event loop running (and this indeed matches some React-ish docs I've read).

> This is at odds with the native approach, where a button look like a OS button no matter what

Actually, this is less and less true, especially as "office productivity" apps migrate to the cloud and what's left "native" are "creative" apps. These typically have no (or at least, less) issue with adopting look-n-feel that is wildly different from platform standards, even for something as basic as a button. Even within Apple, there is apparently a separate toolkit that they use for some/all of their creative tools (e.g. Logic Pro) which overrides a lot of the default platform theme.

This is not really an answer, but just to add fuel to the fire: There have been several attempts either to standardize a set of widgets for the web or to create a library popular enough to be a de facto standard (e.g., semantic tags in HTML 5 and JQuery Widgets). They have all failed.

My SWAG hypothesis is that, unlike native applications, web apps are as much application as they are branding opportunities. PhotoShop on the desktop has too many buttons to leave room for branding. A web application will typically leave copious real estate for branding, cross-promotion, mascots and other graphics, etc. You typically have a lot less stuff in a view/page, and that stuff usually receives more aesthetic customization and visual design attention.

> Right, so yet another way to ask my question is: why don't web frameworks fix this by "evolving" toward a widget-like design so that web devs can think about this more like native devs?

"a" widget like system presupposes one specific (not merely faintly authoritarian) vision of what fits best, what is destined to be. there's plenty of widget like systems on the web, react is little but a component/widget framework. just not with the specific design pallet imagined.

many webcomponent like systems exist, manifest across many many web frameworks & libraries. we can probably spend days trying to draw fine lines of difference between what a react component is & a wodget is but for reals, they're very shared in essence. the differences are less remarkable, clearly to me, than the similarities. and there are so many endless design systems to pick from.

backbone is a still not bad option that wprked hard to re-emact classically desktop patterns. the web got better for itself, the web kept moving & evolving. i dont think that's all progress, that the territory has proved itself yet, but it hasnt been stuck in decades old patterns. but systems lile backbone show how expressible those patterns have been.