Javascript in linux desktop (ICOS ver.)
-
Upload
yuren-ju -
Category
Technology
-
view
2.228 -
download
2
Transcript of Javascript in linux desktop (ICOS ver.)
Javascript in Linux Desktop
Yuren Ju <[email protected]>
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: [email protected]● 社群
● 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