building native desktop applications with node-webkit

OUT OF THE SANDBOXBuilding native Desktop apps

by Marco Pracucci - CTO @spreakerat JsDayon May 14, 2014

mercoledì 14 maggio 14

@pracucci

WHY DESKTOP ?


@pracucci

Hackable text editorby GitHub

Atom.io


@pracucci

Spreaker Studio

Mix audio sourcesand broadcast liveby Spreaker


@pracucci

WHY DESKTOP ?HOW


@pracucci

NODE-WEBKIT

app runtime based upon

https://github.com/rogerwang/node-webkit

+




@pracucci

NODE-WEBKIT

runs on

developed byRoger 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 appthat can “just” use node modules

“”


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


@pracucci

Generally speaking,

you can easily port your web appto node-webkit

“”


@pracucci

few builtin codecs,but you can rebuild libffmpegto add any format / codec

MULTIMEDIA

<audio><video><canvas>getUserMedia()WebRTCWebGL...


@pracucci

• returns the real path on filesystem • can open file dialog programmatically

<input type='file' />

FILE DIALOGS


@pracucci

Select a directory instead of a file

FILE DIALOGS

<input type='file' nwdirectory />


@pracucci

Select a (non) existing file

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 Appgui.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 compileto 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 knowChromium and Node.JS internals(and have a strong experience with C++)


@pracucci

with node-webkit you can easilybuild native desktop apps

(and have a lot of fun !)

SUMMARY


Thank you!

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


building native desktop applications with node-webkit

Software