Developing GNOME Apps in Javascript

Developing GNOME Apps in Javascript
Felipe Borges
<[email protected]>

I'm Felipe Borges!

Why talk about Gjs?

GNOME is....
Desktop environment Development platform

GNOME Developer Platform

Javascript is pretty cool!

It has bad parts!
Globals Unexpected behaviour No block scope

But it also has good parts!
Closures are central Functions are first-class objects Prototypal inheritance Is everywhere!

Gjs
First released in 2008 Well maintained Main development language for writing GNOME Apps

GNOME Apps in JS
Documents Shell Polari

gjs-console

Get started
Gjs and Gtk Actions and signals Run your application

const Lang = imports.lang; const Gtk = imports.gi.Gtk; const App = new Lang.Class({ Name: 'App', Extends: Gtk.Application, _init: function () { this.parent({ application_id: 'org.example.App' }); this.connect('activate', Lang.bind(this, this._onActivate)); this.connect('startup', Lang.bind(this, this._onStartup));

},

_onActivate: function () { this._window.show_all(); }, _onStartup: function () { this._window = new Gtk.ApplicationWindow({ application: this, title: "Hello World!" }); this._window.set_default_size(200, 200); let label = new Gtk.Label({ label: "Hello World" }); this._window.add(label); } });

Run your application
let app = new App(); app.run(ARGV); $ gjs helloWorld.js

What about a Web Browser?
Toolbar and buttons WebView Actions and signals Run your application

Build system
.desktop.in autogen.sh Makefile.am configure.ac

The .desktop.in file
[Desktop Entry] Version=1.0 Encoding=UTF-8 Name=Hello World Comment=Say Hello Exec=@prefix@/bin/hello-world Icon=application-default-icon Terminal=false Type=Application StartupNotify=true Categories=GNOME;GTK;Utility;

autogen.sh
#!/bin/sh set -e test -n "$srcdir" || srcdir=`dirname "$0"` test -n "$srcdir" || srcdir=. olddir=`pwd` cd "$srcdir" # This will run autoconf, automake, etc. for us autoreconf --force --install cd "$olddir" if test -z "$NOCONFIGURE"; then "$srcdir"/configure "$@" fi

Makefile.am
# The actual runnable program is set to the SCRIPTS primitive. # # Prefix bin_ tells where to copy this bin_SCRIPTS = hello-world # # List of files to be distributed EXTRA_DIST = \ $(bin_SCRIPTS) # # # The desktop files desktopdir = $(datadir)/applications desktop_DATA = \ hello-world.desktop

configure.ac
# This file is processed by autoconf to create a configure script AC_INIT([Hello World], 1.0) AM_INIT_AUTOMAKE([1.10 no-define foreign dist-xz no-dist-gzip]) AC_CONFIG_FILES([Makefile hello-world.desktop]) AC_OUTPUT

http://developer.gnome.org/

Become a Friend of GNOME
Individual donation program Donations support the GNOME project http://gnome.org/friends

Developing GNOME Apps in Javascript
Felipe Borges
<[email protected]>