Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desktop Apps with NW.js and Angular.js (updated)

Desktop Apps with NW.js and Angular.js (updated)

Building desktop applications with NW.js and angular.js

4804f554e4517c893086e6abb1ef6559?s=128

Michael Lancaster

July 26, 2014
Tweet

Transcript

  1. Beyond the web

  2. Michael Lancaster UI Engineer @weblancaster @weblancaster www.bymichaellancaster.com

  3. None
  4. None
  5. Languages Obj C, C C++, Swift C#, VB.net, Silverlight C,

    C++, Java Tools Xcode Visual Studio Eclipse Market Place Apple Itunes Windows Marketplace Linux Apps OS's
  6. The promise… “write once run anywhere” *aka Java

  7. Languages HTML5, CSS3, Javascript HTML5, CSS3, Javascript HTML5, CSS3, Javascript

    Tools WebStorm, Sublime Text, Atom WebStorm, Sublime Text, Atom WebStorm, Sublime Text, Atom Market Place Apple Itunes Windows Marketplace Linux Apps OS's
  8. None
  9. How?

  10. https://github.com/nwjs/nw.js

  11. IO.js Blink V8

  12. None
  13. Chromium Skia Blink V8

  14. HTML5 CSS3 Javascript IO.js (File System, Streams, Modules, etc) Performance

    Easy to Package/Distribute (if it’s a simple App) Win/Mac/Linux WebGL GUI
  15. How to start?

  16. 1. Download NW.js prebuilt for your platform 2. Create your

    web app * Sample made on Mac OS please check http://git.io/9rygGw for more platforms
  17. 2.1 in index.html file <!DOCTYPE html> <html> <head> <title>Hi ChicagoWebConf!</title>

    </head> <body> <h1>Hi ChicagoWebConf!</h1> </body> </html> * Sample made on Mac OS please check http://git.io/9rygGw for more platforms
  18. 2.2 On package.json file { "name": "nw-demo", "main": "index.html" }

    * Sample made on Mac OS please check http://git.io/9rygGw for more platforms
  19. 1. Download NW.js prebuilt for your platform 2. Create your

    Web App 3. Build your app (run the command on terminal) zip path/to/your/nw.app index.html package.json * Sample made on Mac OS please check http://git.io/9rygGw for more platforms 4. App built
  20. * Sample made on Mac OS please check http://git.io/9rygGw for

    more platforms
  21. None
  22. * Sample made on Mac OS please check http://git.io/9rygGw for

    more platforms
  23. { "name": "nw-demo", "main": "index.html", "window": { "title": "NW ChicagoWebConf",

    "toolbar": false, "frame": false, "width": 600, "height": 600, "min_width": 600, "min_height": 600, "resizable": true, "single-instance": true } } 2.2.1 Making the GUI look more as a native App on package.json file https://github.com/nwjs/nw.js/wiki/Manifest-format
  24. * Sample made on Mac OS please check http://git.io/9rygGw for

    more platforms
  25. Use Case…

  26. * http://blog.soundcloud.com/2011/01/06/desktop/

  27. * https://github.com/Soundnode/soundnode-app

  28. * https://github.com/Soundnode/soundnode-app

  29. Notes…

  30. Security (frames and Iframes) Video/Audio (Doesn't ship with the necessary

    codecs for patented media formats) Debug (NW DevTools - Sublime Text/WebStorm - Crash dump) Package/Distribute (Preferably Grunt-node-webkit-builder) (You might need to do a custom package/zip to build properly) Win/Mac/Linux (You might have cross-platform issues) Best practices (Use software development best practices)
  31. HTML5 CSS3 JS in the native…

  32. Spotify (Desktop App) Playstation (console) Netflix (for TV's) Atom IDE

    Wunderlist (Windows App) Brackets IDE Chrome Browser Intel XDK
  33. None
  34. More beyond the web… * Javascript/HTML5/CSS3 technologies

  35. PhoneGap (Mobile Apps) AppJS (Desktop Apps) MacGap (Mac OSX Apps)

    Tessel (Microcontroller hardware device) Leap Motion (Hardware sensor device) Appcelerator (Mobile Apps) Atom Shell (Desktop Apps) TideSDK (Desktop Apps) and much more…
  36. Thanks!