Building native desktop applications with node-webkit

2,933 views

Published on

We build web apps that runs on browser and server-side apps on Node.JS, but what’s about native Desktop applications? In this talk I will introduce node-webkit: an app runtime based on Chromium + Node.JS, you can use to build Desktop apps with JS and HTML, with no browser’s limitations like file-system calls or running native code.

Published in: Software
2 Comments
2 Likes
Statistics
Notes
  • @ThaboAmbrose Ambrose the app runs on a custom Chromium browser window. The user will actually see an ordinary windows, but it's actually a Chromium renderer window. We switched from node-webkit to Electron: it was better for our purposes. If you wanna read more: http://www.pracucci.com/how-we-built-spreaker-studio-for-desktop.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I haven't read through the node-webkit's documentation, i am a beginner,but my question is does the native desktop app run on the web browser,or on an ordinary window
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,933
On SlideShare
0
From Embeds
0
Number of Embeds
407
Actions
Shares
0
Downloads
44
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

Building native desktop applications with node-webkit

  1. 1. OUT OF THE SANDBOX Building native Desktop apps by Marco Pracucci - CTO @spreaker at JsDay on May 14, 2014 mercoledì 14 maggio 14
  2. 2. @pracucci WHY DESKTOP ? mercoledì 14 maggio 14
  3. 3. @pracucci Hackable text editor by GitHub Atom.io mercoledì 14 maggio 14
  4. 4. @pracucci Spreaker Studio Mix audio sources and broadcast live by Spreaker mercoledì 14 maggio 14
  5. 5. @pracucci WHY DESKTOP ? HOW mercoledì 14 maggio 14
  6. 6. @pracucci NODE-WEBKIT app runtime based upon https://github.com/rogerwang/node-webkit + mercoledì 14 maggio 14
  7. 7. @pracucci NODE-WEBKIT runs on developed by Roger Wang at Intel mercoledì 14 maggio 14
  8. 8. @pracucci package.json { “name”: “Demo”, “main”: “index.html”, “window”: { “width”: 600, “height”: 400 } } index.html <html> <body> <h1>My App</h1> </body> </html> GETTING STARTED mercoledì 14 maggio 14
  9. 9. @pracucci <script> var fs = require(“fs”); var _ = require(“underscore”); var _ = require(“lame”); </script> Node modules (built-in) 3rd party modules in JavaScript 3rd party modules in C/C++ GETTING STARTED npm install ... mercoledì 14 maggio 14
  10. 10. @pracucci FRONT OR BACK ? Should I use Angular or Express? mercoledì 14 maggio 14
  11. 11. @pracucci Think of it as a frontend app that can “just” use node modules “ ” mercoledì 14 maggio 14
  12. 12. @pracucci Single Page Apps app://whatever/path DESIGN Multiple Page Apps Ease repackage of your website to a node-webkit app { “main”: “index.html”, } { “main”: “app://foo/index.html”, } mercoledì 14 maggio 14
  13. 13. @pracucci Generally speaking, you can easily port your web app to node-webkit “ ” mercoledì 14 maggio 14
  14. 14. @pracucci few builtin codecs, but you can rebuild libffmpeg to add any format / codec MULTIMEDIA <audio> <video> <canvas> getUserMedia() WebRTC WebGL ... mercoledì 14 maggio 14
  15. 15. @pracucci • returns the real path on filesystem • can open file dialog programmatically <input type='file' /> FILE DIALOGS mercoledì 14 maggio 14
  16. 16. @pracucci Select a directory instead of a file FILE DIALOGS <input type='file' nwdirectory /> mercoledì 14 maggio 14
  17. 17. @pracucci Select a (non) existing file FILE DIALOGS <input type='file' nwsaveas /> mercoledì 14 maggio 14
  18. 18. @pracucci NATIVE UI MODULE var gui = require('nw.gui'); Built-in module to control the Native UI: mercoledì 14 maggio 14
  19. 19. @pracucci My App File Edit 5:45 pm My App mercoledì 14 maggio 14
  20. 20. @pracucci My App File Edit 5:45 pm My App gui.Window mercoledì 14 maggio 14
  21. 21. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Window mercoledì 14 maggio 14
  22. 22. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window mercoledì 14 maggio 14
  23. 23. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window gui.Clipboard mercoledì 14 maggio 14
  24. 24. @pracucci My App File Edit 5:45 pm My App gui.Menu gui.Tray gui.Window gui.Clipboard gui.Shell mercoledì 14 maggio 14
  25. 25. @pracucci Source code will be exposed. Use nwsnapshot to compile to native code. (experimental) zip -r app.nw * 1. Make a package nw app.nw 2. Ship node-webit + app package PACKAGING mercoledì 14 maggio 14
  26. 26. @pracucci Hard to contribute CONTRIBUTING You both need to know Chromium and Node.JS internals (and have a strong experience with C++) mercoledì 14 maggio 14
  27. 27. @pracucci with node-webkit you can easily build native desktop apps (and have a lot of fun !) SUMMARY mercoledì 14 maggio 14
  28. 28. Thank you! https://joind.in/11272 Any feedback is welcome! mercoledì 14 maggio 14

×