O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Multiplatform hybrid development

1.037 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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

×