• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript on the Desktop
 

JavaScript on the Desktop

on

  • 7,448 views

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 ...

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.

Statistics

Views

Total Views
7,448
Views on SlideShare
7,102
Embed Views
346

Actions

Likes
7
Downloads
69
Comments
3

7 Embeds 346

http://lanyrd.com 166
https://twitter.com 128
http://www.scoop.it 47
http://www.linkedin.com 2
http://twitter.com 1
http://www.mefeedia.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 JavaScript on the Desktop Presentation Transcript

  • JAVASCRIPT ON Building desktop apps in THE DESKTOP HTML5 and JavaScript @DOMENIC
  • 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
  • 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 CONTENTAPI @DOMENIC
  • CHROMIUM EMBEDDEDFRAMEWORKhttp://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
  • TWO PROJECTS, BOTHALIKE IN DIGNITYAppJS Node-WebKit @DOMENIC
  • 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
  • APPJS: CONTROL NODE FROM YOUR APPwindow.on(ready, function () { window.frame.show(); window.require = require; window.process = process; window.module = module;}); @DOMENIC
  • 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
  • APPJS: MENU BARSvar 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 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
  • 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
  • DEMO TIME @DOMENIC