Javascript in linux desktop (ICOS ver.)

Javascript in Linux Desktop Yuren Ju <yurenju@gmail.com>

Yuren Ju ● Use Linux: 9 years ● For Desktop: 78 years Red Hat Debian Gentoo Debian Arch Linux Ubuntu Debian

Yuren Ju ● Blog: Yuren's Info Area ● Email: yurenju@gmail.com ● 社群 ● Hacking Thursday, KaLUG ● 工作： ASUSTek

Javascript always use in Web Applications.

Javascript in Linux Desktop ● Web Application/Platform ● Desktop Platform ● Desktop Application

Internet Application Platform

Performance

Opportunity! Javascript for Web Application Desktop Application

Javascript in desktop ? ● ● Integration Layout/Style

Web Desktop Application Platform

Web Application Layout Style Programming HTML +CSS CSS JS Server side

Platform/Browser Layout engine Javascript engine Layout Style Programming HTML +CSS CSS JS

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 Gecko layout engine SpiderMonkey Layout Style Programming XUL CSS JS DOM Demo: http://www.hevanet.com/acorbin/xul/top.xul

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

Mozilla Platform integration Mozilla Application XPCOM/NPAPI C++/Javascript System

Mozilla Platform integration DBUS VTE notify Glade GTK

Tomorrow!

Javascript in GNOME ● Seed ● based on WebKit's JavaScriptCore ● GJS ● based on Mozilla's Spidermonkey engine

XULRunner Gecko layout engine SpiderMonkey Layout Style Programming XUL CSS JS

Javascript in GNOME GObject introspection Seed/GJS Programming System library Layout Style JS

Javascript in GNOME Javascript application GObject Javascript desktop runtime introspection System library Seed/GJS C API: GTK, Gstreamer, Clutter, Glib, etc. Javascript engine JavascriptCore/SpiderMonkey

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

GObject Introspection

Language for GNOME new! <JS>

Traditional arch. Python/Perl/Ruby/Java..., etc. GTK Clutter VTE notify GStreamer Native C API

GObject Introspection JS Java Python Perl Ruby PHP? GI GTK Clutter VTE notify GStreamer Native C API

Metadata using annotations in the comments

GObject Introspection

Annotations girscanner Gir xml file gircompiler typelib 40 B2 02 00 10 B2........

GObject Introspection foo.c foo.h Library source, with type annotations Foo.gir XML file libfoo.so Foo.typelib Binary file libffi.so libgirepository.so Specific language bindings

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 JS Java Python Perl Ruby PHP? GI GTK Clutter VTE notify GStreamer Native C API

Seed/GJS DBUS VTE notify Glade 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: ☹

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

END Thank you!

But I have..., why GI? ● Pythongtk ● e.g. nautilus ● Rubygnome2 ● No python, ruby, java binding... ● javagnome

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 Unported http://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

http://yurinfore.blogspot.com	204
http://yurinfore.blogspot.tw	51
http://translate.googleusercontent.com	6
http://feeds.feedburner.com	4
http://yurinfore.blogspot.de	4
http://webcache.googleusercontent.com	1
http://yurinfore.blogspot.hk	1

Javascript in linux desktop (ICOS ver.)

by Yuren Ju

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 271

Statistics