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

Like this? Share it with your network

Share

Web technologies for desktop development

on

  • 2,342 views

 

Statistics

Views

Total Views
2,342
Views on SlideShare
1,459
Embed Views
883

Actions

Likes
4
Downloads
21
Comments
0

9 Embeds 883

http://www.infinum.co 425
https://www.infinum.co 391
http://feeds.feedburner.com 31
http://www.newsblur.com 20
http://cloud.feedly.com 10
https://twitter.com 3
https://www.newsblur.com 1
http://localhost 1
http://digg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web technologies for desktop development Presentation 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