Proton Native – React Native for the desktop

Re:Proton Native – React Native for the desktop by jeena on Wednesday May 02, 2018 @05:53PM (#16981480)

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')  
    }  
  }

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by WaltPurvis on Wednesday May 02, 2018 @06:00PM (#16981531)

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.

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by space_fountain on Wednesday May 02, 2018 @08:56PM (#16982475)

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.

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by WaltPurvis on Wednesday May 02, 2018 @09:26PM (#16982640)

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.

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by diroussel on Thursday May 03, 2018 @01:57AM (#16983648)

Can you have higher order components? In react this is a function that returns a component, often taking another component as a parameter.

What's nice about react is that the JSX syntax is just sugar that converts to function calls.

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by jcelerier on Thursday May 03, 2018 @04:49AM (#16984340)

> Can you have higher order components? In react this is a function that returns a component, often taking another component as a parameter.

The standard way to do this in QML is using the Loader object: http://doc.qt.io/qt-5/qml-qtqml-component.html

You can also go full-eval of course: http://doc.qt.io/qt-5/qtqml-javascript-dynamicobjectcreation...

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by profalseidol on Wednesday May 02, 2018 @10:04PM (#16982819)

So nice not so see any < > and ( ) all over the place in addition to { }.

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by throwaway13456 on Thursday May 03, 2018 @08:35AM (#16985377)

Tell me about it. Probably going to be down voted, but this is SO true: https://twitter.com/thomasfuchs/status/810885087214637057

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by sho on Thursday May 03, 2018 @02:23AM (#16983762)

Wow. Thanks for posting that, as an outsider I had no idea QT was so .. straightforward. Now I want to check it out more.

[ Parent | on HN ]

Re:Proton Native – React Native for the desktop by Traubenfuchs on Thursday May 03, 2018 @10:22AM (#16986272)

That looks beautiful. Does Qt/QML support the full power of the JS ecosystem? (bleeding edge or at least modern JS, npm)

[ Parent | on HN ]