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

3. Yuren Ju
●
Use Linux: 9 years
●
For Desktop: 7­8 years
Red Hat
Debian
Gentoo
Debian
Arch Linux Ubuntu Debian

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

5. Javascript always use in Web Applications.

6. Javascript always use in Web Applications.

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

8. Internet
Application
Platform

9. Performance

10. Opportunity!
Javascript for Web Application Desktop Application

11. Javascript in desktop
? ●
●
Integration
Layout/Style

12. Web Desktop
Application
Platform

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

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

15. Platform/Browser (2)
Firefox Chrome
Layout engine Gecko Webkit
Javascript engine SpiderMonkey V8

16. To Desktop Application

17. Desktop ­ Platform
●
XULRunner (Mozilla platform)
●
GNOME Javascript runtime
●
GJS/Seed

18. XULRunner
Programming in Web Browser!

19. Mozilla applications

20. XULRunner
Gecko layout engine SpiderMonkey
Layout Style Programming
XUL CSS JS
DOM
Demo: http://www.hevanet.com/acorbin/xul/top.xul

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

22. Mozilla Platform ­ integration
Mozilla Application
XPCOM/NPAPI C++/Javascript
System

23. Mozilla Platform ­ integration
D­BUS VTE
notify
Glade
GTK

24. But!

25. Tomorrow!

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

27. XULRunner
Gecko layout engine SpiderMonkey
Layout Style Programming
XUL CSS JS

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

29. 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

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

31. GObject Introspection

32. Language for GNOME
new!
<JS>

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

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

35. Metadata
using annotations in the comments

36. GObject Introspection

37. Annotations
g­ir­scanner
Gir xml file
g­ir­compiler
typelib
40 B2 02 00 10 B2........

38. 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

39. 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 (set­label "foo"))

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

41. Seed/GJS
D­BUS VTE
notify
Glade
GTK
$ aptitude search gir

42. Javascript 已經準備好了！

43. Hello world

44. Hello world (2)

45. Demo ­ js­gallery

46. Applications based on Seed
●
Seed
●
Swell­foop
●
lightsoff

47. Seed/GJS cons
●
Your javascript just like another scripting
language (e.g. python)

48. Web developer: ☹

49. if...

50. Web developer: ☺

51. Seedkit
●
Define your UI in web­standards, use your
GObjects
●
inspired by WebOS SDK and Mozilla JetPack
●
http://live.gnome.org/SeedKit

52. Seedkit Demo

53. Use library
●
dbus
●
libnotify
●
wnck
Source:
Html ­ http://gist.github.com/578919
Js ­ http://gist.github.com/578922

54. Cons
●
Highly dependency
●
Hard to Communicate with main statement
●
Poor documentation

55. gnome­shell
●
Use javascript to control your desktop
file:///usr/share/gnome­shell/js/ui

56. Making extension – just like Firefox!
gnome­shell ­­create­extension

57. Demo – gnome­shell extension

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

59. END
Thank you!

60. But I have..., why GI?
●
Python­gtk ●
e.g. nautilus
●
Ruby­gnome2 ●
No python, ruby, java
binding...
●
java­gnome

61. Layout/Theme
●
GTK – gtk­theme­engine
●
Gnome­shell (shell toolkit) – libcroco (CSS)
●
MX toolkit – CSS

62. 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)]

63. 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)

64. Clutter fine tune
●
GJS
●
No Actor.animate function
●
Seed
●
workaround for Actor.animate
●
But seed­2.28/2.30 use different event mapping

65. Signal
●
GJS
●
actor.connect ("signal­name", callback)
●
Seed
●
actor.signal["signal­name"].connect (callback)
●
actor.signal.destroy.connect (callback)

66. Presentation License
CC Attribution 3.0 Unported
http://creativecommons.org/licenses/by/3.0/

67. Images License
Creative Commons (Attribution­Share Alike 3.0 Unported)
http://www.iconfinder.com/search/?q=iconset:sketchy
http://www.iconfinder.com/search/?q=iconset:49handdrawing