Desktop Apps with Node Webkit

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

Transcript

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