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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web technologies for desktop development

2,786

Published on

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

No Downloads
Views
Total Views
2,786
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
27
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

×