6 ms·

>You can create a GUI using something like Qt, but the code to make it is messy and unorganized. It doesn't serve the author well to make this comparison. Sayi

>You can create a GUI using something like Qt, but the code to make it is messy and unorganized. It doesn't serve the author well to make this comparison. Saying it's less messy to manage Proton/React source code files and the associated Node/JS/etc infrastructure is an extremely dubious claim. One of the things I like best about Qt is how non-messy Qt development is. Most everything (source files, resources, etc.) lives in a well-organized project that is easily managed using the Qt Creator IDE. The project structure is well-documented and standardized. It's also quite strange to compare React code to code using the Python binding for Qt. That's not how most Qt apps are written. Most Qt apps these days use QML, which is based on regular old JavaScript. Besides being a more accurate representation of the way Qt development is normally done, it would also be more interesting to compare one JavaScript-based framework to another. (Although I recommend not making the comparison at all, since I don't believe a fair comparison would favor Proton.)

kusti8 8y ago
Thanks for the feedback! I'm not a Qt dev, so I wasn't aware of the practices. I'll revise it and remove the Qt code.
mlsarecmg 8y ago
This seems like a misunderstanding of what React is. JSX is not a template. It is a DSL or superset with direct access to the presentational layer. It gets "transpiled" away in the building phase. React components are not imperative but declarative, they reflect state instead of inflating layout. Layout inflating (QT, Android), MVC/MVVM (XAML), and views being functions of state (React) are paradigm changes. View = fn(state) solves longstanding issues with all the previous approaches, and of course it decreases their complexity. It is also the first approach that's breaching the platform barrier successfully while maintaining the high-level. You can write React for countless of targets, being able to re-use and apply the eco-system.
- westoncb 8y ago
  There is no reason you couldn't use the example QML above in place of JSX and still receive the same benefits. It would still be `View = fn(state)`; it's just a different syntax for specifying `fn`.
  - mlsarecmg 8y ago
    From what i've seen this is layout inflating, you have a template and you fill it imperatively. Which would be one of the oldest paradigms we have. Maybe i am getting this completely wrong, forgive me in that case, but in all examples i've seen so far it's like that. Could you please paste an example of a real, functional QT component? For instance a component that is re-used in another component, const A = ({ text }) => <div>{text}</div> const B = () => <A text="hello" /> <B /> // -> <div>hello</div> as well as functional composition (higher-order-components): const canBeDisabled = Component => props => props.disabled ? null : <Component {...props} /> const ComposedB = canBeDisabled(B) <ComposedB /> // -> <div>hello</div> <ComposedB disabled /> // -> null an example for statefull components would also be nice: class C extends Component { state = { count: 0 } up = () => this.setState(state => ({ count: state.count + 1 }) render() { return <div onClick={this.up}>{this.state.count}</div> } } <C /> // -> <div>0</div>, clicks count up reactively
    - jcelerier 8y ago
      Here's an equivalent example for your stateful component : Text { property int count: 0 text: count MouseArea { anchors.fill: parent onClicked: count++ } } if you put this in a file `C.qml` or load it as a component (http://doc.qt.io/qt-5/qml-qtqml-component.html http://doc.qt.io/qt-5/qml-qtqml-component.html), then you can reuse it in other components: Item { C { } C { count: 23 } // starts at 23 } For your functionally composed example, all qt objects have a `visible` property so you'd generally do : MyItem { visible: props.disabled } Note that unlike React, the "default" paradigm is not functional : in QML you describe directly a dataflow graph between the properties of your objects. e.g. C { id: myCount } Rectangle { color: "red" // the width will change whenever the count increase width: Math.cos(myCount.count) / 2 } This is because the objects with which you work in QML are exactly the ones that are going to be rendered - and at a fairly low-level: they mostly translate directly to GL / D3D primitives ; there is no need for a transformative pass like with react.
bb101 8y ago
Doesn't QT cost $459 per month per developer[1] for use in commercial applications? That price is prohibitive for anyone but established enterprise. [1] https://www1.qt.io/buy-product/ https://www1.qt.io/buy-product/
- mherrmann 8y ago
  No. In many cases, you can use Qt under the LGPL and thus for free. This is especially true when you use it via Python bindings such as PyQt.
  - bb101 8y ago
    That's good to know. Thanks for the info.
  - superrad 8y ago
    PyQT isn't LGPL though, it only offers GPLv3 or Commercial licensing.
    - mherrmann 8y ago
      That's true. So using PyQt you likely need a commercial license for PyQt and not Qt. Alternatively, you can use PySide2 instead of PyQt to avoid this restriction, but it's less mature.
      - WaltPurvis 8y ago
        Less mature for the moment, but it's getting more official support and resources, so that will probably change. (They've also changed the name from PySide2 to Qt for Python.) http://blog.qt.io/blog/2018/04/13/qt-for-python-is-coming-to-a-computer-near-you/ http://blog.qt.io/blog/2018/04/13/qt-for-python-is-coming-to... License-wise: "Qt for Python will have the same licensing as Qt for Application Development, i.e. it will be available under GPL, LGPL and commercial."
stuffedBelly 8y ago
I've used Qt developing various data-heavy apps for financial research at work and agree that making this comparison is rather inappropriate. For people who are not familiar with JSX this is not any better than the Qt syntax. This would be an alternative to Qt, but before I see a full-fledging app developed with great performance/memory metrics using this, I am not convinced enough to put it in my framework stack.
- amelius 8y ago
  I used Qt in the early days, and always found the signal/slot model to handle events quite cumbersome. Handling events through closures (like typically done in JavaScript) is, imho, much nicer.
  - mnutt 8y ago
    I'm only an occasional Qt user but I believe since c++11 they've gained much better support for anonymous functions.
  - jcelerier 8y ago
    > I used Qt in the early days, and always found the signal/slot model to handle events quite cumbersome. Handling events through closures (like typically done in JavaScript) is, imho, much nicer. You have been able to bind closures to events in Qt for... dunnno... 6 years maybe ?
  - drb91 8y ago
    Perhaps ironically, Javascript is a first class qt/qml citizen these days. You’ve been able to use QML with javascript—including/mainly via closures—for a while now.
jeena 8y ago
And if we want to compare the syntax then this would be the QML equivalent: import QtQuick 2.9 import QtQuick.Controls 1.3 ApplicationWindow { title: "Example" visible: true width: 300 height: 300 Button { text: "Button" anchors.centerIn: parent onClicked: console.log('Hello') } }
- sho 8y ago
  Wow. Thanks for posting that, as an outsider I had no idea QT was so .. straightforward. Now I want to check it out more.
- Traubenfuchs 8y ago
  That looks beautiful. Does Qt/QML support the full power of the JS ecosystem? (bleeding edge or at least modern JS, npm)
- WaltPurvis 8y ago
  Thank you for posting an example. I was going to. I may be biased, but to me the QML code is much cleaner and clearer than JSX.
  - space_fountain 8y ago
    Something I would be curious about is what happens when you try to change the view. Like what if you want to make a counter. For me that was always the best thing about react.
    - WaltPurvis 8y ago
      I'm not sure what you're asking, but the answer to what I think you're asking is that views change by way of bindings. They can also be changed directly/procedurally, but I'll give an example of a binding. (Think of an Item as a visual component, which can either be referred to by an id or, as I've done here, referred to by its children as "parent".) Item { property int count: 1 Button { height: 30; width: 80 onClicked: parent.count++ } Text { height: 20; width: 30 text: parent.count } } The text will update every time you click the button.

kusti8 8y ago

Thanks for the feedback! I'm not a Qt dev, so I wasn't aware of the practices. I'll revise it and remove the Qt code.

mlsarecmg 8y ago

This seems like a misunderstanding of what React is. JSX is not a template. It is a DSL or superset with direct access to the presentational layer. It gets "transpiled" away in the building phase. React components are not imperative but declarative, they reflect state instead of inflating layout. Layout inflating (QT, Android), MVC/MVVM (XAML), and views being functions of state (React) are paradigm changes. View = fn(state) solves longstanding issues with all the previous approaches, and of course it decreases their complexity. It is also the first approach that's breaching the platform barrier successfully while maintaining the high-level. You can write React for countless of targets, being able to re-use and apply the eco-system.

westoncb 8y ago
There is no reason you couldn't use the example QML above in place of JSX and still receive the same benefits. It would still be `View = fn(state)`; it's just a different syntax for specifying `fn`.
- mlsarecmg 8y ago
  From what i've seen this is layout inflating, you have a template and you fill it imperatively. Which would be one of the oldest paradigms we have. Maybe i am getting this completely wrong, forgive me in that case, but in all examples i've seen so far it's like that. Could you please paste an example of a real, functional QT component? For instance a component that is re-used in another component, const A = ({ text }) => <div>{text}</div> const B = () => <A text="hello" /> <B /> // -> <div>hello</div> as well as functional composition (higher-order-components): const canBeDisabled = Component => props => props.disabled ? null : <Component {...props} /> const ComposedB = canBeDisabled(B) <ComposedB /> // -> <div>hello</div> <ComposedB disabled /> // -> null an example for statefull components would also be nice: class C extends Component { state = { count: 0 } up = () => this.setState(state => ({ count: state.count + 1 }) render() { return <div onClick={this.up}>{this.state.count}</div> } } <C /> // -> <div>0</div>, clicks count up reactively
  - jcelerier 8y ago
    Here's an equivalent example for your stateful component : Text { property int count: 0 text: count MouseArea { anchors.fill: parent onClicked: count++ } } if you put this in a file `C.qml` or load it as a component (http://doc.qt.io/qt-5/qml-qtqml-component.html http://doc.qt.io/qt-5/qml-qtqml-component.html), then you can reuse it in other components: Item { C { } C { count: 23 } // starts at 23 } For your functionally composed example, all qt objects have a `visible` property so you'd generally do : MyItem { visible: props.disabled } Note that unlike React, the "default" paradigm is not functional : in QML you describe directly a dataflow graph between the properties of your objects. e.g. C { id: myCount } Rectangle { color: "red" // the width will change whenever the count increase width: Math.cos(myCount.count) / 2 } This is because the objects with which you work in QML are exactly the ones that are going to be rendered - and at a fairly low-level: they mostly translate directly to GL / D3D primitives ; there is no need for a transformative pass like with react.

bb101 8y ago

Doesn't QT cost $459 per month per developer[1] for use in commercial applications? That price is prohibitive for anyone but established enterprise. [1] https://www1.qt.io/buy-product/ https://www1.qt.io/buy-product/

mherrmann 8y ago
No. In many cases, you can use Qt under the LGPL and thus for free. This is especially true when you use it via Python bindings such as PyQt.
- bb101 8y ago
  That's good to know. Thanks for the info.
- superrad 8y ago
  PyQT isn't LGPL though, it only offers GPLv3 or Commercial licensing.
  - mherrmann 8y ago
    That's true. So using PyQt you likely need a commercial license for PyQt and not Qt. Alternatively, you can use PySide2 instead of PyQt to avoid this restriction, but it's less mature.
    - WaltPurvis 8y ago
      Less mature for the moment, but it's getting more official support and resources, so that will probably change. (They've also changed the name from PySide2 to Qt for Python.) http://blog.qt.io/blog/2018/04/13/qt-for-python-is-coming-to-a-computer-near-you/ http://blog.qt.io/blog/2018/04/13/qt-for-python-is-coming-to... License-wise: "Qt for Python will have the same licensing as Qt for Application Development, i.e. it will be available under GPL, LGPL and commercial."

stuffedBelly 8y ago

I've used Qt developing various data-heavy apps for financial research at work and agree that making this comparison is rather inappropriate. For people who are not familiar with JSX this is not any better than the Qt syntax. This would be an alternative to Qt, but before I see a full-fledging app developed with great performance/memory metrics using this, I am not convinced enough to put it in my framework stack.

amelius 8y ago
I used Qt in the early days, and always found the signal/slot model to handle events quite cumbersome. Handling events through closures (like typically done in JavaScript) is, imho, much nicer.
- mnutt 8y ago
  I'm only an occasional Qt user but I believe since c++11 they've gained much better support for anonymous functions.
- jcelerier 8y ago
  > I used Qt in the early days, and always found the signal/slot model to handle events quite cumbersome. Handling events through closures (like typically done in JavaScript) is, imho, much nicer. You have been able to bind closures to events in Qt for... dunnno... 6 years maybe ?
- drb91 8y ago
  Perhaps ironically, Javascript is a first class qt/qml citizen these days. You’ve been able to use QML with javascript—including/mainly via closures—for a while now.

jeena 8y ago

And if we want to compare the syntax then this would be the QML equivalent: import QtQuick 2.9 import QtQuick.Controls 1.3 ApplicationWindow { title: "Example" visible: true width: 300 height: 300 Button { text: "Button" anchors.centerIn: parent onClicked: console.log('Hello') } }

sho 8y ago
Wow. Thanks for posting that, as an outsider I had no idea QT was so .. straightforward. Now I want to check it out more.
Traubenfuchs 8y ago
That looks beautiful. Does Qt/QML support the full power of the JS ecosystem? (bleeding edge or at least modern JS, npm)
WaltPurvis 8y ago
Thank you for posting an example. I was going to. I may be biased, but to me the QML code is much cleaner and clearer than JSX.
- space_fountain 8y ago
  Something I would be curious about is what happens when you try to change the view. Like what if you want to make a counter. For me that was always the best thing about react.
  - WaltPurvis 8y ago
    I'm not sure what you're asking, but the answer to what I think you're asking is that views change by way of bindings. They can also be changed directly/procedurally, but I'll give an example of a binding. (Think of an Item as a visual component, which can either be referred to by an id or, as I've done here, referred to by its children as "parent".) Item { property int count: 1 Button { height: 30; width: 80 onClicked: parent.count++ } Text { height: 20; width: 30 text: parent.count } } The text will update every time you click the button.