web technologies for desktop development
DESCRIPTION
TRANSCRIPT
![Page 1: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/1.jpg)
Web technologies for desktop development
Darko Kukovec@DarkoKukovec
![Page 2: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/2.jpg)
Hybrid apps
● Web technologies + native wrapper● Mobile hybrid apps
– PhoneGap– Custom
● Desktop
![Page 3: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/3.jpg)
Why hybrid desktop applications?
![Page 4: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/4.jpg)
Multi-platform development
• Java
• .NET + mono
• QT
• Hybrid app
![Page 5: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/5.jpg)
Wrappers
![Page 6: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/6.jpg)
Adobe Air
• Slow
• Limited developer tools
• HTML5 + ActionScript
• Distribution: Executable file
![Page 7: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/7.jpg)
Qt
• Custom wrapper
• HTML5 + native code– C++– Python– JavaScript
● Distribution: Executable file
![Page 8: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/8.jpg)
Chrome Apps
● HTML5 + Chrome APIs– 50+ APIs
● Distribution: Chrome Web Store
![Page 9: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/9.jpg)
app.js
• webkit + node.js
• Slow development
• HTML5 + node.js● Distribution: Executable file
![Page 10: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/10.jpg)
node-webkit
● Chromium + node.js● Fast development (Intel)
– Chromium 30– node.js 0.10.18
● HTML5 + node.js● Distribution: Executable file
![Page 11: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/11.jpg)
node-webkit
Getting started
![Page 12: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/12.jpg)
• What is needed– node-webkit– manifest– HTML, JS
Hello world!
![Page 13: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/13.jpg)
Running & testing
● running– nw is in the Terminal path– nw .
● testing– Chromedriver– Selenium
![Page 14: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/14.jpg)
Debugging
● Chrome Developer Tools● DevTools jail● remote debugging● Sublime Text 2 console
![Page 15: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/15.jpg)
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
![Page 16: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/16.jpg)
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
![Page 17: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/17.jpg)
Tech stuff
![Page 18: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/18.jpg)
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
![Page 19: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/19.jpg)
Node.js modules
● builtin– require
● JavaScript– Local install– node_modules
● C/C++– nw-gyp– Platform dependent– Node-webkit version dependent
![Page 20: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/20.jpg)
DOM changes
● iframe– Disabled security features– Enabled node.js– Developer Tools
![Page 21: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/21.jpg)
● 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
Code protection
![Page 22: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/22.jpg)
Who uses node-webkit
And what interesting features
![Page 23: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/23.jpg)
Who uses node-webkit
● Infinum :)– 3 projects (Windows and OSX)– Crypto
● about 50x faster than Adobe Air– Optical media access
● Detection and reading
![Page 24: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/24.jpg)
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
![Page 25: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/25.jpg)
What can be done?
● Node.js + Chromium
![Page 26: Web technologies for desktop development](https://reader034.vdocuments.site/reader034/viewer/2022051110/54c8562f4a7959d7758b466f/html5/thumbnails/26.jpg)
Thank you for your attention