javascript in linux desktop

Download Javascript in Linux Desktop

If you can't read please download the document

Upload: yuren-ju

Post on 16-Apr-2017

8.249 views

Category:

Technology


0 download

TRANSCRIPT

Javascript in Linux Desktop

Yuren Ju

test

Yuren Ju

Use Linux: 9 years

For Desktop: 7-8 years

Red HatDebianGentooDebianUbuntuArch LinuxDebian

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/theme

Application

Platform

Web

Desktop

Web Application

JS

HTML+CSS

CSS

Layout

Style

Programming

Server side

Platform/Browser

JS

HTML+CSS

CSS

Layout

Style

Programming

Layout engine

Javascript engine

Platform/Browser (2)

FirefoxChrome

Layout engineGeckoWebkit

Javascript engineSpiderMonkeyV8

To Desktop Application

Desktop - Platform

XULRunner (Mozilla platform)

GNOME Javascript runtimeGJS/Seed

XULRunner

Programming in Web Browser!

Mozilla applications

XULRunner

JS

CSS

Layout

Style

Programming

Gecko layout engine

SpiderMonkey

XUL

DOM

Demo: http://www.hevanet.com/acorbin/xul/top.xul

Mozilla Platform - integration

Mozilla ApplicationSystemXPCOM/NPAPIC++/Javascript

Mozilla Platform - integration

D-BUS

VTE

notify

Glade

GTK

Javascript in GNOME

Seedbased on WebKit's JavaScriptCore

GJSbased on Mozilla's Spidermonkey engine

XULRunner

JS

CSS

Layout

Style

Programming

Gecko layout engine

SpiderMonkey

XUL

Javascript in GNOME

JS

Layout

Style

Programming

GObject introspection

Seed/GJS

Systemlibrary

Javascript in GNOME

Javascript engineJavascript desktop runtimeJavascript applicationSystem 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

new!

Language for GNOME

Traditional arch.

Native C APIGStreamerPython/Perl/Ruby/Java..., etc.VTEnotifyGTKClutter

GObject Introspection

Native C APIGIJSJavaPythonPerlRubyPHP?GStreamerVTEnotifyGTKClutter

Metadatausing annotations in the comments

GObject Introspection

g-ir-scanner

40 B2 02 00 10 B2........

g-ir-compiler

typelib

Gir xml file

Annotations

GObject Introspection

foo.cfoo.hLibrary source, with type annotationsFoo.girXML fileFoo.typelibBinary filelibgirepository.soSpecific language bindingslibfoo.solibffi.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 (set-label "foo"))

GObject Introspection

Native C APIGIJSJavaPythonPerlRubyPHP?GStreamerVTEnotifyGTKClutter

Seed/GJS

D-BUS

VTE

notify

Glade

GTK

$ aptitude search gir

Javascript

Hello world

Hello world (2)

Demo - js-gallery

Applications based on Seed

SeedSwell-foop

lightsoff

gnome-shell

Use javascript to control your desktop

file:///usr/share/gnome-shell/js/ui

Making extension just like Firefox!

gnome-shell --create-extension

Demo gnome-shell 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?

Python-gtk

Ruby-gnome2

java-gnome

e.g. nautilusNo python, ruby, java binding...

Layout/Theme

GTK gtk-theme-engine

Gnome-shell (shell toolkit) libcroco (CSS)

MX toolkit CSS

GJS vs seed

EMCAScript supportGJS support javascript 1.8.1 extensions

Seed support javascript 1.5

for each, let, etc.

[item * 2 for each (item in list)]

Return values

GJSprint (texture.get_base_size());

Seedvar height = {}, width = {};

texture.get_base_size (width, height);

print (width: + width.value + , height: + height.value)

Clutter fine tune

GJSNo Actor.animate function

Seedworkaround for Actor.animate

But seed-2.28/2.30 use different event mapping

Signal

GJSactor.connect ("signal-name", callback)

Seedactor.signal["signal-name"].connect (callback)

actor.signal.destroy.connect (callback)

Presentation License

CC Attribution 3.0 Unportedhttp://creativecommons.org/licenses/by/3.0/

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