Slides from my talk http://www.meetup.com/vblatu/events/218774715/

1. MULTIPLATFORM HYBRID
DEVELOPMENT
Darko Kukovec
JavaScript developer at .
@DarkoKukovec

2. HYBRID APPS
• Web technologies + native wrapper
/ 47
2

3. WHY HYBRID DESKTOP APPS?
/ 47
3

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

10. MULTIPLATFORM HYBRID APP
10 / 47

11. Wrappers
Applications
Automation
/ 47
11

12. WRAPPERS
/ 47
12

13. DESKTOP WRAPPERS
/ 47
• Adobe Air
• QT
• Chrome Apps
• app.js
13

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

19. MOBILE WRAPPERS
/ 47
• PhoneGap / Cordova
• Custom
19

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

27. APPLICATION
/ 47
27

28. APPLICATIONS
• Backbone.js + Require.js + SCSS + Handlebars
• Yeoman, Bower
/ 47
28

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

30. (AUTOMATED) CODE REVIEW
/ 47
• Hosted
• Code climate
• Codacy
• Plato
30

31. VERSIONING
• Git
• Git flow
• master - always production-ready
• develop - latest development changes
• feature - branches for specific features
• release, hotfix
/ 47
31

32. GIT FLOW
/ 47
32

33. AUTOMATION
/ 47
33

34. “Automation isn’t about being lazy.
It’s about being efficient.”
–Addy Osmani
/ 47
34

35. 35 / 47 http://xkcd.com/1205/

36. WHY USE A TASK RUNNER?
/ 47
• Improve quality
• Ship faster
• Easily repeatable
36

37. TASK RUNNERS
/ 47
• Make
• Ant
• Maven
• …
• Grunt
• Gulp
• npm, broccoli, cake, …
37

38. GRUNT
• ~3600 plugins
• > 2 years old
/ 47
38

39. GULP
• ~ 800 plugins
• > 1 year old
/ 47
39

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

43. SOME TASK EXAMPLES
/ 47
• commit hooks
• husky grunt plugin
• SCSS Linter
• JS Hint
• Tests?
• Automated code review?
43

44. SOME TASK EXAMPLES
/ 47
• build
• the usual
• linters
• compass
• concatenate
• minify
• revision
44

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

46. 46 / 47 http://xkcd.com/1319/

47. 47 / 47