Web technologies for desktop development
4 likes4,987 views
This document discusses using web technologies like HTML5, CSS, and JavaScript to build desktop applications. It outlines several frameworks for creating hybrid desktop apps, including Adobe Air, Qt, Chrome Apps, and node-webkit. Node-webkit uses the Chromium rendering engine and allows developers to build desktop apps using HTML, CSS, JavaScript, and Node.js modules. The document provides an overview of node-webkit's capabilities like multi-platform support, debugging tools, native element access, and code packaging. It also gives examples of companies using node-webkit and popular projects that demonstrate its features.
Web technologies for desktop development
- 1. Web technologies for desktop development Darko Kukovec @DarkoKukovec
- 2. Hybrid apps ● Web technologies + native wrapper ● Mobile hybrid apps – – PhoneGap Custom ● Desktop
- 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
- 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