Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
OUT OF THE SANDBOX
Building native Desktop apps
by Marco Pracucci - CTO @spreaker
at JsDay
on May 14, 2014
mercoledì 14 ma...
@pracucci
WHY DESKTOP ?
mercoledì 14 maggio 14
@pracucci
Hackable text editor
by GitHub
Atom.io
mercoledì 14 maggio 14
@pracucci
Spreaker Studio
Mix audio sources
and broadcast live
by Spreaker
mercoledì 14 maggio 14
@pracucci
WHY DESKTOP ?
HOW
mercoledì 14 maggio 14
@pracucci
NODE-WEBKIT
app runtime based upon
https://github.com/rogerwang/node-webkit
+
mercoledì 14 maggio 14
@pracucci
NODE-WEBKIT
runs on
developed by
Roger Wang at Intel
mercoledì 14 maggio 14
@pracucci
package.json
{
“name”: “Demo”,
“main”: “index.html”,
“window”: {
“width”: 600,
“height”: 400
}
}
index.html
<htm...
@pracucci
<script>
var fs = require(“fs”);
var _ = require(“underscore”);
var _ = require(“lame”);
</script>
Node modules ...
@pracucci
FRONT OR BACK ?
Should I use Angular or Express?
mercoledì 14 maggio 14
@pracucci
Think of it as a
frontend app
that can “just” use node modules
“
”
mercoledì 14 maggio 14
@pracucci
Single Page Apps
app://whatever/path
DESIGN
Multiple Page Apps
Ease repackage of your website
to a node-webkit a...
@pracucci
Generally speaking,
you can easily port your web app
to node-webkit
“
”
mercoledì 14 maggio 14
@pracucci
few builtin codecs,
but you can rebuild libffmpeg
to add any format / codec
MULTIMEDIA
<audio>
<video>
<canvas>
...
@pracucci
• returns the real path on filesystem
• can open file dialog programmatically
<input type='file' />
FILE DIALOGS
m...
@pracucci
Select a directory instead of a file
FILE DIALOGS
<input type='file' nwdirectory />
mercoledì 14 maggio 14
@pracucci
Select a (non) existing file
FILE DIALOGS
<input type='file' nwsaveas />
mercoledì 14 maggio 14
@pracucci
NATIVE UI MODULE
var gui = require('nw.gui');
Built-in module to control the Native UI:
mercoledì 14 maggio 14
@pracucci
My App File Edit 5:45 pm
My App
mercoledì 14 maggio 14
@pracucci
My App File Edit 5:45 pm
My App
gui.Window
mercoledì 14 maggio 14
@pracucci
My App File Edit 5:45 pm
My App
gui.Menu
gui.Window
mercoledì 14 maggio 14
@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
mercoledì 14 maggio 14
@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
gui.Clipboard
mercoledì 14 maggio 14
@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
gui.Clipboard gui.Shell
mercoledì 14 maggio 14
@pracucci
Source code will be
exposed.
Use nwsnapshot to compile
to native code.
(experimental)
zip -r app.nw *
1. Make a ...
@pracucci
Hard to contribute
CONTRIBUTING
You both need to know
Chromium and Node.JS internals
(and have a strong experien...
@pracucci
with node-webkit you can easily
build native desktop apps
(and have a lot of fun !)
SUMMARY
mercoledì 14 maggio ...
Thank you!
https://joind.in/11272
Any feedback is welcome!
mercoledì 14 maggio 14
Upcoming SlideShare
Loading in …5
×

Building native desktop applications with node-webkit

We build web apps that runs on browser and server-side apps on Node.JS, but what’s about native Desktop applications? In this talk I will introduce node-webkit: an app runtime based on Chromium + Node.JS, you can use to build Desktop apps with JS and HTML, with no browser’s limitations like file-system calls or running native code.

  • Be the first to comment

Building native desktop applications with node-webkit

  1. 1. OUT OF THE SANDBOX Building native Desktop apps by Marco Pracucci - CTO @spreaker at JsDay on May 14, 2014 mercoledì 14 maggio 14
  2. 2. @pracucci WHY DESKTOP ? mercoledì 14 maggio 14
  3. 3. @pracucci Hackable text editor by GitHub Atom.io mercoledì 14 maggio 14
  4. 4. @pracucci Spreaker Studio Mix audio sources and broadcast live by Spreaker mercoledì 14 maggio 14
  5. 5. @pracucci WHY DESKTOP ? HOW mercoledì 14 maggio 14
  6. 6. @pracucci NODE-WEBKIT app runtime based upon https://github.com/rogerwang/node-webkit + mercoledì 14 maggio 14
  7. 7. @pracucci NODE-WEBKIT runs on developed by Roger Wang at Intel mercoledì 14 maggio 14
  8. 8. @pracucci package.json { “name”: “Demo”, “main”: “index.html”, “window”: { “width”: 600, “height”: 400 } } index.html <html> <body> <h1>My App</h1> </body> </html> GETTING STARTED mercoledì 14 maggio 14
  9. 9. @pracucci <script> var fs = require(“fs”); var _ = require(“underscore”); var _ = require(“lame”); </script> Node modules (built-in) 3rd party modules in JavaScript 3rd party modules in C/C++ GETTING STARTED npm install ... mercoledì 14 maggio 14
  10. 10. @pracucci FRONT OR BACK ? Should I use Angular or Express? mercoledì 14 maggio 14
  11. 11. @pracucci Think of it as a frontend app that can “just” use node modules “ ” mercoledì 14 maggio 14
  12. 12. @pracucci Single Page Apps app://whatever/path DESIGN Multiple Page Apps Ease repackage of your website to a node-webkit app { “main”: “index.html”, } { “main”: “app://foo/index.html”, } mercoledì 14 maggio 14
  13. 13. @pracucci Generally speaking, you can easily port your web app to node-webkit “ ” mercoledì 14 maggio 14
  14. 14. @pracucci few builtin codecs, but you can rebuild libffmpeg to add any format / codec MULTIMEDIA <audio> <video> <canvas> getUserMedia() WebRTC WebGL ... mercoledì 14 maggio 14
  15. 15. @pracucci • returns the real path on filesystem • can open file dialog programmatically <input type='file' /> FILE DIALOGS mercoledì 14 maggio 14
  16. 16. @pracucci Select a directory instead of a file FILE DIALOGS <input type='file' nwdirectory /> mercoledì 14 maggio 14
  17. 17. @pracucci Select a (non) existing file FILE DIALOGS <input type='file' nwsaveas /> mercoledì 14 maggio 14
  18. 18. @pracucci NATIVE UI MODULE var gui = require('nw.gui'); Built-in module to control the Native UI: mercoledì 14 maggio 14
  19. 19. @pracucci My App File Edit 5:45 pm My App mercoledì 14 maggio 14
  20. 20. @pracucci My App File Edit 5:45 pm My App gui.Window mercoledì 14 maggio 14
  21. 21. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Window mercoledì 14 maggio 14
  22. 22. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window mercoledì 14 maggio 14
  23. 23. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window gui.Clipboard mercoledì 14 maggio 14
  24. 24. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window gui.Clipboard gui.Shell mercoledì 14 maggio 14
  25. 25. @pracucci Source code will be exposed. Use nwsnapshot to compile to native code. (experimental) zip -r app.nw * 1. Make a package nw app.nw 2. Ship node-webit + app package PACKAGING mercoledì 14 maggio 14
  26. 26. @pracucci Hard to contribute CONTRIBUTING You both need to know Chromium and Node.JS internals (and have a strong experience with C++) mercoledì 14 maggio 14
  27. 27. @pracucci with node-webkit you can easily build native desktop apps (and have a lot of fun !) SUMMARY mercoledì 14 maggio 14
  28. 28. Thank you! https://joind.in/11272 Any feedback is welcome! mercoledì 14 maggio 14

×