Hacker News Reader

Comment by jfkebwjsbx | Hacker News Reader

The kind of features you are describing existed two decades ago, in several IDEs, in one way or another, and for the most part do not require huge amounts of CPU/memory. Definitely not 2 orders of magnitude more.

> Of course the apps made today are very different from the apps back then, but making UI that displays data is much easier.

How so? Both VB6 and Delphi were designed to display and edit data quickly. Its main use case was creating business apps very quickly and both had WYSIWYG GUI designers in the IDE itself!

There were menus, buttons, lists, tables, tree displays, rich-text editors and many other ready-to-use controls. You had adaptors for different databases, OLE for embedded documents, COM support, etc. You could display images, video, sound too. Even commercial games were developed on them.

View on HN

None of that matters when once you need to display a list of items (where every item has its own group of UI widgets), you have to start dealing with a whole bunch of clunky model wrappers, and even basic features like sorting and filtering require special care. Not to mention keeping all the UI in sync when one piece of data that is displayed in more than one place changes.

Instead of just doing

    <>
      <h1>List of items</h1>
      {items
        .filter(itemFilter)
        .map(item => <div>
            {/* UI for the individual item, e.g. name,
                subtitle, icon, buttons, etc. */ }
        </div>)}
    </>

that also keeps the displayed data current no matter what - new data comes in from network, the filter in the search textbox changes, it all stays in sync...

I don't understand what you are talking about. What is so special about receiving data and displaying UI controls from it?

Networked apps, business apps, database frontends, etc. have been a thing since the 80’s, and I am not even talking about that but IDEs from the 90’s and later.

The code you show is identical to what was done back then in many languages, many frameworks and many systems. Filtering, sorting, per-item UI, multi-views, synchronization, etc. has been always a basic need.

The web is yet another UI/app framework. Nothing less, nothing more.

My point is that in environments like old-school Delphi or VB, or even with frameworks like Qt, those things take way more effort and boilerplate code than they should.

For exapmle in Qt you have to either subclass QAbstractListModel or use QStandardItemModel with weird QStandardItem wrappers around your data, then you have QSortFilterProxyModel (https://doc.qt.io/qt-5/qsortfilterproxymodel.html) and all that weirdness. And then for the actual UI of the individual items, you have QAbstractItemDelegate, etc. https://doc.qt.io/qt-5/qabstractitemdelegate.html

I mean, just look at this example: https://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-exam...

No way that should take that much code.

If you say so. I have worked professionally in quite a few UI frameworks and they are pretty much the same.

The web is actually one of the most complex ones out there due to the never ending frameworks and libraries that come into fashion every other year. Old environments had a defined set of things to use and learn and things were stable for many years.

In Qt you can build your UI on the fly with code without using those classes if that is what you are asking.

I doubt I could build something like this

https://codesandbox.io/s/eloquent-spence-d51td?file=/src/App...

in Qt or one of the "old school" desktop tools as quickly as I just did in a few minutes, that loads data from the web (mock) and displays them in this way (and has this level of flexibility for further development). There's just no way.

Hows the code in that link fundamentally different from what you'd write in e.g. Qt's QML?

One difference is that you can just use data directly as it comes from the net (or combine it with any other data in your application).

You don't have to wrap it in models like this https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html and then either recalculate that when the data changes or have a custom model class that does it. Though granted that is still a huge improvement over doing this in regular Qt Widgets (see the star example a few comments above), or one of the "old school" desktop GUI builders. This difference would be felt even more if the items also had some interactivity with state (e.g. expanded/collapsed things in them, lazy loaded extra info etc.)

One consequence of the way rendering works is that I can just use language-native constructs like `if` or the ternary operator to either include or not include the "Top poster" line in the example. Instead of having to do something like this https://stackoverflow.com/questions/27695717/conditionally-i.... Similarly, you can use map/filter on arrays, transform the data more easily before rendering it, etc.

Another difference is that JS/TS is the main language of the entire app, not a separate DSL that you can use for some parts and not for others. You can use async/await, have the entire npm ecosystem available, etc.

Though QML is still hell of a lot better in this regard than old school VB or Delphi used to be.

Reply on news.ycombinator.com