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 @ berlinjs apps

1,238 views

Published on

Published in: Technology
  • Be the first to comment

Web technologies for desktop development @ berlinjs apps

  1. 1. Web technologies for desktop development Darko Kukovec
  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. You already know JavaScript (and HTML and CSS)
  6. 6. Wrappers
  7. 7. Adobe Air • Slow! • Limited developer tools! • HTML5 + ActionScript! • Distribution: Executable file
  8. 8. QT • Custom wrapper! • HTML5 + native code! • C++! • Python! • JavaScript! • Distribution: Executable file
  9. 9. Chrome Apps • HTML5 + Chrome APIs! • 50+ APIs! • Distribution: Chrome Web Store
  10. 10. app.js • webkit + node.js! • Slow development! • HTML5 + node.js! • Distribution: Executable file
  11. 11. node-webkit • Chromium + node.js! • Fast development (Intel)! • Chromium 32! • node.js 0.11.9! • HTML5 + node.js! • Distribution: Executable file
  12. 12. brackets-shell • HTML5 + some v8 extensions (e.g. file access)! • Made by Adobe for the Brackets code editor! • “Note: The brackets-shell is only maintained for use by the Brackets project.”! • Distribution: Executable file
  13. 13. TideSDK • HTML5 + PHP/Ruby/Python! • Distribution: Executable file
  14. 14. node-webkit
  15. 15. Hello world! • What you need:! • node-webkit! • manifest (package.json)! • HTML, JS
  16. 16. Running & testing • Running! • If nw is in the Terminal path: nw .! • alias nw='open -a node-webkit' • Testing! • Chromedriver! • Selenium
  17. 17. Debugging • Chrome Dev Tools! • DevTools Jail! • Remote debugging! • Sublime Text console
  18. 18. 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 a package.nw file and run one command from the console! • OS X - copy the package to Content/ Resources/app.nw inside of the app
  19. 19. 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! • Frameless mode
  20. 20. Tech stuff
  21. 21. Node.js changes • global window! • Chromium console instead of the node.js console! • Conflicts! • node.js require and RequireJS! • underscore
  22. 22. Node.js modules • Builtin! • require! • JavaScript! • Local install (node_modules)! • require! • C/C++! • nw-gyp! • Platform dependent! • node-webkit version dependent
  23. 23. DOM changes • iframe! • Disable security! • Node.js! • Top! • DevTools Jail
  24. 24. Code protection • v8 snapshot! • Can hide a part (tens of KB) of the code into a binary file! • Platform & node-webkit version dependent! • Little slower, loaded at startup
  25. 25. Our node-webkit experience My code is compiling
  26. 26. Infinum • Three node-webkit project in the last year! • Two kiosk mode apps for Windows! • Desktop app for Windows and OSX
  27. 27. Crypto • Decrypting about 50x faster than Adobe Air! • Tens of ms instead of a few seconds per photo
  28. 28. Optical media • Detection! • Windows: periodically check all the letters! • OSX: Watch /Volumes! • File access! • fs module
  29. 29. Auto update • Not supported out of the box! • Our own update detection & downloading! • Windows: Installation wizard is downloaded! • OSX: All the app files can be replaced while the app is running
  30. 30. What else is node-webkit used for
  31. 31. • Gifrocket • • Ambiance • • Creating gif animations from videos Code editor with support for modules (npm) Arduinoscope • Osciloscope for Arduino • Hardware access
  32. 32. What is possible
  33. 33. Node.js + Chromium • Atwood’s Law:! • “any application that can be written in JavaScript, will eventually be written in JavaScript.”! • http://www.reddit.com/r/atwoodslaw/
  34. 34. Node.js + Chromium
  35. 35. Thank you! Any questions, Dave?

×