DESKTOP APPS USING JAVASCRIPT

Kerala JS User Group Meetup

June 28, 2014

Hello, I am Akhil Stanislavose

✪ Works @ MobME Wireless

✪ Rubyist / JavaScript Maniac / Objective-C Noob

✪ Computer Science Enthusiast

akhil.stanislavose@gmail.com

github.io/akhilstanislavose

DESKTOP vs. WEB

Decentralized ✪ Centralized

Difficult to update ✪ Easy to update

Less Exposure, More Secure ✪ More Exposure, Less Secure

Standalone ✪ Needs Internet (or does it?)

Can be made Portable ✪ Inherently Portable

WHY JS?

✪ Familiar stack ie., HTML5, CSS3 and JS

✪ Plethora of frameworks and UI libraries

✪ Evented and hence natural for GUI

✪ Awesome Community

✪ Fun to Code ☺

HOW?

Formerly

Build apps using bindings for native GUI libs like
QT (node-qt) or GTK (node-gui)

Lately

HTML and JS based apps running inside an web view embedded in a native shell

NODE-WEBKIT

WHAT IS NODE-WEBKIT?

A library that combines WebKit engine and Node.js in a unique way.

Both WebKit and Node share the same context, allowing you to write your code like it's meant to be executed in a browser, but with the addition of all Node's features.

MEANING?

It's created and developed in the Intel Open Source Technology Center.

BENFITS?

✪ Apps written in modern HTML5, CSS3, JS and WebGL.

✪ Complete support for all frontent JS frameworks and libraries.

✪ Complete support for Node APIs and all its third party modules.

✪ Easy to package and distribute apps.

✪ Available on Linux, Mac OSX and Windows

Getting started

Download binaries for your platform from https://github.com/rogerwang/node-webkit

OR

 $ npm install -g nodewebkit

HELLO WEBKIT, I AM NODe!

 # Step 1, create index.html
 $ vim index.html

 # Step 2, create manifest file
 $ vim package.json

 # Step 3, package the app
 $ zip myapp.nw index.html package.json

 # Step 4, test it!
 $ nodewebkit myapp.nw

PACKAGE.JSON

 {
  "main": "index.html",
  "name": "nw-demo",
  "description": "demo app of node-webkit",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "window": {
    "title": "node-webkit demo",
    "icon": "link.png",
    "toolbar": true,
    "frame": false,
    "width": 800,
    "height": 500,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "webkit": {
    "plugin": true
  }
}

NATIVE GUI

✪ Toolbar and Menus

✪ Kiosk Mode

✪ Frameless Windows

✪ File Dialogs

✪ Tray Items

✪ Clipboard

NODE WEBKIT GENERATOR

 $ npm install –g yeoman
 $ npm install –g generator-node-webkit
 $ npm install –g nodewebkit
 $ npm install –g grunt-cli

 $ yo node-webkit

DISTRIBUTION


 # Generate OSX app $ grunt dist-mac
 # Generate linux binary
 $ grunt dist-linux
 # Generate windows exe
 $ grunt dist-win

DEMO

FIN

Questions?