Web technologies for desktop development @ berlinjs apps
1 like1,556 views
This document discusses using web technologies like HTML5, CSS, and JavaScript for desktop application development using frameworks like node-webkit. Node-webkit allows creating desktop apps with web technologies by wrapping them in a native application shell using Chromium and node.js. It summarizes several frameworks for hybrid desktop apps including Adobe Air, QT, Chrome Apps, and node-webkit. Node-webkit is highlighted as a good option because it allows leveraging existing web development skills and has good support for native desktop capabilities and debugging tools. Examples are given of companies using node-webkit for kiosk apps, desktop programs, and hardware integration.
Web technologies for desktop development @ berlinjs apps
- 1. Web technologies for desktop development Darko Kukovec
- 2. Hybrid apps • Web technologies + native wrapper! • Mobile hybrid apps! • PhoneGap! • Custom! • Desktop
- 4. Multi-platform development • Java! • .NET + mono! • QT! • Hybrid app
- 5. You already know JavaScript (and HTML and CSS)
- 6. Wrappers
- 7. Adobe Air • Slow! • Limited developer tools! • HTML5 + ActionScript! • Distribution: Executable file
- 8. QT • Custom wrapper! • HTML5 + native code! • C++! • Python! • JavaScript! • Distribution: Executable file
- 9. Chrome Apps • HTML5 + Chrome APIs! • 50+ APIs! • Distribution: Chrome Web Store
- 10. app.js • webkit + node.js! • Slow development! • HTML5 + node.js! • Distribution: Executable file
- 11. node-webkit • Chromium + node.js! • Fast development (Intel)! • Chromium 32! • node.js 0.11.9! • HTML5 + node.js! • Distribution: Executable file
- 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. TideSDK • HTML5 + PHP/Ruby/Python! • Distribution: Executable file
- 14. node-webkit
- 15. Hello world! • What you need:! • node-webkit! • manifest (package.json)! • HTML, JS
- 16. Running & testing • Running! • If nw is in the Terminal path: nw .! • alias nw='open -a node-webkit' • Testing! • Chromedriver! • Selenium
- 17. Debugging • Chrome Dev Tools! • DevTools Jail! • Remote debugging! • Sublime Text console
- 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. 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. Tech stuff
- 21. Node.js changes • global window! • Chromium console instead of the node.js console! • Conflicts! • node.js require and RequireJS! • underscore
- 22. Node.js modules • Builtin! • require! • JavaScript! • Local install (node_modules)! • require! • C/C++! • nw-gyp! • Platform dependent! • node-webkit version dependent
- 23. DOM changes • iframe! • Disable security! • Node.js! • Top! • DevTools Jail
- 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. Our node-webkit experience My code is compiling
- 26. Infinum • Three node-webkit project in the last year! • Two kiosk mode apps for Windows! • Desktop app for Windows and OSX
- 27. Crypto • Decrypting about 50x faster than Adobe Air! • Tens of ms instead of a few seconds per photo
- 28. Optical media • Detection! • Windows: periodically check all the letters! • OSX: Watch /Volumes! • File access! • fs module
- 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. What else is node-webkit used for
- 31. • Gifrocket • • Ambiance • • Creating gif animations from videos Code editor with support for modules (npm) Arduinoscope • Osciloscope for Arduino • Hardware access
- 32. What is possible
- 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/
- 35. Thank you! Any questions, Dave?