JavaScript on the Desktop
27
JAVASCRIPT ON THE DESKTOP Building desktop apps in HTML5 and JavaScript @DOMENIC
-
Upload
domenic-denicola -
Category
Technology
-
view
7.627 -
download
3
description
Although Web and mobile apps are getting more capable every day, often your application makes the most sense on the desktop. In this talk, we’ll look at some recent technologies that have allowed significant desktop apps — like Barnes & Noble’s NOOK Study e-textbook reader, or Adobe’s Brackets IDE — to be written in HTML5 and JavaScript. Projects like the Chromium Embedded Framework, node-webkit, and AppJS provide an excellent native-to-JS bridge. With them in hand, you can bring the full power of the Node.js and front-end ecosystems to bear, while still gaining the advantages of running as a native app.
Transcript of 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
