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

Beyond the web

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

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

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

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

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

IO.js Blink V8

Chromium Skia Blink V8

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

How to start?

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

2.1 in index.html ﬁle <!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

2.2 On package.json ﬁle { "name": "nw-demo", "main": "index.html" }
* Sample made on Mac OS please check http://git.io/9rygGw for more platforms

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

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

{ "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 ﬁle https://github.com/nwjs/nw.js/wiki/Manifest-format

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

Use Case…

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

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

Notes…

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)

HTML5 CSS3 JS in the native…

Spotify (Desktop App) Playstation (console) Netﬂix (for TV's) Atom IDE
Wunderlist (Windows App) Brackets IDE Chrome Browser Intel XDK

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

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…

Thanks!

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

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

Michael Lancaster

More Decks by Michael Lancaster

Other Decks in Technology

Featured

Transcript

Beyond the web

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

Languages Obj C, C C++, Swift C#, VB.net, Silverlight C,

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

Languages HTML5, CSS3, Javascript HTML5, CSS3, Javascript HTML5, CSS3, Javascript

How?

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

IO.js Blink V8

Chromium Skia Blink V8

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

How to start?

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

2.1 in index.html ﬁle <!DOCTYPE html> <html> <head> <title>Hi ChicagoWebConf!</title>

2.2 On package.json ﬁle { "name": "nw-demo", "main": "index.html" }

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

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

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

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

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

Use Case…

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

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

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

Notes…

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

HTML5 CSS3 JS in the native…

Spotify (Desktop App) Playstation (console) Netﬂix (for TV's) Atom IDE

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

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

Thanks!