Web technologies for desktop development

4,425 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,425
On SlideShare
0
From Embeds
0
Number of Embeds
1,718
Actions
Shares
0
Downloads
30
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web technologies for desktop development

  1. 1. Web technologies for desktop development Darko Kukovec @DarkoKukovec
  2. 2. Hybrid apps ● Web technologies + native wrapper ● Mobile hybrid apps – – PhoneGap Custom ● Desktop
  3. 3. Why hybrid desktop applications?
  4. 4. Multi-platform development • • • • Java .NET + mono QT Hybrid app
  5. 5. Wrappers
  6. 6. Adobe Air • • • • Slow Limited developer tools HTML5 + ActionScript Distribution: Executable file
  7. 7. Qt • • Custom wrapper HTML5 + native code – – – ● C++ Python JavaScript Distribution: Executable file
  8. 8. Chrome Apps ● HTML5 + Chrome APIs – 50+ APIs ● Distribution: Chrome Web Store
  9. 9. app.js • • • ● webkit + node.js Slow development HTML5 + node.js Distribution: Executable file
  10. 10. node-webkit ● Chromium + node.js ● Fast development (Intel) – – Chromium 30 node.js 0.10.18 ● HTML5 + node.js ● Distribution: Executable file
  11. 11. node-webkit Getting started
  12. 12. Hello world! • What is needed – – – node-webkit manifest HTML, JS
  13. 13. Running & testing ● running – – nw is in the Terminal path nw . ● testing – – Chromedriver Selenium
  14. 14. Debugging ● ● ● ● Chrome Developer Tools DevTools jail remote debugging Sublime Text 2 console
  15. 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. 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. 17. Tech stuff
  18. 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. 19. Node.js modules ● builtin – require ● JavaScript – – Local install node_modules ● C/C++ – – – nw-gyp Platform dependent Node-webkit version dependent
  20. 20. DOM changes ● iframe – – – Disabled security features Enabled node.js Developer Tools
  21. 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. 22. Who uses node-webkit And what interesting features
  23. 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. 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. 25. What can be done? ● Node.js + Chromium
  26. 26. Thank you for your attention

×