DRdrowe859·Nov 23, 2021
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,
Read the rest
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