Successfully reported this slideshow.

JavaScript on the Desktop

10

Share

JAVASCRIPT ON   Building desktop apps in

 THE DESKTOP    HTML5 and JavaScript



                      @DOMENIC
DOMENIC
DENICOLA

• https://github.com/domenic
• https://npmjs.org/~domenic
• http://slideshare.net/domenicdenicola


Thin...
WHY DESKTOP APPS?
Two reasons:




                     @DOMENIC

YouTube videos are no longer supported on SlideShare

View original on YouTube

Upcoming SlideShare
The jsdom
The jsdom
Loading in …3
×
1 of 28
1 of 28

JavaScript on the Desktop

10

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

JavaScript on the Desktop

  1. JAVASCRIPT ON Building desktop apps in THE DESKTOP HTML5 and JavaScript @DOMENIC
  2. DOMENIC DENICOLA • 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
  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 CONTENT API @DOMENIC
  12. CHROMIUM EMBEDDED FRAMEWORK http://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, BOTH ALIKE IN DIGNITY AppJS Node-WebKit @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
  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 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
  26. 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
  27. DEMO TIME @DOMENIC

Editor's Notes

  • Hook: I started with C++, wrote desktop apps, moved to JS, etc.
  • I work at Barnes &amp; 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
  • ×