Javascript in Linux Desktop
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Javascript in Linux Desktop

on

  • 8,123 views

 

Statistics

Views

Total Views
8,123
Views on SlideShare
7,883
Embed Views
240

Actions

Likes
5
Downloads
59
Comments
0

10 Embeds 240

http://yurinfore.blogspot.com 177
http://yurinfore.blogspot.tw 36
http://www.techgig.com 7
http://translate.googleusercontent.com 6
http://feeds.feedburner.com 4
http://yurinfore.blogspot.de 3
http://www.linkedin.com 3
http://localhost 2
http://yurinfore.blogspot.hk 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • test

Javascript in Linux Desktop Presentation Transcript

  • 1.  
  • 2. Javascript in Linux Desktop Yuren Ju <yurenju@gmail.com>
  • 3. Yuren Ju
    • Use Linux: 9 years
    • 4. For Desktop: 7-8 years
    Red Hat Debian Gentoo Debian Ubuntu Arch Linux Debian
  • 5. Yuren Ju
    • Blog: Yuren's Info Area
    • 6. Email: [email_address]
    • 7. 社群
      • Hacking Thursday, KaLUG
    • 工作:ASUSTek
  • 8. Javascript always use in Web Applications.
  • 9. Javascript always use in Web Applications.
  • 10. Javascript in Linux Desktop
    • Web Application/Platform
    • 11. Desktop Platform
    • 12. Desktop Application
  • 13. Internet Application Platform .................................
  • 14. Performance
  • 15. Opportunity! Javascript for Web Application Desktop Application
  • 16. ? Javascript in desktop
    • Integration
    • 17. Layout
    • 18. Style/theme
  • 19. Application Platform Web Desktop
  • 20. Web Application JS HTML +CSS CSS Layout Style Programming Server side
  • 21. Platform/Browser JS HTML +CSS CSS Layout Style Programming Layout engine Javascript engine
  • 22. Platform/Browser (2) Firefox Chrome Layout engine Gecko Webkit Javascript engine SpiderMonkey V8
  • 23. To Desktop Application
  • 24. Desktop - Platform
    • XULRunner (Mozilla platform)
    • 25. GNOME Javascript runtime
      • GJS/Seed
  • 26. XULRunner Programming in Web Browser!
  • 27. Mozilla applications
  • 28. XULRunner JS CSS Layout Style Programming Gecko layout engine SpiderMonkey XUL DOM Demo: http://www.hevanet.com/acorbin/xul/top.xul
  • 29. Mozilla Platform - integration C++/ Javascript Mozilla Application System XPCOM/NPAPI
  • 30. Mozilla Platform - integration D-BUS Glade GTK VTE notify
  • 31. Javascript in GNOME
    • Seed
      • based on WebKit's JavaScriptCore
    • GJS
      • based on Mozilla's Spidermonkey engine
  • 32. XULRunner JS CSS Layout Style Programming Gecko layout engine SpiderMonkey XUL
  • 33. Javascript in GNOME JS Layout Style Programming GObject introspection Seed/GJS System library
  • 34. Javascript in GNOME C API: GTK, Gstreamer, Clutter, Glib, etc. GObject introspection JavascriptCore/SpiderMonkey Seed/GJS Javascript engine Javascript desktop runtime Javascript application System library
  • 35. GObject Introspection usage
    • const Gtk = imports.gi.Gtk;
    • 36. var window = new Gtk.Window ();
  • 37. GObject Introspection
  • 38. <JS> new! Language for GNOME
  • 39. Traditional arch. Native C API GStreamer Python/Perl/Ruby/Java..., etc. VTE notify GTK Clutter
  • 40. GObject Introspection Native C API GI JS Java Python Perl Ruby PHP? GStreamer VTE notify GTK Clutter
  • 41. Metadata using annotations in the comments
  • 42. GObject Introspection
  • 43. g-ir-scanner 40 B2 02 00 10 B2........ g-ir-compiler typelib Gir xml file Annotations
  • 44. GObject Introspection foo.c foo.h Library source, with type annotations Foo.gir XML file Foo.typelib Binary file libgirepository.so Specific language bindings libfoo.so libffi.so
  • 45. C API: gtk_button_set_label
    • java: button.setLabel(&quot;foo&quot;)
    • 46. javascript/python/vala: button.set_label(&quot;foo&quot;)
    • 47. perl: $button->set_label(&quot;foo&quot;)
    • 48. scheme: (send button (set-label &quot;foo&quot;))
  • 49. GObject Introspection Native C API GI JS Java Python Perl Ruby PHP? GStreamer VTE notify GTK Clutter
  • 50. Seed/GJS D-BUS Glade GTK $ aptitude search gir VTE notify
  • 51. Javascript 已經準備好了!
  • 52. Hello world
  • 53. Hello world (2)
  • 54. Demo - js-gallery
  • 55. Applications based on Seed
    • Seed
      • Swell-foop
      • 56. lightsoff
  • 57. gnome-shell
    • Use javascript to control your desktop
    file:///usr/share/gnome-shell/js/ui
  • 58. Making extension – just like Firefox! gnome-shell --create-extension
  • 59. Demo – gnome-shell extension
  • 60. Javascript in Linux Desktop
    • Apps based on javascript
    • 61. Powerful extension system with js
    • 62. Simple coding
    • 63. http://live.gnome.org/JavaScript
  • 64. END Thank you!
  • 65. But I have..., why GI?
    • Python-gtk
    • 66. Ruby-gnome2
    • 67. java-gnome
    • e.g. nautilus
      • No python, ruby, java binding...
  • 68. Layout/Theme
    • GTK – gtk-theme-engine
    • 69. Gnome-shell (shell toolkit) – libcroco (CSS)
    • 70. MX toolkit – CSS
  • 71. GJS vs seed
    • EMCAScript support
      • GJS support javascript 1.8.1 extensions
      • 72. Seed support javascript 1.5
      • 73. for each , let , etc.
      • 74. [item * 2 for each (item in list)]
  • 75. Return values
    • GJS
      • print (texture.get_base_size());
    • Seed
      • var height = {}, width = {};
      • 76. texture.get_base_size (width, height);
      • 77. print (“width: ” + width.value + “, height: “ + height.value)
  • 78. Clutter fine tune
    • GJS
      • No Actor.animate function
    • Seed
      • workaround for Actor.animate
      • 79. But seed-2.28/2.30 use different event mapping
  • 80. Signal
    • GJS
      • actor.connect (&quot;signal-name&quot;, callback)
    • Seed
      • actor.signal[&quot;signal-name&quot;].connect (callback)
      • 81. actor.signal.destroy.connect (callback)
  • 82. Presentation License CC Attribution 3.0 Unported http://creativecommons.org/licenses/by/3.0/
  • 83. 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