What is new with JavaScript in Gnome: The 2021 edition

What's new with
JavaScript in
GNOME
The 2021 edition
Philip Chimento

 pchimento •   ptomato

 @therealptomato

GUADEC Online, July 22, 2021
Photo by Lucas Pezeta from Pexels 1

Introduction: What we will talk about
Same thing we talk about every year!
What's new in GJS?
What's next in GJS?
We need some help! Here's what you can do
2

Introduction
Presentation is full of links if you want to click through later
If you want to follow along: ptomato.name/talks/guadec2021
3

What's new in JavaScript land for
GNOME 40 and 41?
GNOME 40 and 41?
GNOME 40 and 41?
4
4
4

Crash fixes
㊵㊶ 10 crashing bugs fixed in the past year
But also, 10 crashing bugs reported in the past year
Total of 9 currently open
2 older than 1 year
㊵ Many refactors adding type safety ( Marco Trevisan)
5

Performance improvements ㊶
Memory usage improvements ( Marco Trevisan)
!625 for objects
!519 for functions
6

ES Modules ㊵
// Old, but still works, not deprecated:
const System = imports.system; // built-in module

imports.gi.versions.Gtk = '3.0';
const {Gtk} = imports.gi; // G-I binding

imports.searchPath.unshift('resource:///com/example/MyApp');
const {MyClass, myFunction} = imports.src.myModule;

// imports src/myModule.js from search path

// New

import System from 'system'; // built-in module
import Gtk from 'gi://Gtk?version=3.0'; // G-I binding

import {MyClass, myFunction} from './src/myModule.js';

// imports path relative to currently executing file

7

ES Modules ㊵
Run your main file with -m
or gjs_context_eval_module() if using the GObject-based API
ES modules can import legacy modules, but not vice versa
To port your code, start at the top level and work downwards
Evan Welsh
8

ES Modules ㊵
ES modules are always in strict mode
Importing is compile-time!
To import conditionally, use dynamic async import()
// NOT POSSIBLE

if (usingSomeLibrary)

import SomeLibrary from 'gi://SomeLibrary';

// Possible

if (usingSomeLibrary)

const SomeLibrary = await import('gi://SomeLibrary');

9

Debugger improvements ㊵
Backtrace command that prints all the locals, like GDB
Program listing
Show line along with frame
Nasah Kuma
10

function myFunction(a, b, c) {

const d = Math.random();
debugger;

}

myFunction(3, 2, 1);
11

db> bt full

#0 myFunction(3, 2, 1) at bug.js:3:4

d = 0.7590159046381023

#1 toplevel at bug.js:5:10

db> list
1 function myFunction(a, b, c) {

2 const d = Math.random();
*3 debugger;

4 }

5 myFunction(3, 2, 1);
db> frame 1

#1 toplevel at bug.js:5:10

5 myFunction(3, 2, 1);
12

JS Object GObject parameters ㊵
Properties: {

myArray: GObject.ParamSpec.jsobject('my-array', 'My array',

'You can now use JS objects as the value of GObject properties',
GObject.ParamFlags.READWRITE),

},

Marco Trevisan
13

Text encoding/decoding ㊶
const ByteArray = imports.byteArray;
const pizza = ByteArray.toString(Uint8Array.of(0xf0, 0x9f, 0x8d, 0x95) /*, 'utf-8' */);

const pizzaBytes = ByteArray.fromString(' ' /*, 'utf-8' */);

// New

const decoder = new TextDecoder(/* 'utf-8' */);

const pizza = decoder.decode(Uint8Array.of(0xf0, 0x9f, 0x8d, 0x95));
const encoder = new TextEncoder();

const pizzaBytes = encoder.encode(' ');

Evan Welsh
14

Console API ㊶
log('A message from your program');

// New, nice if you're used to browsers and Node:

console.log('A message from your program');

Evan Welsh
16

Documentation and Examples
Extensions Rebooted
17

What is upcoming in JavaScript land for
GNOME?
GNOME?
GNOME?
18
18
18

Native async operations ㊶㊷
Annotations:
<method name="load_contents_async" c:identifier="g_file_load_contents_async"
glib:finish-func="g_file_load_contents_finish"

glib:sync-func="g_file_load_contents">

// Opt-in per method no longer needed:

// Gio._promisify(Gio._LocalFilePrototype, 'load_contents_async', 'load_contents_finish');

const [contents] = await file.load_contents_async(/* cancel = */ null);

Veena Nagar
19

Next JS engine upgrade (Firefox 91) ㊷
#private class fields
class MyClass {

#value;

someMethod() {

doSomethingWith(this.#value);

}

}

Note: Doesn't yet integrate with GObject classes.
20

at() : Python-style indexing for arrays, strings, and typed arrays
const arr = [1, 2, 3, 4, 5, 6, 7];

arr.at(0) // 1

arr.at(-1) // 7
arr.at(999) // undefined

'my string'.at(-7) // ' '

arr[arr.length - 1] // no longer necessary!
21

Promise.any() : First successful sub-promise
const cancellable = new Gio.Cancellable();

const fastestServer = await Promise.any([

checkServer(EAST, cancellable),

checkServer(WEST, cancellable),

waitSeconds(30),
]);

if (!fastestServer) {

cancellable.cancel();

notify('No server found within 30 seconds');
}

22

??= , &&= , ||= operators
Short-circuiting assignment operators
a ??= b - assign a = b if a is null or undefined
a ||= b - assign a = b if a is falsey
a &&= b - assign a = b if a is truthy
23

How can
How can
How can you
you
you help?
help?
help?
24
24
24

Help define best practices for the
GNOME JS ecosystem
Sample app has been updated
For an experiment with even newer stuff, see the GJS Bloatpad
Writing native Linux desktop apps with JavaScript at LAS 2021
Talk to us in #javascript:gnome.org about things confusing you!
25

The Big Hammer, why isn't it removed?
Well-defined problems are nearly all solved. Squishy problems remain.
We need:
㊷ better memory accounting
to quantify acceptable memory usage for Shell, & tune GC accordingly
to figure out some solution that fits both Shell and apps
a communication plan
26

Thanks
GJS contributors from 40 and 41
License
Presentation licensed under Creative Commons BY-NC-ND 4.0
27

Questions?
Questions?
Questions?
‍
‍
‍
Image:
Image:
Image: IRCat
IRCat
IRCat from
from
from Pixabay
Pixabay
Pixabay 28
28
28

What is new with JavaScript in Gnome: The 2021 edition

More Related Content

What's hot (20)

Similar to What is new with JavaScript in Gnome: The 2021 edition (20)

More from Igalia (20)

Recently uploaded (20)

What is new with JavaScript in Gnome: The 2021 edition