Desktop apps with node webkit


Published on

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

Published in: Software, Technology
  • if you want a basic hello world app that weights more then 100m go ahead..
    Are you sure you want to  Yes  No
    Your message goes here
  • h
    Are you sure you want to  Yes  No
    Your message goes here
  • 1 - Yes. The application has access to the user's file system. If the application has form inputs, they need to be sanitized, as they could be used to perform script injection.

    2 - As a desktop app, unless you are communicating with a 3rd-party API to send and receive data, there isn't really any server communication going on - you're essentially serving static files.

    3 - You can use Node's fs API to read/write files, use WebRTC to consume the user's video/audio device inputs, and other APIs. The user is essentially trusting the app, and the app is given a lot of APIs to run with, including full screen support plus something called Kiosk Mode, which is very cool for building PoS apps, but a nightmare if you don't add a means to exit from it within your app.

    You'll find more information about Node Webkit at it's wiki on github:
    Are you sure you want to  Yes  No
    Your message goes here
  • 3 questions:
    1. what are some common security concerns with this approach to application building?
    2. what does communicating with the server end up looking like?
    3. what types of interactions are allowed/disallowed on the user's system via node webkit?
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Desktop apps with node webkit

  2. 2. What is Node Webkit?
  3. 3. Node Webkit is an app runtime that lets you make desktop apps with HTML, CSS, and JavaScript.
  4. 4. and it also lets you use Node.js modules within the app as well.
  5. 5. But not only that, you can build native executables of your app for Windows, Mac and Linux
  6. 6. Here are some examples using Node Webkit
  7. 7. Light Table
  8. 8. Game Dev Tycoon
  9. 9. Sqwiggle
  10. 10. How does it work?
  11. 11. Node Webkit combines Chromium Browser Node.js Framework
  12. 12. Integrating them requires the following: • Using the same V8 engine instance • Main loop integration • Context Bridging
  13. 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. 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. 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. 16. For more information • See this link: • How-node.js-is-integrated-with-chromium
  17. 17. Building a simple Node Webkit app
  18. 18. Download Node Webkit
  19. 19. Create an app folder and some files
  20. 20. Write a basic HTML page
  21. 21. and the package.json file
  22. 22. Execute the app
  23. 23. and voila!
  24. 24. Nice and easy, but pretty basic to be honest!
  25. 25. Let’s try displaying the contents of my Home Folder with Node.js
  26. 26. You can use not only Node’s core modules, but also npm installed modules too!
  27. 27. 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!)
  28. 28. Window Rendering
  29. 29. 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!
  30. 30. Dimensions
  31. 31. Toolbar
  32. 32. FullScreen
  33. 33. Frameless
  34. 34. Kiosk Mode
  35. 35. 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
  36. 36. Window rendering can also be controlled programmatically within the app
  37. 37. Menus
  38. 38. You can add native menu items to your app, both in the main menu, and in the app area
  39. 39. Add the items via JS Source: desktop-apps-with-node-webkit--net-36296
  40. 40. And the menu appears Source: desktop-apps-with-node-webkit--net-36296
  41. 41. Tray Apps
  42. 42.
  43. 43. Gulp
  44. 44. Shell
  45. 45.
  46. 46. Clipboard
  47. 47.
  48. 48. Desktop integration is pretty good
  49. 49. And because it’s using Chromium, HTML5 APIs are available
  50. 50. 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)
  51. 51. So many possibilities!
  52. 52. Soundnode (SoundCloud desktop app)
  53. 53. Vocabulary Builder
  54. 54. Fleex Player
  55. 55. But do remember, you’re working with static HTML files
  56. 56. You ‘could’ run a web server in your app, but…
  57. 57. Packaging your app
  58. 58. You can write the app once, and build it for Windows, Mac and Linux
  59. 59. Nuwk!
  60. 60. grunt-node-webkit-builder
  61. 61. Customer Case Study: The British Medical Journal
  62. 62. Every year, we run the web site for a health conference run by the BMJ and IHI
  63. 63. As part of our service, we also produce a desktop app that lets people view recorded sessions, posters, and file attachments.
  64. 64. Our desktop app was originally built on the Adobe Air platform
  65. 65. It had some disadvantages
  66. 66. 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)
  67. 67. Last year, we decided to consider using Node Webkit to replace the Adobe Air app
  68. 68. A couple of weeks after the event, we shipped the desktop app, using Node Webkit
  69. 69. 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
  70. 70. 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.
  71. 71. Key lessons
  72. 72. HTML5 Video Fullscreen does not work!
  73. 73. We managed to get around this with a workaround involving 3 steps:
  74. 74. 1 - Listen to the click event on the fullscreen button in the video player
  75. 75. 2 - Add a CSS class to the video tag, which has properties that make the element take the full dimensions of the window
  76. 76. 3 - Trigger the win.enterFullScreen() function call as well.
  77. 77. Make use of Node Webkit’s dev tools
  78. 78. The dev tools will help to spot slow points in front-end rendering and performance
  79. 79. Node Webkit is not bug- free
  80. 80. But it is an impressive piece of work
  81. 81. It’s so good, that Intel replaced their use of Java and Chrome in their IDE with Node Webkit
  82. 82. Intel XDK
  83. 83. And Roger now works for Intel in China
  84. 84. Oh, and Roger is speaking at LXJS
  85. 85. 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
  86. 86. I hope you get a chance to play with it and create something amazing!
  87. 87. @paulbjensen
  88. 88. Thank you