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

Building desktop applications with NW.js and angular.js

Transcript

1. Beyond the web
   

   View Slide

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

   View Slide

3. View Slide

4. View Slide

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
   

   View Slide

6. The promise…
   “write once run anywhere”
   *aka Java
   

   View Slide

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
   

   View Slide

8. View Slide

9. How?
   

   View Slide

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

    View Slide

11. IO.js Blink
    V8
    

    View Slide

12. View Slide

13. Chromium
    Skia Blink V8
    

    View Slide

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
    

    View Slide

15. How to start?
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

21. View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

25. Use Case…
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. Notes…
    

    View Slide

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)
    

    View Slide

31. HTML5 CSS3 JS
    in the native…
    

    View Slide

32. Spotify
    (Desktop App)
    Playstation
    (console)
    Netflix
    (for TV's)
    Atom IDE
    Wunderlist
    (Windows App)
    Brackets IDE Chrome Browser
    Intel XDK
    

    View Slide

33. View Slide

34. More beyond the web…
    * Javascript/HTML5/CSS3 technologies
    

    View Slide

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…
    

    View Slide

36. Thanks!
    

    View Slide