Javascript in Linux Desktop

Yuren Ju <yurenju@gmail.com>

Yuren Ju

● Use Linux: 9 years● For Desktop: 78 years

Red Hat

Debian

Gentoo

Debian

UbuntuArch Linux Debian

Yuren Ju

● Blog: Yuren's Info Area● Email: yurenju@gmail.com● 社群

● Hacking Thursday, KaLUG

● 工作： ASUSTek

Javascript always use in Web Applications.

Javascript always use in Web Applications.

Javascript in Linux Desktop

● Web Application/Platform● Desktop Platform● Desktop Application

Internet

ApplicationPlatform

Performance

Opportunity!

Javascript for Web Application Desktop Application

?Javascript in desktop

● Integration● Layout/Style

Application

Platform

Web Desktop

Web Application

JSHTML+CSS CSS

Layout Style Programming

Server side

Platform/Browser

JSHTML+CSS CSS

Layout Style Programming

Layout engine Javascript engine

Platform/Browser (2)

Firefox Chrome

Layout engine Gecko Webkit

Javascript engine SpiderMonkey V8

To Desktop Application

Desktop  Platform

● XULRunner (Mozilla platform)● GNOME Javascript runtime

● GJS/Seed

XULRunner

Programming in Web Browser!

Mozilla applications

XULRunner

JSCSS

Layout Style Programming

Gecko layout engine SpiderMonkey

XUL

DOM

Demo: http://www.hevanet.com/acorbin/xul/top.xul 

XUL?  又一個新標記語言？Try...

Mozilla Platform  integration

Mozilla Application

System

XPCOM/NPAPI C++/Javascript

Mozilla Platform  integration

DBUS VTE

notifyGlade

GTK

But!

Tomorrow!

Javascript in GNOME

● Seed● based on WebKit's JavaScriptCore

● GJS● based on Mozilla's Spidermonkey engine

XULRunner

JSCSS

Layout Style Programming

Gecko layout engine SpiderMonkey

XUL

Javascript in GNOME

JSLayout Style

Programming

GObject introspection Seed/GJS

Systemlibrary

Javascript in GNOME

Javascript engine

Javascript desktop runtime

Javascript application

System library

C API: GTK, Gstreamer,Clutter, Glib, etc.

GObjectintrospection

JavascriptCore/SpiderMonkey

Seed/GJS

GObject Introspection usage 

● const Gtk = imports.gi.Gtk;● var window = new Gtk.Window ();

GObject Introspection

<JS>

new!

Language for GNOME

Traditional arch.

Native C API

GStreamer

Python/Perl/Ruby/Java..., etc.

VTE notifyGTK Clutter

GObject Introspection

Native C API

GI

JS Java Python Perl Ruby PHP?

GStreamerVTE notifyGTK Clutter

Metadatausing annotations in the comments

GObject Introspection

girscanner

40 B2 02 00 10 B2........

gircompilertypelib

Gir xml file

Annotations

GObject Introspectionfoo.cfoo.hLibrary source, with type annotations

Foo.girXML file

Foo.typelibBinary file

libgirepository.so

Specific language bindings

libfoo.so

libffi.so

C API: gtk_button_set_label

● java: button.setLabel("foo")● javascript/python/vala: button.set_label("foo")● perl: $button>set_label("foo")● scheme: (send button (setlabel "foo"))

GObject Introspection

Native C API

GI

JS Java Python Perl Ruby PHP?

GStreamerVTE notifyGTK Clutter

Seed/GJS

DBUS VTE

notifyGlade

GTK

$ aptitude search gir

Javascript  已經準備好了！

Hello world

Hello world (2)

Demo  jsgallery

Applications based on Seed

● Seed● Swellfoop● lightsoff

Seed/GJS cons

● Your javascript just like another scripting language (e.g. python)

Web developer: ☹

if...

Web developer: ☺

Seedkit

● Define your UI in webstandards, use your GObjects

● inspired by WebOS SDK and Mozilla JetPack● http://live.gnome.org/SeedKit 

Seedkit Demo

Use library

● dbus● libnotify● wnck

Source:Html  http://gist.github.com/578919 Js  http://gist.github.com/578922 

Cons

● Highly dependency ● Hard to Communicate with main statement● Poor documentation

gnomeshell

● Use javascript to control your desktop

file:///usr/share/gnomeshell/js/ui 

Making extension – just like Firefox!

gnomeshell createextension

Demo – gnomeshell extension

Javascript in Linux Desktop

● Apps based on javascript● Powerful extension system with js● Simple coding● http://live.gnome.org/JavaScript 

ENDThank you!

But I have..., why GI?

● Pythongtk● Rubygnome2● javagnome

● e.g. nautilus● No python, ruby, java 

binding...

Layout/Theme

● GTK – gtkthemeengine● Gnomeshell (shell toolkit) – libcroco (CSS)● MX toolkit – CSS

GJS vs seed

● EMCAScript support● GJS support javascript 1.8.1 extensions● Seed support javascript 1.5● for each, let, etc.● [item * 2 for each (item in list)]

Return values

● GJS● print (texture.get_base_size());

● Seed● var height = {}, width = {};● texture.get_base_size (width, height);● print (“width: ” + width.value + “, height: “ + 

height.value)

Clutter fine tune

● GJS● No Actor.animate function

● Seed● workaround for Actor.animate● But seed2.28/2.30 use different event mapping

Signal

● GJS● actor.connect ("signalname", callback)

● Seed● actor.signal["signalname"].connect (callback)● actor.signal.destroy.connect (callback)

Presentation License

CC Attribution 3.0 Unportedhttp://creativecommons.org/licenses/by/3.0/

Images License

Creative Commons (AttributionShare Alike 3.0 Unported)http://www.iconfinder.com/search/?q=iconset:sketchy http://www.iconfinder.com/search/?q=iconset:49handdrawing