Javascript, the GNOME way (JSConf EU 2011)

Javascript, the GNOME wayBerlin, October 2nd, 2011

(follow the talk at http://10.109.2.56:8080)

A bit about of me

Eduardo Lima Mitev <elima@igalia.com>

Web apps developer, GNOME developer, eventdance, hildon-input-methods, libmeegotouch, filetea, ...Not a gnome-shell/G-I/GJS core hacker myself, just a messenger...

What is GNOME?

http://bethesignal.org/blog/2011/03/12/thoughts-on-gnome/

GNOME is people

http://www.flickr.com/photos/lucasrocha/3913631234/sizes/l/in/photostream/

A full-featured desktop environment

A collection of libraries and programs

libgpg-error libgcrypt libxslt gnome-common intltool rarian gnome-doc-utils gtk-doc glib cairo gobject-introspection atk pangogdk-pixbuf shared-mime-info gtk+ vala dconf libgnome-keyring expat polkit gudev NetworkManager libproxy cantarell-fonts gtk+-2gtk-engines librsvg gnome-themes-standard gsettings-desktop-schemas glib-networking libsoup gconf libgweather libgdatagstreamer liboil gst-plugins-base enchant WebKit p11-kit gnome-keyring libnotify librest json-glib gnome-online-accounts evolution-data-server colord libdaemon avahi libatasmart libunique gnome-disk-utility gvfs gnome-desktop gnome-menus iso-codes libxklavierlibgnomekbd upower gnome-settings-daemon libgtop sound-theme-freedesktop accountsservice gnome-control-center gnome-bluetooth hicolor-icon-theme gnome-icon-theme gnome-icon-theme-symbolic gnome-icon-theme-extras PackageKit gnome-packagekit gnome-screensaver gnome-session pygobject cogl clutter libgee caribou telepathy-glib folks js185 gjs zenity metacitymutter telepathy-logger gnome-shell mousetweaks network-manager-applet telepathy-mission-control meta-gnome-core-shellgnome-backgrounds nautilus gnome-user-share vino itstool yelp-xsl yelp-tools gnome-user-docs meta-gnome-core-extras gmimepoppler gtkhtml evolution libgsf tracker totem-pl-parser brasero libnice farsight2 telepathy-farsight clutter-gtk libchamplainempathy epiphany gnome-js-common seed libpeas eog evince gcalctool gnome-contacts libwnck mm-common libsigc++2 glibmmcairomm pangomm atkmm gtkmm gnome-system-monitor vte gnome-terminal gnome-utils gucharmap libdiscid libmusicbrainzclutter-gst gtksourceview sushi yelp meta-gnome-core-utilities gnome-panel notification-daemon dbus-python polkit-gnome ... ... ...

... all free software

GNOME 3 was released in April 2011

http://www.gnome.org/gnome-3/

GNOME 3 was released in April 2011

A major breakthrough in designHW acceleration for graphicsTons of cleaning up and restructuring of the stackThe gnome-shell to be the default UX

... and GNOME met Javascript

The gnome-shell

A modern, integrated user experienceActs as a compositing manager for the desktopHandles application launching, window switching, multiple desktops, and much moreInterfaces GNOME libraries using Javascript as glue

29,497 lines of Javascript code (39,538 of C)

the gnome-shell

https://live.gnome.org/GnomeShell/Technology

what is gobject-introspection?

http://www.flyingdisk.com/badges.htm

what is gobject-introspection?

A set of tools for extracting and accessing the metadata of alibrary's API in a convenient way for other programs to use it.library APIs must be "annotated" and designed to be "introspection friendly"

gobject-introspection goals

Enable two level applications: C and <your favorite runtime>;Share binding infrastructure work;Other uses like API verification, improving documentation tools, etc

the big picture (with GJS)

the big picture (with Seed)

GIR file

An XML description of a library APICan include documentation

Example: ZLibCompressor class from GIO's GIR

<class name="ZlibCompressor" c:symbol-prefix="zlib_compressor" c:type="GZlibCompressor" parent="GObject.Object" glib:type-name="GZlibCompressor" glib:get-type="g_zlib_compressor_get_type" glib:type-struct="ZlibCompressorClass"> <doc xml:whitespace="preserve">Zlib decompression</doc> <implements name="Converter"/> <constructor name="new" c:identifier="g_zlib_compressor_new" version="2.24"> <doc xml:whitespace="preserve">Creates a new #GZlibCompressor.</doc> <return-value transfer-ownership="full"> <doc xml:whitespace="preserve">a new #GZlibCompressor</doc>

Typelib file

A binary representation of the GIR file for faster access duringrun-time.

GIRepository: API for retrieving library info from a typelib file

http://moodleman.moodle.com.au/archives/202

libffi: fantasy fiction foreign function interface

http://moodleman.moodle.com.au/archives/202

Annotations

Go inline in the code (normally in the .c files)Complement the API description with semantic informationNormally "guessed" correctly by the scanner

Documented at https://live.gnome.org/GObjectIntrospection/Annotations

Annotations example (I)

Annotations example (II)

Javascript, at last!

Two engines: GJS and Seed

GJS vs. Seed

GJS wraps Mozilla's Spidermonkey engine while Seed wraps Apple's JavascriptCoreGJS supports language features from ES-Harmony (let, const, etc), Seed doesn't (as of now)GJS is more mature, it powers gnome-shell at the momentOther minor differences (i.e module extensions, etc)

both have a fairly good G-I support

Oh wait! what about node-gir?

node-gir

G-I support for Nodeearly stage of developmentwritten by Tim Caswellcode at https://github.com/creationix/node-gir

Why not use Seed or GJS?

"Because they are nice, but not what I'm looking for. Node is really popular and it would be nice to be able touse it for desktop tools and applications.", Tim Caswell

Writing Javascript in GJS/Seed

Show time!

Importing modules

No 'require', sorryThe 'imports' keywordImporting is an assignment, not a function callThe full module's global scope is imported'imports.searchPath' similar to 'require.paths'Only synchronous

Importing a Javascript module

// this will import file 'path/to/my/module.js'var MyModule = imports.path.to.my.module;

// this will import 'lib/Http.js'var Http = imports.lib.Http;

// using 'const' here is nice but only works in GJS :)const Promise = imports.lib.Promise;

Importing a module from the G-I repository

// this will import GLib library namespacevar GLib = imports.gi.GLib;

// this will import GTK+ library namespace// for API version 3.0var Gtk = imports.gi.Gtk-3.0;

// in recent versions of GJS you can dovar Gtk = imports.gi.Gtk = 3.0;

Importing modules

There are also native Javascript modules for more convenientAPIs, i.e: mainloop, dbus, lang, signals.

Importing a native JS module

// built-in JS modules are always accessible// from the root importer

var Mainloop = imports.mainloop;

var DBus = imports.dbus;

Using G-I APIs

There are "well defined" rules for mapping the C symbols to theircorresponding Javascript syntax

Using G-I APIs: Functions

Library functions are mapped to Namespace.function:

g_timeout_add(...) becomes GLib.timeout_add(...)

Using G-I APIs: GObject methods

GObject methods are mapped to Namespace.Class.method:

gtk_button_new_with_label(...) becomes Gtk.Button.new_with_label(...)

Using G-I APIs: Enums

Enums are mapped to Namespace.EnumName.VALUE:

GST_STATE_PLAYING becomes Gst.State.PLAYING,

CLUTTER_STAGE_STATE_FULLSCREEN becomes Clutter.StageState.FULLSCREEN

Using G-I APIs: GObject properties

GObject properties are mapped to normal Javascript Object members replacing '-' by '_':

Property 'use-markup' of a GtkLabel becomes obj.use_markup

Using G-I APIs: GObject signals

GJS

obj.connect(signalName, callback) method is used to connect to GObject signals:

obj.connect('destroy', callback);

Seed:

A bit different: obj.signal["signal name"].connect(callback)

obj.signal['destroy'].connect(callback);

What about documentation?

http://cdblog.centraldesktop.com/2010/05/is_your_technical_documentatio/

Documentation

No official documentation for Javascript bindings yetUnofficial documentation at http://www.roojs.org/index.php/projects/gnome/introspection-docs.htmlA hot topic right now

What about development tools?

http://blog.doomby.com/blog,7-of-the-best-free-website-development-tools,311404.html

Development tools

No specific developer tools for Javascript at the momentStill too early: remains unclear what the needs will be

GNOME Javascript and CommonJS?

There is certain interest in the GNOME community, butNot all CommonJS specs could make senseMore discussion and bridging is needednode-gir?gjs-commonjs?

gjs-commonjs

Wraps GJS to add CommonJS APIsJust an experiment, not the way to goCode at https://gitorious.org/gjs-commonjs (LGPL)Only Modules 1.1 and Promises/D (partially) at the moment

Current issues and challenges

To complete introspection support in GNOME librariesTo complete introspection support in GJS/SeedTo have official documentationTo make GJS and Seed code fully compatibleTo align with CommonJS for what makes sense

Final thoughts

An elegant and efficient combination of low-level and high-level languagesJS opened to a platform with 10+ years of evolutionVery convenient for fast prototyping and gluingExpands the frontiers of JS in the desktop

An awesome stack!

your Javascript programs

GJS(Spidermonkey) Seed (JSC) node-gir (V8) ...

gobject introspection

Core

GIOGLibGObject

Userinterface

GTK+CairoClutterATKPangoWebkit

Multimedia

gstreamerCanberraPulseaudio

Communication

TelepathyAvahiGUPnP

Datastorage

EDSGDATracker

Utilities

ChamplainEnchantPopplerGeoClue

Desktopintegration

PackageKitlibnotifyseahorse

Systemintegration

upowerudiskspolicykit

Thank you!

Questions?