JavaScript on the Desktop

8,752
-1

Published on

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.

Published in: Technology
3 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,752
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
96
Comments
3
Likes
9
Embeds 0
No embeds

No notes for slide
  • 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…
  • It gives you the raw tools to do things manually
  • JavaScript on the Desktop

    1. JAVASCRIPT ON Building desktop apps in THE DESKTOP HTML5 and JavaScript @DOMENIC
    2. DOMENICDENICOLA• https://github.com/domenic• https://npmjs.org/~domenic• http://slideshare.net/domenicdenicolaThings I’ve done recently:• http://es6isnigh.com• Promises/A+• Real-World Windows 8 Apps in JS @DOMENIC
    3. WHY DESKTOP APPS?Two reasons: @DOMENIC
    4. WHY DESKTOP APPS? @DOMENIC
    5. WHY DESKTOP APPS? @DOMENIC
    6. WHY DESKTOP APPS? @DOMENIC
    7. WHY DESKTOP APPS? @DOMENIC
    8. IN THE WILD @DOMENIC
    9. IN THE WILD @DOMENIC
    10. HOW?http://www.chromium.org/developers/content-module @DOMENIC
    11. THE CHROME CONTENTAPI @DOMENIC
    12. CHROMIUM EMBEDDEDFRAMEWORKhttp://code.google.com/p/chromiumembedded/ @DOMENIC
    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
    15. BUT I DON’T LIKE C++… TO THE RESCUE @DOMENIC
    16. TWO PROJECTS, BOTHALIKE IN DIGNITYAppJS Node-WebKit @DOMENIC
    17. APPJSvar 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 APPwindow.on(ready, function () { window.frame.show(); window.require = require; window.process = process; window.module = module;}); @DOMENIC
    19. APPJS: CONTROL YOUR APP FROM NODEwindow.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 BARSvar 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
    24. 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
    25. NODE-WEBKIT: PLATFORM INTEGRATIONwindow.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
    26. NODE-WEBKIT: PLATFORM INTEGRATIONvar 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
    27. DEMO TIME @DOMENIC

    ×