developing gnome apps in javascript

Developing GNOME Apps in JavascriptFelipe Borges

<felipeborges@src.gnome.org>

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.0Encoding=UTF-8Name=Hello WorldComment=Say HelloExec=@prefix@/bin/hello-worldIcon=application-default-iconTerminal=falseType=ApplicationStartupNotify=trueCategories=GNOME;GTK;Utility;

autogen.sh#!/bin/shset -etest -n "$srcdir" || srcdir=`dirname "$0"`test -n "$srcdir" || srcdir=.olddir=`pwd`cd "$srcdir"# This will run autoconf, automake, etc. for usautoreconf --force --installcd "$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 thisbin_SCRIPTS = hello-world# # List of files to be distributedEXTRA_DIST = \

$(bin_SCRIPTS)## # The desktop filesdesktopdir = $(datadir)/applicationsdesktop_DATA = \

hello-world.desktop

configure.ac# This file is processed by autoconf to create a configure scriptAC_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 JavascriptFelipe Borges

<felipeborges@src.gnome.org>