Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Multiplatform hybrid development

847 views

Published on

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

Published in: Technology
  • Be the first to comment

Multiplatform hybrid development

  1. 1. MULTIPLATFORM HYBRID DEVELOPMENT Darko Kukovec JavaScript developer at . @DarkoKukovec
  2. 2. HYBRID APPS • Web technologies + native wrapper / 47 2
  3. 3. WHY HYBRID DESKTOP APPS? / 47 3
  4. 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. 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. 6. OUR EXPERIENCE • A lot of mobile hybrid apps • A few special cases / 47 6
  7. 7. DESKTOP HYBRID APP 1 / 47 • Kiosk style app • 40” touchscreen TV • Windows (+ OSX) 7
  8. 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. 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. 10. MULTIPLATFORM HYBRID APP 10 / 47
  11. 11. Wrappers Applications Automation / 47 11
  12. 12. WRAPPERS / 47 12
  13. 13. DESKTOP WRAPPERS / 47 • Adobe Air • QT • Chrome Apps • app.js 13
  14. 14. OUR CHOICE • node-webkit • chromium (38) + node.js (0.11) • Windows + Linux + OSX / 47 14
  15. 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. 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. 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. 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. 19. MOBILE WRAPPERS / 47 • PhoneGap / Cordova • Custom 19
  20. 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. 21. CUSTOM WRAPPER • Pros • Easily customisable • Complete control • Cons • Less features • More time, native app developers / 47 21
  22. 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. 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. 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. 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. 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. 27. APPLICATION / 47 27
  28. 28. APPLICATIONS • Backbone.js + Require.js + SCSS + Handlebars • Yeoman, Bower / 47 28
  29. 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. 30. (AUTOMATED) CODE REVIEW / 47 • Hosted • Code climate • Codacy • Plato 30
  31. 31. VERSIONING • Git • Git flow • master - always production-ready • develop - latest development changes • feature - branches for specific features • release, hotfix / 47 31
  32. 32. GIT FLOW / 47 32
  33. 33. AUTOMATION / 47 33
  34. 34. “Automation isn’t about being lazy. It’s about being efficient.” –Addy Osmani / 47 34
  35. 35. 35 / 47 http://xkcd.com/1205/
  36. 36. WHY USE A TASK RUNNER? / 47 • Improve quality • Ship faster • Easily repeatable 36
  37. 37. TASK RUNNERS / 47 • Make • Ant • Maven • … • Grunt • Gulp • npm, broccoli, cake, … 37
  38. 38. GRUNT • ~3600 plugins • > 2 years old / 47 38
  39. 39. GULP • ~ 800 plugins • > 1 year old / 47 39
  40. 40. GRUNT VS. GULP / 47 • Grunt • Based on files • Configuration over code • Gulp • Based on streams • Code over configuration 40
  41. 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. 42. SOME TASK EXAMPLES / 47 • develop • starts server • livereload • watch • compass • SCSS Linter • JS Hint • compile templates 42
  43. 43. SOME TASK EXAMPLES / 47 • commit hooks • husky grunt plugin • SCSS Linter • JS Hint • Tests? • Automated code review? 43
  44. 44. SOME TASK EXAMPLES / 47 • build • the usual • linters • compass • concatenate • minify • revision 44
  45. 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. 46 / 47 http://xkcd.com/1319/
  47. 47. 47 / 47

×