Writing native Linux desktop apps with JavaScript

Writing native Linux desktop apps with JavaScript
Philip Chimento •   ptomato •  @therealptomato
Linux Application Summit, May 13, 2021
Image by Сергей Корчанов from Pixabay

Introduction
I maintain GJS (GNOME JavaScript)
This talk is a bit of an experiment for me
Can web JS programmers ramp up quickly on writing a desktop app?

What this talk is
For JavaScript developers and enthusiasts
who are curious about writing a desktop app
A walk through creating and publishing a desktop app in JS
Technologies: GJS, GTK, Flatpak, Flathub
A slide deck that you can read later
https://ptomato.name/talks/las2021/

What this talk is not
A step-by-step tutorial on how to write an app
There's already a good one on gjs.guide
Presented by an experienced web developer

Let's get started!
Image CC0 licensed

App: "Bloatpad"
the unnecessary note-taking app

Have something to start with
Can also use gtk-js-app

a Meson build system
a placeholder icon
resource bundles
a .desktop file
a settings schema
an AppStream meta info file
infrastructure for i18n
skeleton code
a Flatpak manifest

Build systems
Meson is probably a good one to stick with
You will need it if your app ever includes any C code
Coming from JS development you still might want something more familiar
$ yarn init
"scripts": {
"prebuild": "test -d _build || meson _build",
"build": "ninja -C _build",
"start": "meson compile -C _build devel",
"test": "meson test -C _build"
}

Yarn
$ yarn build
$ yarn start

Linter
May as well install prettier and never again worry about code style
eslint for usage
$ yarn add --dev prettier eslint eslint-config-prettier
"lint": "eslint . --fix && prettier --write ."

TypeScript
You can write in TypeScript, it mostly works
Or write JS with type annotations in comments and use TypeScript to typecheck
Thanks to the hard work of Evan Welsh

Other build tools
Bundlers are probably not needed
Tree shaking can be useful
use e.g. find-unused-exports
Minifiers are probably not needed
Babel probably works

Assembling the UI
Photo by Anna Shvets from Pexels

XML UI files or no?
XML-CSS-JS is like the trinity of HTML-CSS-JS
Alternative is to build your UI in code

XML UI files or no?
<object class="GtkListView" id="notesList">
<property name="show-separators">True</property>
<signal name="activate" handler="_onNotesListActivate"/>
</object>
vs.
this._notesList = new Gtk.ListView({ showSeparators: true });
this._notesList.connect("activate", this._onNotesListActivate.bind(this));

XML UI files
Tedious to write by hand
Glade UI Designer
GTK 3 only
GTK 4 alternative underway

CSS
.large-icon {
color: #888a85;
-gtk-icon-shadow: #d3d7cf 1px 1px;
padding-right: 8px;
}

Time to write code
Image CC0 licensed

API Documentation
gjs-docs.gnome.org

About the API
Every UI element is based on Gtk.Widget
Roughly equivalent to a HTML DOM element
Methods
Properties
Signals (events)
CSS element name and classes
Things that are not UI elements are based on GObject.Object

ES modules
import Gdk from "gi://Gtk";
import Gio from "gi://Gio";
import GObject from "gi://GObject";
import Gtk from "gi://Gtk";
import { NotesListItem } from "./item.js";

Async operations
GNOME platform has asynchronous, cancellable I/O
Experimental opt-in support for JS await
Gio._promisify(Gio.OutputStream.prototype, 'write_bytes_async', 'write_bytes_finish');
// ...
let bytesWritten = 0;
while (bytesWritten < bytes.length) {
bytesWritten = await stream.write_bytes_async(bytes, priority, cancellable);
bytes = bytes.slice(bytesWritten);
}

Popular runtime libraries
These may or may not work
Check if you actually need the dependency
Use ES module directly if it doesn't have other deps
Some modules ship a browser bundle, this might work
Else, build a UMD bundle with Browserify and vendor it

Build a UMD bundle with browserify
yarn add my-library
mkdir -p src/vendor
npx browserify -r my-library -s myLibrary -o src/vendor/my-library.js
import './vendor/my-library.js';
// myLibrary is now a global object

Top 5 most used NPM libraries
1. lodash
2. chalk
3. request
4. commander
5. react

Lodash
In some cases not necessary
Use lodash-es if you need lodash
import _ from './vendor/lodash-es/lodash.js';
_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });

Chalk
No bundle, so make a Browserified one
Color support detection code is Node-only
Edit bundle, change stdout: false and stderr: false to true
import './vendor/chalk.js';
print(chalk.blue('Hello') + ' World' + chalk.red('!'));

Request
Deprecated
Use Soup instead
const request = require('request');
request('https://ptomato.name', function (error, response, body) {
console.error('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});
import Soup from 'gi://Soup';
const session = new Soup.Session();
const msg = new Soup.Message({ method: 'GET', uri: new Soup.URI('https://ptomato.name') });
session.queue_message(msg, (_, {statusCode, responseBody}) => {
log(`statusCode: ${statusCode}`);
log(`body: ${responseBody.data}`);
});

Commander
No bundle, so make a Browserified one
import System from 'system';
import './vendor/commander.js';
const { Command } = commander;
const options = new Command()
.option('-p, --pizza-type <type>', 'flavour of pizza')
.parse(System.programArgs, { from: 'user' })
.opts(); // ^^^^^^^^^^^^
if (options.pizzaType) print(`pizza flavour: ${options.pizzaType}`);

React
Not applicable
P.S. Although it would be cool if React Native worked with GTK

Fast-forward to the written code
(Live demo, but in case that doesn't work out, screenshots follow)
Image CC0 licensed

Writing native Linux desktop apps with JavaScript

Distributing your app to
users
Image by acebrand from Pixabay

How?
Flathub
Requirements
Luckily, the generated project skeleton meets all of these
Only need to fill in a few things

AppStream meta info
This file is used to provide the
description that users see on
Flathub
And in their software updater
appplication
Description of file format

AppStream meta info
Generator to get you started
Asks you a few questions
Asks for URLs of screenshots
Flathub guidelines
OARS rating
OARS Generator

Desktop file
Tells how to display your app in the desktop
Description of file format
List of categories
[Desktop Entry]
Name=Bloatpad
Comment=Unnecessary note-taking application
Exec=name.ptomato.Bloatpad
Icon=name.ptomato.Bloatpad
Terminal=false
Type=Application
Categories=Utility;GTK;
StartupNotify=true

Application icon
Tobias Bernard on Designing an Icon for your App

Submit it to Flathub
Instructions here

Translate your UI
Gettext is built-in to the platform
Venerable framework for UI translations
Use a website like Transifex
Recruit volunteer translators
Or translate the UI yourself in whatever languages you speak

Conclusion
Some things might seem familiar to JS developers, others might not
We should reduce the friction for these developers
But not everything from the web or Node.js applies well to the desktop

Questions
Image by IRCat from Pixabay

Thanks
Andy Holmes, Evan Welsh, Sri Ramkrishna for discussions and their work on
improving the GJS developer experience
License
Presentation licensed under Creative Commons BY-NC-ND 4.0
Bloatpad code, permissive MIT license

Writing native Linux desktop apps with JavaScript

Recommended

More Related Content

What's hot (20)

Similar to Writing native Linux desktop apps with JavaScript (20)

More from Igalia (20)

Recently uploaded (20)

Writing native Linux desktop apps with JavaScript