JavaScript on the Desktop

JAVASCRIPT ON Building desktop apps in

THE DESKTOP HTML5 and JavaScript

@DOMENIC

DOMENIC
DENICOLA

• https://github.com/domenic
• https://npmjs.org/~domenic
• http://slideshare.net/domenicdenicola

Things I’ve done recently:
• http://es6isnigh.com
• Promises/A+
• Real-World Windows 8 Apps in JS

@DOMENIC

WHY DESKTOP APPS?
Two reasons:

@DOMENIC

WHY DESKTOP APPS?

@DOMENIC

IN THE WILD

@DOMENIC

HOW?

http://www.chromium.org/developers/content-
module @DOMENIC

THE CHROME CONTENT
API

@DOMENIC

CHROMIUM EMBEDDED
FRAMEWORK

http://code.google.com/p/chromiumembedded/
@DOMENIC

CHROMIUM EMBEDDED
FRAMEWORK
• Windows, Mac OS X, Linux
• Create objects in C++, expose them through JS
• Integrate NPAPI plugins
• Intercept HTTP requests, including custom schemes
• Completely customizable browser settings, restrictions, and
flags
• … and it’s C++, so do whatever you want!

@DOMENIC

CHROMIUM EMBEDDED
FRAMEWORK
// Create an instance of our CefClient implementation. Various
// methods in the MyClient instance will be called to notify
// about and customize browser behavior.
CefRefPtr<CefClient> client(new MyClient());

// Information about the parent window, client rectangle, etc.
CefWindowInfo info;
info.SetAsChild(...);

// Browser initialization settings.
CefBrowserSettings settings;

// Create the new browser window object.
CefBrowser::CreateBrowser(info, client, "http://www.google.com",
settings);
@DOMENIC

BUT I DON’T LIKE C++…

TO THE RESCUE

@DOMENIC

TWO PROJECTS, BOTH
ALIKE IN DIGNITY
AppJS Node-WebKit

@DOMENIC

APPJS
var appjs = require('appjs');
appjs.serveFilesFrom(__dirname + '/content');
appjs.router.post('/', function (req, res, next) {
res.send('Hello, World!');
});
var window = appjs.createWindow({
url: '/',
width: 640,
height: 480,
fullscreen: false,
showChrome: true, // border and title bar
disableSecurity: true // allow cross-origin requests
});

@DOMENIC

APPJS: CONTROL NODE
FROM YOUR APP
window.on('ready', function () {
window.frame.show();
window.require = require;
window.process = process;
window.module = module;
});

@DOMENIC

APPJS: CONTROL YOUR
APP FROM NODE
window.on('close', ...);
window.on('resize', ...);
window.on('minimize', ...);
window.on('fullscreen', ...);

window.frame.show();
window.frame.hide();
window.frame.fullscreen();
window.frame.openDevTools();

window.dispatchEvent(new window.Event('custom'));

@DOMENIC

APPJS: MENU BARS
var menu = appjs.createMenu([{
label: '&File',
submenu: [
{
label: 'E&xit',
action: function () {
window.close();
}
}
]
}]);

window.frame.setMenuBar(menu);

@DOMENIC

APPJS: MORE COOL
STUFF
• Add tray icons and tray menus
• Add a require that works for modules on both the Node side
and the browser side
• Redirect Node’s stdout/stderr to the Chromium dev console
• Use Express to handle routes, render views, etc.
• Use any third-party Node package to do anything!

@DOMENIC

NODE-WEBKIT
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>We are using node.js
<script>document.write(process.version);</script>
</p>
</body>
</html>

@DOMENIC

NODE-WEBKIT: A
TECHNICAL MARVEL
• Not built on CEF; they did the work themselves
• Merged Node and Chromium’s event loops by implementing
Chromium’s in terms of libuv
• For example: modal dialogs like alert() block Node’s event loop

• Node objects and DOM objects reside in the same V8 heap:
no inter-process communication, serialization, or thread
issues. Direct access!
• Apps can have multiple windows; distinct window
variables, but shared global variable.
• Great plugin integration: just drop NPAPI plugins into a plugins
folder.
• Package apps by concatenating them with the nw executable
(!) @DOMENIC

NODE-WEBKIT:
PACKAGE.JSON
{
"name": "nw-demo",
"main": "index.html",
"node-main": "start.js",
"window": {
"title": "Node-WebKit Demo",
"icon": "demo.ico",
"width": 640,
"height": 480,
"toolbar": false,
"fullscreen": false
}
}

@DOMENIC

NODE-WEBKIT:
PLATFORM
INTEGRATION
window.minimize();
window.enterFullscreen();
window.showDevTools();
window.requestAttention(true);
var gui = require('nw.gui');
var menu = new gui.Menu();
menu.append(new gui.MenuItem({
label: 'Item A',
icon: 'images/a.png',
click: function () { }
}));
window.addEventListener('contextmenu', function (event) {
menu.popup(event.clientX, event.clientY);
});

@DOMENIC

NODE-WEBKIT:
PLATFORM
INTEGRATION
var gui = require('nw.gui');

var clipboard = gui.Clipboard.get();
clipboard.get('text');
clipboard.set('I <3 Node-WebKit', 'text');
clipboard.clear();

<input type="file" />
<input type="file" multiple />
<input type="file" nwdirectory />
<input type="file" nwsaveas />

$('input[type=file]').click();

@DOMENIC

JavaScript on the Desktop

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à JavaScript on the Desktop

Similaire à JavaScript on the Desktop (20)

Plus de Domenic Denicola

Plus de Domenic Denicola (7)

Dernier

Dernier (20)

JavaScript on the Desktop

Notes de l'éditeur