native desktop app with node.js webkit (html, css & javascript)

24
Native Desktop App with Node-Webkit (Javascript, HTML, CSS) Eddie Lau @tatonlto github.com/3dd13

Upload: eddie-lau

Post on 08-Sep-2014

9.822 views

Category:

Technology


2 download

DESCRIPTION

2014 01 Codeaholics Meetup sharing

TRANSCRIPT

Page 1: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Native Desktop App with Node-Webkit

!

(Javascript, HTML, CSS)

Eddie Lau @tatonlto

github.com/3dd13

Page 2: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

I love Web App

Page 3: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Centralized Easy to deploy Cross-platform

Single-code-base(if there is no IE)

Page 4: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

But

Page 5: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Sometimes

Desktop App!is better than Web App

Page 6: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

One click installer No server

No internet Native functionality

(actually … HTML5 & Chrome App can do most too !)

Page 7: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

But, but

Page 8: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

single-code-base cross-platform

Desktop App development is …

Page 9: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

DAMN HARD

Page 10: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Raise hand if you have written any

Java Swing

Page 11: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

so … few months ago

I saw Node-Webkit

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

Page 12: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

^___^

Page 13: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Node-Webkit build

a .exe / .app which contains

Node.js & Webkit

Page 14: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

what does that mean ?

Page 15: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Node.js!allows you to write Desktop program!

using JS

Page 16: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Webkit!allows you to write Desktop App UI!

using!HTML, CSS & JS

Page 17: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

the packaging was clumsy though

!https://github.com/rogerwang/node-webkit/wiki/How-to-

package-and-distribute-your-apps

(height of packaging documentation === 5 * window.height)

Page 18: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Have to zip everytime to test updated .app

Page 19: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

T__T

Page 20: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

yesterday I saw

Grunt-Node-Webkit-Builderhttps://github.com/mllrsohn/grunt-node-webkit-builder

Page 21: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

grunt

Page 22: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

\ ( ^ ^ ) /

Page 23: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Demohttps://github.com/3dd13/sample-nw

Page 24: Native Desktop App with Node.js Webkit (HTML, CSS & Javascript)

Questions ?Eddie Lau @tatonlto

github.com/3dd13