This document discusses using web technologies like HTML5, CSS, and JavaScript to build desktop applications. It outlines several frameworks for creating hybrid desktop apps, including Adobe Air, Qt, Chrome Apps, and node-webkit. Node-webkit uses the Chromium rendering engine and allows developers to build desktop apps using HTML, CSS, JavaScript, and Node.js modules. The document provides an overview of node-webkit's capabilities like multi-platform support, debugging tools, native element access, and code packaging. It also gives examples of companies using node-webkit and popular projects that demonstrate its features.

1. Web technologies for
desktop development
Darko Kukovec
@DarkoKukovec

2. Hybrid apps
● Web technologies + native wrapper
● Mobile hybrid apps
–
–
PhoneGap
Custom
● Desktop

3. Why hybrid
desktop
applications?

4. Multi-platform development
•
•
•
•
Java
.NET + mono
QT
Hybrid app

5. Wrappers

6. Adobe Air
•
•
•
•
Slow
Limited developer tools
HTML5 + ActionScript
Distribution: Executable file

7. Qt
•
•
Custom wrapper
HTML5 + native code
–
–
–
●
C++
Python
JavaScript
Distribution: Executable file

8. Chrome Apps
● HTML5 + Chrome APIs
–
50+ APIs
● Distribution: Chrome Web Store

9. app.js
•
•
•
●
webkit + node.js
Slow development
HTML5 + node.js
Distribution: Executable file

10. node-webkit
● Chromium + node.js
● Fast development (Intel)
–
–
Chromium 30
node.js 0.10.18
● HTML5 + node.js
●
Distribution: Executable file

11. node-webkit
Getting started

12. Hello world!
•
What is needed
–
–
–
node-webkit
manifest
HTML, JS

13. Running & testing
● running
–
–
nw is in the Terminal path
nw .
● testing
–
–
Chromedriver
Selenium

14. Debugging
●
●
●
●
Chrome Developer Tools
DevTools jail
remote debugging
Sublime Text 2 console

15. Packaging & distribution
● package.nw or package.json in the same
folder as the node-webkit executable
● Packaging into the executable file
–
–
Windows and Linux
●
Make the node-webkit package
●
Windows: copy /b nw.exe+app.nw app.exe
●
Linux: cat /usr/bin/nw app.nw > app && chmod +x app
OS X
●
Copy the app into the Contents/Resources folder
of the node-webkit app

16. Native elements
● file dialogs
–
Files and folders
● Opening URLs in the default browser
● Opening files in the default app or in the file
manager
● menu bar / status bar
● Clipboard access
● kiosk mode

17. Tech stuff

18. Node.js changes
● global → window
● Chromium console instead of node.js
console
● conflicts
–
–
node.js require and require.js
●
Solution: rename window.require befor loading
the require.js
node.js crypto and Chromium crypto

19. Node.js modules
● builtin
–
require
● JavaScript
–
–
Local install
node_modules
● C/C++
–
–
–
nw-gyp
Platform dependent
Node-webkit version dependent

20. DOM changes
● iframe
–
–
–
Disabled security features
Enabled node.js
Developer Tools

21. Code protection
● v8 snapshot
–
–
–
–
Can hide a part (tens of KB) of the code into a binary
file
Platform dependent
Little slower than the regular code
Loaded before the regular code

22. Who uses
node-webkit
And what interesting features

23. Who uses node-webkit
● Infinum :)
–
–
–
3 projects (Windows and OSX)
Crypto
●
about 50x faster than Adobe Air
Optical media access
●
Detection and reading

24. Who uses node-webkit
● Gifrocket
–
Creating gif animations from videos
● Ambiance
–
code editor with modules (npm)
● Arduinoscope
–
–
oscilloscope for Arduino
Hardware access
● Everytime
–
–
video bookmarking
Communicates with the VLC player

25. What can be done?
● Node.js + Chromium

26. Thank you for your attention