Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript on the Desktop

13,053 views

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

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

×