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.
13. 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
14. 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
17. 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
18. APPJS: CONTROL NODE
FROM YOUR APP
window.on('ready', function () {
window.frame.show();
window.require = require;
window.process = process;
window.module = module;
});
@DOMENIC
19. 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
20. APPJS: MENU BARS
var menu = appjs.createMenu([{
label: '&File',
submenu: [
{
label: 'E&xit',
action: function () {
window.close();
}
}
]
}]);
window.frame.setMenuBar(menu);
@DOMENIC
21. 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
22. 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
23. 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
Hook: I started with C++, wrote desktop apps, moved to JS, etc.
I work at Barnes & Noble.com in the Digital Education division.We produce NOOK Study, an e-textbook reader designed to help students read and annotate their books, as a desktop app for Mac and PC
Everyone still uses computers!
Also: file system access, integration with native code, etc.
Control over your environment
The old problems with desktop apps are disappearing
Chrome Content API: “content” not “Chrome” - Contains only the core code needed to render a page: HTML5, GPU accelerated compositing, etc. - Underlies Chrome’s multiprocess architecture: “chrome” talks to “content” over inter-process communication
You can do this yourself: it’s not fun and it’s not pretty, but you can. Both NOOK Study up through the current version and the original Brackets have done so.But that’s a lot of work, you say. Can’t somebody do that for me??
Hmm. A familiar problem. Wanting to use JavaScript to do something complicated that usually requires a lot of C++. Wanting to do it cross platform. Integrating with the V8 JavaScript engine…