Thursday, February 8, 2018

Entering the “home stretch” for GNOME 3.28

Earlier this week I´ve released GNOME Maps 3.27.90 (even though I just read an e-mail about the deadline for the release tarballs had been postponed for one week just after uploading the tarball).

This weekend I (like some 8000 others) participated in an exciting FOSDEM with lots of interesting talks and the week before that I gave presentation of GNOME Maps, and in particular the public transit functionality for TrafikLab (the sort of “developer community” driven by the Swedish organization Samtrafiken AB, who coordinates and aggregates data from all public transit operators, both commercial/private and regional/public ones.

One of the larger features landed in 3.27.90, which isnt´t visible on the surface is that Maps now uses some new language features introduced to JS in the ES6 standard, namely classes and ”arrow functions”.

So, when it comes to classes, as known from traditional OO languages such as Java or C++, earlier one would typically use prototypes to model object classes, but as of ES6 the language has support for a more traditional classes and with a method syntax. GJS also gained a new way to declare GObject classes.

So when earlier declaring an extending class would look something like this:

var MyListBoxRow = new Lang.Class({
    Name: 'MyListRow',
    Extends: Gtk.ListBoxRow,
    Template: 'resource:///<app-id>/ui/my-list-box-row.ui',

    ...
    myMethod: function(args) {

    }
});


this now becomes:

 
var MyListBoxRow = GObject.registerClass({
   Template: 'resource:///<app-id>/ui/my-list-box-row.ui'
} ,class MyListBoxRow extends Gtk.ListBoxRow {

  ...
  myMethod(args) {

  }
});

and in cases where we don´t need to inherit from GObject (such as when not declaring any signals, i.e. for utility data-bearing classes) we can skip the registering part and it becomes just a simple ES6 class:

var SomeClass = class {
   ...
   someMethod(args) {

   }
}

We still need the assign using “var” to export those outside the module in question, but when we gain ES7 support in GJS we should be able to utilize the “export” keyword here instead. Another simplication that should arrive with ES7 is that we´d be able to use a decorator pattern in place of GObject.registerClass so that it would become something like:

@GObject.registerClass 
class MyListRow extends Gtk.ListBoxRow

Techinically this could be done today using a transpiler step (using something like Babel) in the build system. These decorators will pretty much be higher-order functions. But I choose not to do this at this point, since we still use GNU Autotools as our build system and eventually we should switch to Meson.

The second change involves using the “arrow operator” to bind this to anonymous functions (in async callbacks). So instead of something like:

asyncFunctionCall(onObject, (function(arg) {
     doStuffWith(arg);
}).bind(this);

this becomes:

asyncFunctionCall(onObject, (arg) => doStuffWith(arg));

These changes results in a reduction of 284 lines of code, which isn´t too bad for a change that doesn´t actually involving removing or really rewriting any code.

Thanks go to Philip Chimento (and Endless) for bringing these improvements for GJS!

Some other changes since the last release is some visual fixes and tooltips for some of the buttons in routing sidebar contributed by Vibhanshu Vaibhav and a fix for a keyboard navigation bug (that I introduces when changing the behavior of the search entry to always activate when starting to type with no other entry active) contributed by Tomasz Miąsko. Thank you!

 

2 comments:

  1. Replies
    1. Thanks!
      It makes the code quite a lot prettier and easier to read. I also forgot to mention the :: operator for ES7.
      We have quite a lot of places doing something like:

      widget.connect('pressed', this._onButtonClicked.bind(this));

      this should become:

      widget.connect('pressed', ::this._onButtonClicked);

      if I understood it correctly…
      Currently it would have been possible to use:
      widget.connect('pressed', () => this._onButtonClicked());

      but it didn't quite seem worth it compared to just binding the old way in these cases.

      Delete