6 ms·

Perhaps your experience with QML would be more pleasant if you would write backend in Rust or Julia (my current choice). In Julia I find that it is particularly

Perhaps your experience with QML would be more pleasant if you would write backend in Rust or Julia (my current choice). In Julia I find that it is particularly easy to iterate as it avoids any compilation step although that is not as smooth as using VS Code with hot reload on the side. There is also Felgo for reloading which I guess also preserves the state, but I have not tried it yet. One quite an advantage for QML is how easy it is to align elements to get started. Personally, I find it quite frustrating to get HTML to do what I want whereas in QML having only used for two months I already see how to model `Kanban` UI with QML.

onsclom 3y ago
I still don't get what advantage QML has over something like Svelte. Writing the QML backend with Rust would be nicer, but why wouldn't I just write my front end using Svelte/TypeScript with something like Tauri at that point? With statically typed languages you get autocomplete, more instant feedback, more editor integration for things like renaming functions variables, and the end result won't have type errors at runtime. Felgo is what I was hoping for, good find! That covers one pain point, but there's still many, many more. QML does have a simple and great list of components to get started with, where as HTML and CSS have accumulated many years of cruft. But, that being said, aligning elements into rows and columns is easy using CSS flexbox[1]. Flexbox has the benefit of being much more versatile than QMLs layout tools as well. I imagine using flexbox you could make the Kanban UI just as easily, and you'll probably run into less limitations. [1] https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
- JanisErdmanis 3y ago
  The flexbox does not seem to match the power of QML. For instance, I can have a two-pane view as simple as: Text { anchors.top : parent.top anchors.bottom : parent.bottom anchors.left : parent.horizontalCenter anchors.right : parent.right anchors.topMargin : 10 text : "Hello World" } which does not reference any dimensions of the objects. It is easy to reference an anchor of a sibling and other parent elements when needed. Also, making new components is easy; I can inherit properties of a parent element, add my properties and put them in a file for later reuse is something I use extensively. Building each component carelessly using whatever mockery to get the look I need and then isolating it with its own namespace is relieving.
  - onsclom 3y ago
    Thanks for the nice response! > The flexbox does not seem to match the power of QML. For instance, I can have a two-pane view as simple as: I'm a bit confused by this example. When you make the other pane wouldn't you need to define all of its anchors too? It seems like the more standard QML approach to a two-pane is using RowLayout[1]. RowLayout { anchors.fill: parent Rectangle { Layout.fillWidth: true Text { text: "pane 1" } } Rectangle { Layout.fillWidth: true Text { text: "pane 2" } } } I agree this is pretty nice and intuitive, but flexbox makes this problem easy too. <div style=" width: 100%; height: 100%; display: flex; "> <p style="flex: 1">pane 1</p> <p style="flex: 1">pane 2</p> </div> Yes inline css has problems, but I didn't want to scare you away with Tailwind[2] and I think inlined CSS makes this example clearer. > It is easy to reference an anchor of a sibling and other parent elements when needed. It seems like by composing layouts in QML you can avoid a lot of manual anchor setting. Though layouts do have their limits. Is that why you resort to setting anchors manually? Flexbox is much less limited and flexbox layouts compose really well. Do you have examples of UI layouts you feel QML solves intuitively that flexbox can't solve intuitively? > Also, making new components is easy; I can inherit properties of a parent element, add my properties and put them in a file for later reuse is something I use extensively Svelte works the same exact way. Well, except for the part that new components do not inherit from existing components. Svelte and other modern UI frameworks prefer composition over inheritance[3]. Composition allows you to be just as expressive, but without the footguns of inheritance. If you have a specific UI problem you think inheritance solves well, I'd be happy to try and create a matching composition based solution. > Building each component carelessly using whatever mockery to get the look I need and then isolating it with its own namespace is relieving. Svelte uses file based components as well. Each file is its own module in TypeScript/JavaScript. If you have rebuttals or other additional things to add I'd love to hear it! [1] https://doc.qt.io/qt-6/qml-qtquick-layouts-rowlayout.html https://doc.qt.io/qt-6/qml-qtquick-layouts-rowlayout.html [2] https://tailwindcss.com/ https://tailwindcss.com/ [3] https://en.wikipedia.org/wiki/Composition_over_inheritance https://en.wikipedia.org/wiki/Composition_over_inheritance
    - JanisErdmanis 3y ago

onsclom 3y ago

I still don't get what advantage QML has over something like Svelte. Writing the QML backend with Rust would be nicer, but why wouldn't I just write my front end using Svelte/TypeScript with something like Tauri at that point? With statically typed languages you get autocomplete, more instant feedback, more editor integration for things like renaming functions variables, and the end result won't have type errors at runtime. Felgo is what I was hoping for, good find! That covers one pain point, but there's still many, many more. QML does have a simple and great list of components to get started with, where as HTML and CSS have accumulated many years of cruft. But, that being said, aligning elements into rows and columns is easy using CSS flexbox[1]. Flexbox has the benefit of being much more versatile than QMLs layout tools as well. I imagine using flexbox you could make the Kanban UI just as easily, and you'll probably run into less limitations. [1] https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

JanisErdmanis 3y ago
The flexbox does not seem to match the power of QML. For instance, I can have a two-pane view as simple as: Text { anchors.top : parent.top anchors.bottom : parent.bottom anchors.left : parent.horizontalCenter anchors.right : parent.right anchors.topMargin : 10 text : "Hello World" } which does not reference any dimensions of the objects. It is easy to reference an anchor of a sibling and other parent elements when needed. Also, making new components is easy; I can inherit properties of a parent element, add my properties and put them in a file for later reuse is something I use extensively. Building each component carelessly using whatever mockery to get the look I need and then isolating it with its own namespace is relieving.
- onsclom 3y ago
  Thanks for the nice response! > The flexbox does not seem to match the power of QML. For instance, I can have a two-pane view as simple as: I'm a bit confused by this example. When you make the other pane wouldn't you need to define all of its anchors too? It seems like the more standard QML approach to a two-pane is using RowLayout[1]. RowLayout { anchors.fill: parent Rectangle { Layout.fillWidth: true Text { text: "pane 1" } } Rectangle { Layout.fillWidth: true Text { text: "pane 2" } } } I agree this is pretty nice and intuitive, but flexbox makes this problem easy too. <div style=" width: 100%; height: 100%; display: flex; "> <p style="flex: 1">pane 1</p> <p style="flex: 1">pane 2</p> </div> Yes inline css has problems, but I didn't want to scare you away with Tailwind[2] and I think inlined CSS makes this example clearer. > It is easy to reference an anchor of a sibling and other parent elements when needed. It seems like by composing layouts in QML you can avoid a lot of manual anchor setting. Though layouts do have their limits. Is that why you resort to setting anchors manually? Flexbox is much less limited and flexbox layouts compose really well. Do you have examples of UI layouts you feel QML solves intuitively that flexbox can't solve intuitively? > Also, making new components is easy; I can inherit properties of a parent element, add my properties and put them in a file for later reuse is something I use extensively Svelte works the same exact way. Well, except for the part that new components do not inherit from existing components. Svelte and other modern UI frameworks prefer composition over inheritance[3]. Composition allows you to be just as expressive, but without the footguns of inheritance. If you have a specific UI problem you think inheritance solves well, I'd be happy to try and create a matching composition based solution. > Building each component carelessly using whatever mockery to get the look I need and then isolating it with its own namespace is relieving. Svelte uses file based components as well. Each file is its own module in TypeScript/JavaScript. If you have rebuttals or other additional things to add I'd love to hear it! [1] https://doc.qt.io/qt-6/qml-qtquick-layouts-rowlayout.html https://doc.qt.io/qt-6/qml-qtquick-layouts-rowlayout.html [2] https://tailwindcss.com/ https://tailwindcss.com/ [3] https://en.wikipedia.org/wiki/Composition_over_inheritance https://en.wikipedia.org/wiki/Composition_over_inheritance
  - JanisErdmanis 3y ago