Javascript in linux desktop (ICOS ver.)

2,760 views

Published on

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
2,760
On SlideShare
0
From Embeds
0
Number of Embeds
301
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript in linux desktop (ICOS ver.)

  1. 1. Javascript in Linux Desktop Yuren Ju <yurenju@gmail.com>
  2. 2. Yuren Ju ● Use Linux: 9 years ● For Desktop: 7­8 years Red Hat Debian Gentoo Debian Arch Linux Ubuntu Debian
  3. 3. Yuren Ju ● Blog: Yuren's Info Area ● Email: yurenju@gmail.com ● 社群 ● Hacking Thursday, KaLUG ● 工作: ASUSTek
  4. 4. Javascript always use in Web Applications.
  5. 5. Javascript always use in Web Applications.
  6. 6. Javascript in Linux Desktop ● Web Application/Platform ● Desktop Platform ● Desktop Application
  7. 7. Internet Application Platform
  8. 8. Performance
  9. 9. Opportunity! Javascript for Web Application Desktop Application
  10. 10. Javascript in desktop ? ● ● Integration Layout/Style
  11. 11. Web Desktop Application Platform
  12. 12. Web Application Layout Style Programming HTML +CSS CSS JS Server side
  13. 13. Platform/Browser Layout engine Javascript engine Layout Style Programming HTML +CSS CSS JS
  14. 14. Platform/Browser (2) Firefox Chrome Layout engine Gecko Webkit Javascript engine SpiderMonkey V8
  15. 15. To Desktop Application
  16. 16. Desktop ­ Platform ● XULRunner (Mozilla platform) ● GNOME Javascript runtime ● GJS/Seed
  17. 17. XULRunner Programming in Web Browser!
  18. 18. Mozilla applications
  19. 19. XULRunner Gecko layout engine SpiderMonkey Layout Style Programming XUL CSS JS DOM Demo: http://www.hevanet.com/acorbin/xul/top.xul 
  20. 20. XUL?  又一個新標記語言? Try...
  21. 21. Mozilla Platform ­ integration Mozilla Application XPCOM/NPAPI C++/Javascript System
  22. 22. Mozilla Platform ­ integration D­BUS VTE notify Glade GTK
  23. 23. But!
  24. 24. Tomorrow!
  25. 25. Javascript in GNOME ● Seed ● based on WebKit's JavaScriptCore ● GJS ● based on Mozilla's Spidermonkey engine
  26. 26. XULRunner Gecko layout engine SpiderMonkey Layout Style Programming XUL CSS JS
  27. 27. Javascript in GNOME GObject introspection Seed/GJS Programming System library Layout Style JS
  28. 28. 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
  29. 29. GObject Introspection usage  ● const Gtk = imports.gi.Gtk; ● var window = new Gtk.Window ();
  30. 30. GObject Introspection
  31. 31. Language for GNOME new! <JS>
  32. 32. Traditional arch. Python/Perl/Ruby/Java..., etc. GTK Clutter VTE notify GStreamer Native C API
  33. 33. GObject Introspection JS Java Python Perl Ruby PHP? GI GTK Clutter VTE notify GStreamer Native C API
  34. 34. Metadata using annotations in the comments
  35. 35. GObject Introspection
  36. 36. Annotations g­ir­scanner Gir xml file g­ir­compiler typelib 40 B2 02 00 10 B2........
  37. 37. 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
  38. 38. 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"))
  39. 39. GObject Introspection JS Java Python Perl Ruby PHP? GI GTK Clutter VTE notify GStreamer Native C API
  40. 40. Seed/GJS D­BUS VTE notify Glade GTK $ aptitude search gir
  41. 41. Javascript  已經準備好了!
  42. 42. Hello world
  43. 43. Hello world (2)
  44. 44. Demo ­ js­gallery
  45. 45. Applications based on Seed ● Seed ● Swell­foop ● lightsoff
  46. 46. Seed/GJS cons ● Your javascript just like another scripting  language (e.g. python)
  47. 47. Web developer: ☹
  48. 48. if...
  49. 49. Web developer:  ☺
  50. 50. Seedkit ● Define your UI in web­standards, use your  GObjects ● inspired by WebOS SDK and Mozilla JetPack ● http://live.gnome.org/SeedKit 
  51. 51. Seedkit Demo
  52. 52. Use library ● dbus ● libnotify ● wnck Source: Html ­ http://gist.github.com/578919  Js ­ http://gist.github.com/578922 
  53. 53. Cons ● Highly dependency  ● Hard to Communicate with main statement ● Poor documentation
  54. 54. gnome­shell ● Use javascript to control your desktop file:///usr/share/gnome­shell/js/ui 
  55. 55. Making extension – just like Firefox! gnome­shell ­­create­extension
  56. 56. Demo – gnome­shell extension
  57. 57. Javascript in Linux Desktop ● Apps based on javascript ● Powerful extension system with js ● Simple coding ● http://live.gnome.org/JavaScript 
  58. 58. END Thank you!
  59. 59. But I have..., why GI? ● Python­gtk ● e.g. nautilus ● Ruby­gnome2 ● No python, ruby, java  binding... ● java­gnome
  60. 60. Layout/Theme ● GTK – gtk­theme­engine ● Gnome­shell (shell toolkit) – libcroco (CSS) ● MX toolkit – CSS
  61. 61. 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)]
  62. 62. 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)
  63. 63. Clutter fine tune ● GJS ● No Actor.animate function ● Seed ● workaround for Actor.animate ● But seed­2.28/2.30 use different event mapping
  64. 64. Signal ● GJS ● actor.connect ("signal­name", callback) ● Seed ● actor.signal["signal­name"].connect (callback) ● actor.signal.destroy.connect (callback)
  65. 65. Presentation License CC Attribution 3.0 Unported http://creativecommons.org/licenses/by/3.0/
  66. 66. 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

×