Building native desktop applications with node-webkit

OUT OF THE SANDBOX
Building native Desktop apps
by Marco Pracucci - CTO @spreaker
at JsDay
on May 14, 2014
mercoledì 14 maggio 14

@pracucci
WHY DESKTOP ?

@pracucci
Hackable text editor
by GitHub
Atom.io

@pracucci
Spreaker Studio
Mix audio sources
and broadcast live
by Spreaker

@pracucci
WHY DESKTOP ?
HOW

@pracucci
NODE-WEBKIT
app runtime based upon
https://github.com/rogerwang/node-webkit
+

@pracucci
NODE-WEBKIT
runs on
developed by
Roger Wang at Intel

@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

@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 ...

@pracucci
FRONT OR BACK ?
Should I use Angular or Express?

@pracucci
Think of it as a
frontend app
that can “just” use node modules
“
”

@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”,
}

@pracucci
Generally speaking,
you can easily port your web app
to node-webkit
“
”

@pracucci
few builtin codecs,
but you can rebuild libffmpeg
to add any format / codec
MULTIMEDIA
<audio>
<video>
<canvas>
getUserMedia()
WebRTC
WebGL
...

@pracucci
• returns the real path on ﬁlesystem
• can open ﬁle dialog programmatically
<input type='file' />
FILE DIALOGS

@pracucci
Select a directory instead of a ﬁle
FILE DIALOGS
<input type='file' nwdirectory />

@pracucci
Select a (non) existing ﬁle
FILE DIALOGS
<input type='file' nwsaveas />

@pracucci
NATIVE UI MODULE
var gui = require('nw.gui');
Built-in module to control the Native UI:

@pracucci
My App File Edit 5:45 pm
My App

@pracucci
My App
gui.Window

@pracucci
My App
gui.Menu
gui.Window

@pracucci
My App
gui.Menu gui.Tray
gui.Window

@pracucci
My App
gui.Menu gui.Tray
gui.Window
gui.Clipboard

@pracucci
My App
gui.Menu gui.Tray
gui.Window
gui.Clipboard gui.Shell

@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

@pracucci
Hard to contribute
CONTRIBUTING
You both need to know
Chromium and Node.JS internals
(and have a strong experience with C++)

@pracucci
with node-webkit you can easily
build native desktop apps
(and have a lot of fun !)
SUMMARY

Thank you!
https://joind.in/11272
Any feedback is welcome!

Building native desktop applications with node-webkit

More Related Content

What's hot

Similar to Building native desktop applications with node-webkit

Recently uploaded

Building native desktop applications with node-webkit