DESKTOP APPS WITH NODE WEBKIT

What is Node Webkit?

Node Webkit is an app runtime that lets you make desktop apps with HTML, CSS, and JavaScript.

and it also lets you use Node.js modules within the

app as well.

But not only that, you can build native executables of your app

for Windows, Mac and Linux

Here are some examples using Node Webkit

Light Tablelighttable.com

Game Dev Tycoongreenheartgames.com/app/game-dev-tycoon

Sqwigglesqwiggle.com

How does it work?

Node Webkit combines

Chromium Browser

Node.js Framework

Integrating them requires the following:

• Using the same V8 engine instance

• Main loop integration

• Context Bridging

Use the same V8 engine instance

• Both Chromium and Node use the V8 engine instance (Node use’s Chromium’s instance)

• The objects of Node and Chromium are in separate contexts, in order to keep the namespace clean.

Main loop integration• The author says that it would take “some efforts” to

merge both Node and Chromium’s main loops.

• Node uses libuv for the events loop, but Chromium uses MessageLoop and MessagePump for its events loop.

• The author integrates these at the browser render process level, by making Chromium use a custom version of the MessagePump class, built on top of libuv

Context Bridging• It’s a tricky but important part of integrating Node

into Chromium

• The first step is to initialise Node’s context first

• Next, once Webkit’s DOM context is installed, Node’s context is moved into Webkit’s context

• After that, Node’s start function is split into parts so that it can run within the context of Webkit’s render process

For more information

• See this link:

• https://github.com/rogerwang/node-webkit/wiki/How-node.js-is-integrated-with-chromium

Building a simple Node Webkit app

Download Node Webkitgithub.com/rogerwang/node-webkit

Create an app folder and some files

Write a basic HTML page

and the package.json file

Execute the app

and voila!

Nice and easy, but pretty basic to be honest!

Let’s try displaying the contents of my Home Folder

with Node.js

You can use not only Node’s core modules, but also npm

installed modules too!

And we could iterate on this example further…

• We could turn the list items into links for exploring folders

• We could use front-end libraries like jQuery-ui or Bootstrap to improve the UI and make it display better

• We could make the file names (and possibly even contents) searchable using Lunr.js or an embedded database.

• We could stream those files to a server for file synchronisation (build your own Dropbox!)

Window Rendering

Window Rendering

• Node Webkit allows you to control how you want the Window rendering to work

• You can specify set dimensions, whether full-screen is allowed, and even if there’s a window frame at all!

Dimensions

Toolbar

FullScreen

Frameless

Kiosk Mode

Kiosk Mode• Useful for creating fullscreen applications that run in

public places (Banks, Retail, Venues)

• Access to the operating system is disabled on Mac, but you can gain access on Windows via Ctrl-Alt-Del keys (otherwise it’s blocked by AV Software as it looks like a virus to them)

• Its dangerous - if you don’t implement the javascript call to leave kiosk mode anywhere in your app, you’ll have to reboot your computer to regain access

Window rendering can also be controlled programmatically

within the app

Menus

You can add native menu items to your app, both in the main

menu, and in the app area

Add the items via JSSource: code.tutsplus.com/tutorials/introduction-to-html5-

desktop-apps-with-node-webkit--net-36296

And the menu appearsSource: code.tutsplus.com/tutorials/introduction-to-html5-

desktop-apps-with-node-webkit--net-36296

Tray Apps

github.com/rogerwang/node-webkit/wiki/Tray

Gulpgithub.com/sindresorhus/gulp-app

Shell

github.com/rogerwang/node-webkit/wiki/Shell

Clipboard

github.com/rogerwang/node-webkit/wiki/Clipboard

Desktop integration is pretty good

And because it’s using Chromium, HTML5 APIs

are available

HTML5 APIs• Canvas (drawing, games)

• WebGL (3D, games)

• WebRTC (video/audio chat, P2P)

• CSS3 (games, animations)

• LocalStorage (offline editing)

• Audio/Video (video players, music streaming)

So many possibilities!

Soundnode (SoundCloud desktop app)

soundnodeapp.com

Vocabulary Buildervocabularybuilder.co

Fleex Playerfleex.tv

But do remember, you’re working with static HTML

files

You ‘could’ run a web server in your app, but…

Packaging your app

You can write the app once, and build it for Windows,

Mac and Linux

Nuwk!codeb.it/nuwk

grunt-node-webkit-buildernpmjs.org/package/grunt-node-webkit-builder

Customer Case Study: The British Medical Journal

Every year, we run the web site for a health conference

run by the BMJ and IHI

As part of our service, we also produce a desktop app that lets people view recorded sessions, posters, and file attachments.

Our desktop app was originally built on the

Adobe Air platform

It had some disadvantages

Disadvantages

• To use it, the person would have to have Flash installed on their computer

• Once they had installed the app onto the computer, they would then be prompted to locate the application’s content on the USB stick.

• Adobe Air is a declining platform (Linux no longer supported, Flash is dying)

Last year, we decided to consider using Node Webkit to replace the Adobe Air app

A couple of weeks after the event, we shipped the desktop

app, using Node Webkit

The app’s tech stack• Node Webkit, with ffmpeg dependency added in for video

• Bootstrap 3 for the UI

• jQuery and Backbone for the front-end app

• Lunr.js for the search functionality

• Stylus, and Jade for creating the HTML and CSS files

• Hogan.js for templating

• Gulp for the building of the app’s files

Benefits

• Users no longer had to install Flash or select the USB from a Folder Dialog. A simpler, better user experience.

• We were able to reuse some of the code from the web application in the desktop application.

• It allowed us to standardise around a Node tech stack within the company more.

Key lessons

HTML5 Video Fullscreen does not work!

We managed to get around this with a workaround

involving 3 steps:

1 - Listen to the click event on the fullscreen button in

the video player

2 - Add a CSS class to the video tag, which has properties that make the element take the full dimensions of

the window

3 - Trigger the win.enterFullScreen() function call as well.

Make use of Node Webkit’s dev tools

The dev tools will help to spot slow points in front-end rendering and performance

Node Webkit is not bug-free

But it is an impressive piece of work

It’s so good, that Intel replaced their use of Java and Chrome in their IDE with Node Webkit

Intel XDKxdk.intel.com

And Roger now works for Intel in China

Oh, and Roger is speaking at LXJS

There is still so much I still haven’t covered about Node Webkit.

!

I recommend reading more about it at the Github repo and online

I hope you get a chance to play with it and create something amazing!

@paulbjensen

Thank you