Desktop Apps with Node Webkit

Slide 1

Slide 1 text

DESKTOP APPS WITH NODE WEBKIT

Slide 2

Slide 2 text

What is Node Webkit?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

But not only that, you can build native executables of your app for Windows, Mac and Linux

Slide 6

Slide 6 text

Here are some examples using Node Webkit

Slide 7

Slide 7 text

Light Table lighttable.com

Slide 8

Slide 8 text

Game Dev Tycoon greenheartgames.com/app/game-dev-tycoon

Slide 9

Slide 9 text

Sqwiggle sqwiggle.com

Slide 10

Slide 10 text

How does it work?

Slide 11

Slide 11 text

Node Webkit combines Chromium Browser Node.js Framework

Slide 12

Slide 12 text

Integrating them requires the following: • Using the same V8 engine instance • Main loop integration • Context Bridging

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

For more information • See this link: • https://github.com/rogerwang/node-webkit/wiki/ How-node.js-is-integrated-with-chromium

Slide 17

Slide 17 text

Building a simple Node Webkit app

Slide 18

Slide 18 text

Download Node Webkit github.com/rogerwang/node-webkit

Slide 19

Slide 19 text

Create an app folder and some files

Slide 20

Slide 20 text

Write a basic HTML page

Slide 21

Slide 21 text

and the package.json file

Slide 22

Slide 22 text

Execute the app

Slide 23

Slide 23 text

and voila!

Slide 24

Slide 24 text

Nice and easy, but pretty basic to be honest!

Slide 25

Slide 25 text

Let’s try displaying the contents of my Home Folder with Node.js

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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!)

Slide 31

Slide 31 text

Window Rendering

Slide 32

Slide 32 text

Window Rendering • Node Webkit allows you to control how you want the Window rendering to work • You can specify set dimensions, whether fullscreen is allowed, and even if there’s a window frame at all!

Slide 33

Slide 33 text

Dimensions

Slide 34

Slide 34 text

Toolbar

Slide 35

Slide 35 text

FullScreen

Slide 36

Slide 36 text

Frameless

Slide 37

Slide 37 text

Kiosk Mode

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Window rendering can also be controlled programmatically within the app

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Menus

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Add the items via JS Source: code.tutsplus.com/tutorials/introduction-to-html5- desktop-apps-with-node-webkit--net-36296

Slide 44

Slide 44 text

And the menu appears Source: code.tutsplus.com/tutorials/introduction-to-html5- desktop-apps-with-node-webkit--net-36296

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Tray Apps

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Gulp github.com/sindresorhus/gulp-app

Slide 49

Slide 49 text

Shell

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Clipboard

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Desktop integration is pretty good

Slide 54

Slide 54 text

And because it’s using Chromium, HTML5 APIs are available

Slide 55

Slide 55 text

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)

Slide 56

Slide 56 text

So many possibilities!

Slide 57

Slide 57 text

Soundnode (SoundCloud desktop app) soundnodeapp.com

Slide 58

Slide 58 text

Vocabulary Builder vocabularybuilder.co

Slide 59

Slide 59 text

Fleex Player fleex.tv

Slide 60

Slide 60 text

But do remember, you’re working with static HTML files

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Packaging your app

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Nuwk! codeb.it/nuwk

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Customer Case Study: The British Medical Journal

Slide 67

Slide 67 text

Every year, we run the web site for a health conference run by the BMJ and IHI

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Our desktop app was originally built on the Adobe Air platform

Slide 70

Slide 70 text

It had some disadvantages

Slide 71

Slide 71 text

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)

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

A couple of weeks after the event, we shipped the desktop app, using Node Webkit

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

Key lessons

Slide 81

Slide 81 text

HTML5 Video Fullscreen does not work!

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

We managed to get around this with a workaround involving 3 steps:

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Make use of Node Webkit’s dev tools

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Node Webkit is not bug- free

Slide 91

Slide 91 text

But it is an impressive piece of work

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Intel XDK xdk.intel.com

Slide 94

Slide 94 text

And Roger now works for Intel in China

Slide 95

Slide 95 text

Oh, and Roger is speaking at LXJS

Slide 96

Slide 96 text

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