building native desktop applications with node-webkit
DESCRIPTION
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.TRANSCRIPT
![Page 1: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/1.jpg)
OUT OF THE SANDBOXBuilding native Desktop apps
by Marco Pracucci - CTO @spreakerat JsDayon May 14, 2014
mercoledì 14 maggio 14
![Page 2: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/2.jpg)
@pracucci
WHY DESKTOP ?
mercoledì 14 maggio 14
![Page 3: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/3.jpg)
@pracucci
Hackable text editorby GitHub
Atom.io
mercoledì 14 maggio 14
![Page 4: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/4.jpg)
@pracucci
Spreaker Studio
Mix audio sourcesand broadcast liveby Spreaker
mercoledì 14 maggio 14
![Page 5: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/5.jpg)
@pracucci
WHY DESKTOP ?HOW
mercoledì 14 maggio 14
![Page 6: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/6.jpg)
@pracucci
NODE-WEBKIT
app runtime based upon
https://github.com/rogerwang/node-webkit
+
mercoledì 14 maggio 14
![Page 7: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/7.jpg)
@pracucci
NODE-WEBKIT
runs on
developed byRoger Wang at Intel
mercoledì 14 maggio 14
![Page 8: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/8.jpg)
@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
![Page 9: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/9.jpg)
@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
![Page 10: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/10.jpg)
@pracucci
FRONT OR BACK ?Should I use Angular or Express?
mercoledì 14 maggio 14
![Page 11: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/11.jpg)
@pracucci
Think of it as a
frontend appthat can “just” use node modules
“”
mercoledì 14 maggio 14
![Page 12: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/12.jpg)
@pracucci
Single Page Apps
app://whatever/path
DESIGN
Multiple Page Apps
Ease repackage of your websiteto a node-webkit app
{ “main”: “index.html”,}
{ “main”: “app://foo/index.html”,}
mercoledì 14 maggio 14
![Page 13: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/13.jpg)
@pracucci
Generally speaking,
you can easily port your web appto node-webkit
“”
mercoledì 14 maggio 14
![Page 14: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/14.jpg)
@pracucci
few builtin codecs,but you can rebuild libffmpegto add any format / codec
MULTIMEDIA
<audio><video><canvas>getUserMedia()WebRTCWebGL...
mercoledì 14 maggio 14
![Page 15: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/15.jpg)
@pracucci
• returns the real path on filesystem • can open file dialog programmatically
<input type='file' />
FILE DIALOGS
mercoledì 14 maggio 14
![Page 16: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/16.jpg)
@pracucci
Select a directory instead of a file
FILE DIALOGS
<input type='file' nwdirectory />
mercoledì 14 maggio 14
![Page 17: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/17.jpg)
@pracucci
Select a (non) existing file
FILE DIALOGS
<input type='file' nwsaveas />
mercoledì 14 maggio 14
![Page 18: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/18.jpg)
@pracucci
NATIVE UI MODULE
var gui = require('nw.gui');
Built-in module to control the Native UI:
mercoledì 14 maggio 14
![Page 19: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/19.jpg)
@pracucci
My App File Edit 5:45 pm
My App
mercoledì 14 maggio 14
![Page 20: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/20.jpg)
@pracucci
My App File Edit 5:45 pm
My Appgui.Window
mercoledì 14 maggio 14
![Page 21: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/21.jpg)
@pracucci
My App File Edit 5:45 pm
My App
gui.Menu
gui.Window
mercoledì 14 maggio 14
![Page 22: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/22.jpg)
@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
mercoledì 14 maggio 14
![Page 23: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/23.jpg)
@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
gui.Clipboard
mercoledì 14 maggio 14
![Page 24: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/24.jpg)
@pracucci
My App File Edit 5:45 pm
My App
gui.Menu gui.Tray
gui.Window
gui.Clipboard gui.Shell
mercoledì 14 maggio 14
![Page 25: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/25.jpg)
@pracucci
Source code will be exposed.Use nwsnapshot to compileto 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
![Page 26: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/26.jpg)
@pracucci
Hard to contribute
CONTRIBUTING
You both need to knowChromium and Node.JS internals(and have a strong experience with C++)
mercoledì 14 maggio 14
![Page 27: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/27.jpg)
@pracucci
with node-webkit you can easilybuild native desktop apps
(and have a lot of fun !)
SUMMARY
mercoledì 14 maggio 14
![Page 28: Building native desktop applications with node-webkit](https://reader034.vdocuments.mx/reader034/viewer/2022051513/547d6fed5806b5db5e8b4571/html5/thumbnails/28.jpg)
Thank you!
https://joind.in/11272Any feedback is welcome!
mercoledì 14 maggio 14