4. WHY HYBRID DESKTOP APPS?
• You don’t want to do it multiple times
• You already probably know JavaScript
• and HTML, CSS
/ 47
4
5. WHY HYBRID DESKTOP APPS?
• Atwood's Law:
“any application that can be written in JavaScript,
will eventually be written in JavaScript”
/ 47
5
6. OUR EXPERIENCE
• A lot of mobile hybrid apps
• A few special cases
/ 47
6
7. DESKTOP HYBRID APP 1
/ 47
• Kiosk style app
• 40” touchscreen TV
• Windows (+ OSX)
7
8. DESKTOP HYBRID APP 2
• Users install it on their computers
• Windows + OSX
• Optical drive access
• Cryptography
• Auto-updateable
• Rewrite of an app made with Adobe Air and CoffeScript
/ 47
8
9. MULTIPLATFORM HYBRID APP
• Kiosk style app
• Windows + iPads + Android tablets (+ OSX)
• Works with 3 different APIs
• Communication with card readers
• Rewrite of an app made for iPads in Sencha Touch
/ 47
9
14. OUR CHOICE
• node-webkit
• chromium (38) + node.js (0.11)
• Windows + Linux + OSX
/ 47
14
15. NODE-WEBKIT PROS
• Fast development
• A LOT of node.js modules
• 99% of the time using existing technologies
• GUI specific APIs
• Chrome DevTools
/ 47
15
16. NODE-WEBKIT PROS
• Distributed as
• exe with a few additional dlls
• regular OSX app
• Updating
• The whole exe
• generic exe + application package (package.nw)
/ 47
16
17. NODE-WEBKIT CONS
• Some builds can be unstable
• Refreshing the page doesn’t clear the DOM/
memory (learned this the hard way)
• No built-in auto update
/ 47
17
18. HONORABLE MENTION
• Atom shell
• Some differences, e.g.
• node-webkit entry point is html
• atom shell entry point is JavaScript
• Better suited for multi window apps
/ 47
18
20. OUR CHOICE
• Custom wrapper
• Specific requirements
• HTML/JS/CSS is on server, not on the device
• Communication with different card readers
/ 47
• Swipe / RFID
20
21. CUSTOM WRAPPER
• Pros
• Easily customisable
• Complete control
• Cons
• Less features
• More time, native app developers
/ 47
21
22. OUR RECOMMENDATION
• Cordova
• It just works (most of the time)
• Battle tested
• A lot of plugins
• No need for a native developers (most of the time)
• No need to reinvent the wheel
/ 47
22
23. AUTO-UPDATING
/ 47
• Kiosk apps
• Desktop
• Mini server in node-webkit
• API server calls the app with a package download URL
• App downloads the package and restarts itself
• Tablet
• Update the code on the server
• Refresh the app (manually for now)
23
24. AUTO-UPDATING
/ 47
• Desktop app
• OSX
• Apps are folders
• App files aren’t locked while running
• App downloads the update, unzips it, and recursively copies the files
• Windows
• App files locked while running
24
25. WINDOWS AUTO-UPDATING
• Option A: Download the update, run a bat
script that would copy the files once the app
closes, and starts the app again
• Significant chance it will be blocked by
/ 47
Antivirus software
25
26. WINDOWS AUTO-UPDATING
• Option B: Download an installer and prompt
the user to install the update
• Requires the user to do some work
/ 47
26
29. CODE QUALITY
/ 47
• JS Hint
• SCSS Linter
• Developers are lazy - force linting
• Git commit hooks
• Application building
• During the development
• Code editor integration
29
40. GRUNT VS. GULP
/ 47
• Grunt
• Based on files
• Configuration over code
• Gulp
• Based on streams
• Code over configuration
40
41. OUR CHOICE
• Grunt
• Gulp didn’t exist yet
• Grunt - big community, a lot of plugins
• Gulp - easier to use, fast growing community
41 / 47
http://xkcd.com/1445/
42. SOME TASK EXAMPLES
/ 47
• develop
• starts server
• livereload
• watch
• compass
• SCSS Linter
• JS Hint
• compile templates
42
45. SOME TASK EXAMPLES
/ 47
• build
• kiosk
• zip onto package.nw
• update the test kiosk (curl)
• notify
• desktop app
• make and sign OS X app
• make dmg
• prepare bat script for Windows
45