Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Web technologies for desktop development @ berlinjs apps

1.322 visualizaciones

Publicado el

Publicado en: Tecnología
  • Sé el primero en comentar

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?

×