This is a talk I gave at LNUG June 2014 about building desktop applications with Node Webkit

1. DESKTOP APPS WITH
NODE WEBKIT

2. What is
Node Webkit?

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

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

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

6. Here are some examples
using Node Webkit

7. Light Table
lighttable.com

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

9. Sqwiggle
sqwiggle.com

10. How does it work?

11. Node Webkit combines
Chromium
Browser
Node.js
Framework

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

13. 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.

14. 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

15. 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

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

17. Building a simple Node
Webkit app

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

19. Create an app folder and some files

20. Write a basic HTML page

21. and the package.json file

22. Execute the app

23. and voila!

24. Nice and easy, but pretty
basic to be honest!

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

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

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

31. Window Rendering

32. 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!

33. Dimensions

34. Toolbar

35. FullScreen

36. Frameless

37. Kiosk Mode

38. 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

39. Window rendering can also be
controlled programmatically
within the app

41. Menus

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

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

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

46. Tray Apps

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

48. Gulp
github.com/sindresorhus/gulp-app

49. Shell

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

51. Clipboard

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

53. Desktop integration is
pretty good

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

55. 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)

56. So many possibilities!

57. Soundnode (SoundCloud desktop app)
soundnodeapp.com

58. Vocabulary Builder
vocabularybuilder.co

59. Fleex Player
fleex.tv

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

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

62. Packaging your app

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

64. Nuwk!
codeb.it/nuwk

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

66. Customer Case Study: The
British Medical Journal

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

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

69. Our desktop app was
originally built on the
Adobe Air platform

70. It had some
disadvantages

71. 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)

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

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

74. 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

79. 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.

80. Key lessons

81. HTML5 Video Fullscreen
does not work!

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

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

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

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

87. Make use of Node
Webkit’s dev tools

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

90. Node Webkit is not bug-
free

91. But it is an impressive
piece of work

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

93. Intel XDK
xdk.intel.com

94. And Roger now works
for Intel in China

95. Oh, and Roger is
speaking at LXJS

96. 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

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

98. @paulbjensen

99. Thank you