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

1,969

Published on

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.

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,969
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
33
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×