4 ms·

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 bu

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...

jfkebwjsbx 6y ago
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.
- realharo 6y ago
  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 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 https://doc.qt.io/qt-5/qabstractitemdelegate.html I mean, just look at this example: https://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-example.html https://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-exam... No way that should take that much code.
  - jfkebwjsbx 6y ago
    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.
    - realharo 6y ago
      I doubt I could build something like this https://codesandbox.io/s/eloquent-spence-d51td?file=/src/App.tsx 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.
      - detaro 6y ago
        Hows the code in that link fundamentally different from what you'd write in e.g. Qt's QML?
        realharo 6y ago
        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 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-include-component-based-on-property-value 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.

jfkebwjsbx 6y ago

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.

realharo 6y ago
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 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 https://doc.qt.io/qt-5/qabstractitemdelegate.html I mean, just look at this example: https://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-example.html https://doc.qt.io/qt-5/qtwidgets-itemviews-stardelegate-exam... No way that should take that much code.
- jfkebwjsbx 6y ago
  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.
  - realharo 6y ago
    I doubt I could build something like this https://codesandbox.io/s/eloquent-spence-d51td?file=/src/App.tsx 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.
    - detaro 6y ago
      Hows the code in that link fundamentally different from what you'd write in e.g. Qt's QML?
      - realharo 6y ago
        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 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-include-component-based-on-property-value 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.