multiplatform hybrid development
TRANSCRIPT
/ 47
WHY HYBRID DESKTOP APPS?
• You don’t want to do it multiple times
• You already probably know JavaScript
• and HTML, CSS
4
/ 47
WHY HYBRID DESKTOP APPS?• Atwood's Law:
“any application that can be written in JavaScript, will eventually be written in JavaScript”
5
/ 47
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 CoffeScript8
/ 47
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 Touch9
/ 47
NODE-WEBKIT PROS• Fast development
• A LOT of node.js modules
• 99% of the time using existing technologies
• GUI specific APIs
• Chrome DevTools15
/ 47
NODE-WEBKIT PROS• Distributed as
• exe with a few additional dlls
• regular OSX app
• Updating
• The whole exe
• generic exe + application package (package.nw)16
/ 47
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
17
/ 47
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 apps18
/ 47
OUR CHOICE• Custom wrapper
• Specific requirements
• HTML/JS/CSS is on server, not on the device
• Communication with different card readers
• Swipe / RFID20
/ 47
CUSTOM WRAPPER• Pros
• Easily customisable
• Complete control
• Cons
• Less features
• More time, native app developers21
/ 47
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 wheel22
/ 47
AUTO-UPDATING• 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
/ 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
AUTO-UPDATING
24
/ 47
• 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 Antivirus software
WINDOWS AUTO-UPDATING
25
/ 47
• Option B: Download an installer and prompt the user to install the update
• Requires the user to do some work
26
WINDOWS AUTO-UPDATING
/ 47
CODE QUALITY• JS Hint
• SCSS Linter
• Developers are lazy - force linting
• Git commit hooks
• Application building
• During the development
• Code editor integration
29
/ 47
VERSIONING• Git
• Git flow
• master - always production-ready
• develop - latest development changes
• feature - branches for specific features
• release, hotfix31
/ 47
GRUNT VS. GULP• Grunt
• Based on files
• Configuration over code
• Gulp
• Based on streams
• Code over configuration40
/ 47
OUR CHOICE
• Grunt
• Gulp didn’t exist yet
• Grunt - big community, a lot of plugins
• Gulp - easier to use, fast growing community
http://xkcd.com/1445/41
/ 47
SOME TASK EXAMPLES• develop
• starts server
• livereload
• watch
• compass
• SCSS Linter
• JS Hint
• compile templates42
/ 47
SOME TASK EXAMPLES• commit hooks
• husky grunt plugin
• SCSS Linter
• JS Hint
• Tests?
• Automated code review?43
/ 47
• build
• the usual
• linters
• compass
• concatenate
• minify
• revision
SOME TASK EXAMPLES
44
/ 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
SOME TASK EXAMPLES
45