A quick look at using JSX in GNOME – a lowercase manifesto

This is a guest post by Lars Karlitski (larsu).

Thanks to a travel sponsorship from the GNOME foundation, I was able to attend the GTK+ hackfest in Toronto recently. The discussions and energy there inspired me to work on a prototype of something I had been thinking about for a while: using JSX to create GtkWidgets.

JSX is a JavaScript extensions that adds XML literals to the language. It can turn code like this:

var win = new Gtk.Window({
    title: "hi",
    default_width: 300,
    default_height: 150
});

var button = new Gtk.Button({
    label: "click me"
});

button.connect('clicked', function () {
    console.log('hey');
});

win.add(button);

win.connect('destroy', Gtk.mainQuit);
win.showAll();

into this:

function buttonClicked() {
    console.log('hey');
}

var win = <Gtk.Window title="Hello, World" defaultWidth="300" defaultHeight="150" onDestroy={Gtk.mainQuit}>
            <Gtk.Button label="click me" onClicked={buttonClicked} />
          </Gtk.Window>;

win.showAll();

I find that in addition to being more concise, it also makes the hierarchy of widgets much easier to understand when reading code later on.

It’s only a proof of concept right now, building on Andrea Giammarchi‘s great but not-quite-ready node bindings to GObject introspection. My fork is available at:

https://github.com/larsu/node-gtk

If you want to try it out, clone the repository and build it with:

$ npm install

Then, compile the simple example from above from JSX to plain JavaScript and run it:

$ $(npm bin)/babel examples/hello-world.jsx -o examples/hello-world.js
$ node examples/hello-world.js

Please let me know if you’re interested in this and whether it’s worth spending more time on it.

5 thoughts on “A quick look at using JSX in GNOME”