Your SlideShare is downloading. ×
Web technologies for desktop development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web technologies for desktop development

2,426
views

Published on

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,426
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
23
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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