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

 

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?

Desktop Apps Using Javascript

By akhil stanislavose

Made with Slides.com

Desktop Apps Using Javascript

  • 1,846

More from akhil stanislavose