Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web technologies for desktop development

4,719 views

Published on

Published in: Technology
  • Be the first to comment

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

×