Download - JavaScript on the Desktop
@DOMENIC
JAVASCRIPT ON THE DESKTOP
Building desktop apps in HTML5 and JavaScript
@DOMENIC
• 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 DENICOLA
@DOMENIC
WHY DESKTOP APPS?
Two reasons:
@DOMENIC
WHY DESKTOP APPS?
@DOMENIC
WHY DESKTOP APPS?
@DOMENIC
WHY DESKTOP APPS?
@DOMENIC
WHY DESKTOP APPS?
@DOMENIC
IN THE WILD
@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
AppJS Node-WebKit
TWO PROJECTS, BOTH ALIKE IN DIGNITY
@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
DEMO TIME
