Build Desktop Apps with Web Tech
•
1 like•1,550 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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Build Desktop Apps with Web Tech
Similar to Build Desktop Apps with Web Tech (20)
Recently uploaded
Recently uploaded (20)
Build Desktop Apps with Web Tech
- 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?