Javascript, the GNOME way
Berlin, 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-meth...
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...
GNOME 3 was released in April 2011
http://www.gnome.org/gnome-3/
GNOME 3 was released in April 2011
A major breakthrough in design
HW acceleration for graphics
Tons of cleaning up and res...
The gnome-shell
A modern, integrated user experience
Acts as a compositing manager for the desktop
Handles application lau...
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 a
library's API in a convenient...
gobject-introspection goals
Enable two level applications: C and <your favorite runtime>;
Share binding infrastructure wor...
the big picture (with GJS)
the big picture (with Seed)
GIR file
An XML description of a library API
Can include documentation
Example: ZLibCompressor class from GIO's GIR
<class ...
Typelib file
A binary representation of the GIR file for faster access during
run-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 information
Norma...
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 JavascriptCore
GJS supports language feature...
Oh wait! what about node-gir?
node-gir
G-I support for Node
early stage of development
written by Tim Caswell
code at https://github.com/creationix/node...
Writing Javascript in GJS/Seed
Show time!
Importing modules
No 'require', sorry
The 'imports' keyword
Importing is an assignment, not a function call
The full modul...
Importing a Javascript module
// this will import file 'path/to/my/module.js'
var MyModule = imports.path.to.my.module;
//...
Importing a module from the G-I repository
// this will import GLib library namespace
var GLib = imports.gi.GLib;
// this ...
Importing modules
There are also native Javascript modules for more convenient
APIs, 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...
Using G-I APIs
There are "well defined" rules for mapping the C symbols to their
corresponding 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(...) becom...
Using G-I APIs: Enums
Enums are mapped to Namespace.EnumName.VALUE:
GST_STATE_PLAYING becomes Gst.State.PLAYING,
CLUTTER_S...
Using G-I APIs: GObject properties
GObject properties are mapped to normal Javascript Object members replacing '-' by '_':...
Using G-I APIs: GObject signals
GJS
obj.connect(signalName, callback) method is used to connect to GObject signals:
obj.co...
What about documentation?
http://cdblog.centraldesktop.com/2010/05/is_your_technical_documentatio/
Documentation
No official documentation for Javascript bindings yet
Unofficial documentation at http://www.roojs.org/index.p...
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 moment
Still too early: remains unclear what the needs ...
GNOME Javascript and CommonJS?
There is certain interest in the GNOME community, but
Not all CommonJS specs could make sen...
gjs-commonjs
Wraps GJS to add CommonJS APIs
Just an experiment, not the way to go
Code at https://gitorious.org/gjs-common...
Current issues and challenges
To complete introspection support in GNOME libraries
To complete introspection support in GJ...
Final thoughts
An elegant and efficient combination of low-level and high-level languages
JS opened to a platform with 10+ ...
An awesome stack!
your Javascript programs
GJS
(Spidermonkey)
Seed (JSC) node-gir (V8) ...
gobject introspection
Core
GIO
...
Thank you!
Questions?
Javascript, the GNOME way (JSConf EU 2011)
Upcoming SlideShare
Loading in...5
×

Javascript, the GNOME way (JSConf EU 2011)

984

Published on

By Eduardo Lima.

GNOME, the free desktop environment, has embraced Javascript. Starting from version 3.0, Javascript is at the core of the user experience delivered to tens of thousands of GNOME users out there. We call it the gnome-shell, but the real beauty lies within.

This presentation will give you a brief tour around the great technology behind the shell, a technology that GNOME hackers use to have automatic reflection of their core libraries into Javascript. Yes, you read well, automatic! It is called gobject-introspection and gives you the super-powers of Javascript-ing most of the hardcore C libraries that powers GNOME, from multimedia, web browsing, accelerated 2D and 3D graphics, communications, UX, hardware interaction, and many more.

During the talk, a couple of examples will be discussed, some demos dropped, and we might hack the shell on-the-fly as well!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
984
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript, the GNOME way (JSConf EU 2011)

  1. 1. Javascript, the GNOME way Berlin, October 2nd, 2011 (follow the talk at http://10.109.2.56:8080)
  2. 2. 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...
  3. 3. What is GNOME? http://bethesignal.org/blog/2011/03/12/thoughts-on-gnome/
  4. 4. GNOME is people http://www.flickr.com/photos/lucasrocha/3913631234/sizes/l/in/photostream/
  5. 5. A full-featured desktop environment
  6. 6. A collection of libraries and programs libgpg-error libgcrypt libxslt gnome-common intltool rarian gnome-doc-utils gtk-doc glib cairo gobject-introspection atk pango gdk-pixbuf shared-mime-info gtk+ vala dconf libgnome-keyring expat polkit gudev NetworkManager libproxy cantarell-fonts gtk+-2 gtk-engines librsvg gnome-themes-standard gsettings-desktop-schemas glib-networking libsoup gconf libgweather libgdata gstreamer 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 libxklavier libgnomekbd 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 metacity mutter telepathy-logger gnome-shell mousetweaks network-manager-applet telepathy-mission-control meta-gnome-core-shell gnome-backgrounds nautilus gnome-user-share vino itstool yelp-xsl yelp-tools gnome-user-docs meta-gnome-core-extras gmime poppler gtkhtml evolution libgsf tracker totem-pl-parser brasero libnice farsight2 telepathy-farsight clutter-gtk libchamplain empathy epiphany gnome-js-common seed libpeas eog evince gcalctool gnome-contacts libwnck mm-common libsigc++2 glibmm cairomm pangomm atkmm gtkmm gnome-system-monitor vte gnome-terminal gnome-utils gucharmap libdiscid libmusicbrainz clutter-gst gtksourceview sushi yelp meta-gnome-core-utilities gnome-panel notification-daemon dbus-python polkit-gnome ... ... ... ... all free software
  7. 7. GNOME 3 was released in April 2011 http://www.gnome.org/gnome-3/
  8. 8. GNOME 3 was released in April 2011 A major breakthrough in design HW acceleration for graphics Tons of cleaning up and restructuring of the stack The gnome-shell to be the default UX ... and GNOME met Javascript
  9. 9. The gnome-shell A modern, integrated user experience Acts as a compositing manager for the desktop Handles application launching, window switching, multiple desktops, and much more Interfaces GNOME libraries using Javascript as glue 29,497 lines of Javascript code (39,538 of C)
  10. 10. the gnome-shell https://live.gnome.org/GnomeShell/Technology
  11. 11. what is gobject-introspection? http://www.flyingdisk.com/badges.htm
  12. 12. what is gobject-introspection? A set of tools for extracting and accessing the metadata of a library's API in a convenient way for other programs to use it. library APIs must be "annotated" and designed to be "introspection friendly"
  13. 13. 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
  14. 14. the big picture (with GJS)
  15. 15. the big picture (with Seed)
  16. 16. GIR file An XML description of a library API Can 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>
  17. 17. Typelib file A binary representation of the GIR file for faster access during run-time.
  18. 18. GIRepository: API for retrieving library info from a typelib file http://moodleman.moodle.com.au/archives/202
  19. 19. libffi: fantasy fiction foreign function interface http://moodleman.moodle.com.au/archives/202
  20. 20. Annotations Go inline in the code (normally in the .c files) Complement the API description with semantic information Normally "guessed" correctly by the scanner Documented at https://live.gnome.org/GObjectIntrospection/Annotations
  21. 21. Annotations example (I)
  22. 22. Annotations example (II)
  23. 23. Javascript, at last!
  24. 24. Two engines: GJS and Seed
  25. 25. GJS vs. Seed GJS wraps Mozilla's Spidermonkey engine while Seed wraps Apple's JavascriptCore GJS 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 moment Other minor differences (i.e module extensions, etc) both have a fairly good G-I support
  26. 26. Oh wait! what about node-gir?
  27. 27. node-gir G-I support for Node early stage of development written by Tim Caswell code 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 to use it for desktop tools and applications.", Tim Caswell
  28. 28. Writing Javascript in GJS/Seed
  29. 29. Show time!
  30. 30. Importing modules No 'require', sorry The 'imports' keyword Importing is an assignment, not a function call The full module's global scope is imported 'imports.searchPath' similar to 'require.paths' Only synchronous
  31. 31. 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;
  32. 32. Importing a module from the G-I repository // this will import GLib library namespace var GLib = imports.gi.GLib; // this will import GTK+ library namespace // for API version 3.0 var Gtk = imports.gi.Gtk-3.0; // in recent versions of GJS you can do var Gtk = imports.gi.Gtk = 3.0;
  33. 33. Importing modules There are also native Javascript modules for more convenient APIs, i.e: mainloop, dbus, lang, signals.
  34. 34. Importing a native JS module // built-in JS modules are always accessible // from the root importer var Mainloop = imports.mainloop; var DBus = imports.dbus;
  35. 35. Using G-I APIs There are "well defined" rules for mapping the C symbols to their corresponding Javascript syntax
  36. 36. Using G-I APIs: Functions Library functions are mapped to Namespace.function: g_timeout_add(...) becomes GLib.timeout_add(...)
  37. 37. 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(...)
  38. 38. 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
  39. 39. 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
  40. 40. 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);
  41. 41. What about documentation? http://cdblog.centraldesktop.com/2010/05/is_your_technical_documentatio/
  42. 42. Documentation No official documentation for Javascript bindings yet Unofficial documentation at http://www.roojs.org/index.php/projects/gnome/introspection-docs.html A hot topic right now
  43. 43. What about development tools? http://blog.doomby.com/blog,7-of-the-best-free-website-development-tools,311404.html
  44. 44. Development tools No specific developer tools for Javascript at the moment Still too early: remains unclear what the needs will be
  45. 45. GNOME Javascript and CommonJS? There is certain interest in the GNOME community, but Not all CommonJS specs could make sense More discussion and bridging is needed node-gir? gjs-commonjs?
  46. 46. gjs-commonjs Wraps GJS to add CommonJS APIs Just an experiment, not the way to go Code at https://gitorious.org/gjs-commonjs (LGPL) Only Modules 1.1 and Promises/D (partially) at the moment
  47. 47. Current issues and challenges To complete introspection support in GNOME libraries To complete introspection support in GJS/Seed To have official documentation To make GJS and Seed code fully compatible To align with CommonJS for what makes sense
  48. 48. Final thoughts An elegant and efficient combination of low-level and high-level languages JS opened to a platform with 10+ years of evolution Very convenient for fast prototyping and gluing Expands the frontiers of JS in the desktop
  49. 49. An awesome stack! your Javascript programs GJS (Spidermonkey) Seed (JSC) node-gir (V8) ... gobject introspection Core GIO GLib GObject User interface GTK+ Cairo Clutter ATK Pango Webkit Multimedia gstreamer Canberra Pulseaudio Communication Telepathy Avahi GUPnP Data storage EDS GDA Tracker Utilities Champlain Enchant Poppler GeoClue Desktop integration PackageKit libnotify seahorse System integration upower udisks policykit
  50. 50. Thank you! Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×