Skip to content

Latest commit

 

History

History

guadec2021

theme paginate style
gaia
true
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'); @import url('https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack-subset.css'); code { font-family: Hack; } section { font-family: Cantarell, sans-serif; letter-spacing: 0; } section.lead.invert { text-shadow: 0 0 10px black, 0 0 20px black; } pre code { background-color: #042029; } ul ul li { font-size: 75%; } .hljs-string { color: #8ae234; } .hljs-number, .hljs-literal { color: #729fcf; } .hljs-params { color: #e9b96e; font-style: italic; } .hljs-built_in { color: #fce94f; font-weight: bold; } .hljs-keyword { color: #fcaf3e; font-weight: bold; } .hljs-attr { color: #e9b96e; } .hljs-variable { color: red; font-weight: bold; } /* .hljs-comment, .hljs-regexp, .hljs-symbol */

What's new with JavaScript in GNOME

bg right

The 2021 edition

Philip Chimento pchimento • ptomato @therealptomato GUADEC Online, July 22, 2021


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

Introduction

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

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


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)

Performance improvements ㊶

  • Memory usage improvements (🎩 Marco Trevisan)

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:https:///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:https://Gtk?version=3.0';  // G-I binding
import {MyClass, myFunction} from './src/myModule.js';
  // imports path relative to currently executing file

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

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:https://SomeLibrary';

// Possible ✅
if (usingSomeLibrary)
    const SomeLibrary = await import('gi:https://SomeLibrary');

Debugger improvements ㊵

  • Backtrace command that prints all the locals, like GDB
  • Program listing
  • Show line along with frame
  • 🎩 Nasah Kuma

Debugger improvements ㊵

function myFunction(a, b, c) {
    const d = Math.random();
    debugger;
}
myFunction(3, 2, 1);

Debugger improvements ㊵

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);

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


Text encoding/decoding ㊶

// Old, but still works, not deprecated:
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


Memory profiling ㊶

w:1000


Console API ㊶

// Old, but still works, not deprecated:
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


Documentation and Examples

  • 🎩 Extensions Rebooted

What is upcoming in JavaScript land for GNOME?


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


Next JS engine upgrade (Firefox 91) ㊷

class MyClass {
    #value;

    someMethod() {
        doSomethingWith(this.#value);
    }
}

Note: Doesn't yet integrate with GObject classes.


Next JS engine upgrade (Firefox 91) ㊷

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!

Next JS engine upgrade (Firefox 91) ㊷

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

Next JS engine upgrade (Firefox 91) ㊷

??=, &&=, ||= 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

How can you help?


Help define best practices for the GNOME JS ecosystem


The Big Hammer, why isn't it removed?

Well-defined problems are nearly all solved. Squishy problems remain.

We need:


Thanks

GJS contributors from 40 and 41

License

Presentation licensed under Creative Commons BY-NC-ND 4.0


bg

Questions?