Javascript in Linux Desktop

8,231 views

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,231
On SlideShare
0
From Embeds
0
Number of Embeds
242
Actions
Shares
0
Downloads
70
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • test
  • Javascript in Linux Desktop

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

    ×