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.

Building Mobile Apps with PhoneGap and Backbone


Published on

Mobile is the future, but it is a lot of work to support all of the different device architectures out there. Is there an easier way? YES! PhoneGap, when combined with Backbone, it becomes a cool way to build apps which can run on nearly every popular mobile platform.

Published in: Technology, Education
  • Login to see the comments

Building Mobile Apps with PhoneGap and Backbone

  1. 1. Building Mobile Apps with PhoneGap and Backbone 10 November 2013
  2. 2. Who am I? Hi, I am Troy. I have fun as a full stack programmer. I develop using ASP.NET MVC or Node.js on the backend and the web or mobile up front. ! I can be reached at:
  3. 3. Who are you? I am assuming you are familiar with web programming and have some knowledge of JavaScript.
  4. 4. The End of HTML5 as a Platform? • Facebook mobile apps on iOS and Android were originally using HTML5 • Users complained about performance • In 2012, Facebook switch to native apps • The pundits announced the end of HTML5 as a mobile platform
  5. 5. The Pieces • PhoneGap • Backbone.js • jQuery Mobile
  6. 6. PhoneGap “PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.”
  7. 7. Backbone.js “Backbone.js gives structure to web applications by providing models with keyvalue binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.”

  8. 8. jQuery Mobile “A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”

  9. 9. PhoneGap
  10. 10. PhoneGap vs. Cordova • Adobe owns the name PhoneGap • They open-sourced the project to the Apache Foundation as Cordova • For most cases Cordova is pronounced PhoneGap
  11. 11. PhoneGap is not... • a turnkey system for turning websites into mobile apps • a way for non-developers to make mobile apps • a way to bypass any mobile app store • easy
  12. 12. PhoneGap is not the web • The HTML, CSS, and JavaScript files are all on the device • PhoneGap apps use the web mainly to upload/download data
  13. 13. Commands • cordova create - create your app’s folder • cordova platform add - add a device • cordova build - creates the project folders • cordova run - compile & deploy 
 (Android only)
  14. 14. Source Code • www - base source code • plugins - PhoneGap plugins • merges - device specific differences • platforms - generated device specific files
  15. 15. PhoneGap wrapper • Initializes itself • Creates a full screen browser view • Loads/executes the index.html file • Provides a “deviceready” event to HTML • Provides a way for HTML to bridge gap separating it from the device side
  16. 16. Backbone.js
  17. 17. JavaScript Sucks • Has objects but no classes • No information hiding facilities • No structure • jQuery made things worse, not better • Backbone brings order to chaos
  18. 18. Order from chaos • Backbone is a MV* framework • M - models • V - views • * - other stuff like collections and router • but no controller
  19. 19. Backbone Pieces • models • collections • views • router
  20. 20. Models • The basic data object • Very flexible • Built in functions
  21. 21. Collections • Collections of model objects • Events for changes • Accepts a URL for RESTful API
  22. 22. 3rd Party Collection • Often you need data from a 3rd party • Backbone makes this simple • In many cases you can only implement the GET verb • Use the parse() method to intercept the call and clean the data
  23. 23. Views • Render data the page • We use templates not string • Backbones has templating engine built in • but we Handlebars.js
  24. 24. The router • URL based routes • Not for bookmarking but for state maintenance • One router per app
  25. 25. jQuery Mobile
  26. 26. No UI Framework • PhoneGap uses HTML/CSS for UI • Makes building app difficult • jQuery Mobile is one possible solution • jqMobi, Sencha, iUI, etc.
  27. 27. A UI Framework • jQuery Mobile is a misunderstood project • Built on top of jQuery • Like jQuery UI, but for mobile • Mobile/touch friendly website
  28. 28. The Router Problem • Backbone is being used to handle routing • jQuery Mobile by default handles routing • This is a problem • To solve, we turn off JQM’s router
  29. 29. The Ready Problem • A PhoneGap app shouldn’t start until the “deviceready” event is received • A jQuery Mobile app shouldn’t start until the “pageinit” event is received • A PhoneGap/jQuery Mobile app needs to wait for both
  30. 30. Look & Feel • jQuery Mobile looks iOS 6-ish • Not everyone likes that look • You can customize via ThemeRoller • Or use a canned look & feel • The merges directory is best spot to device specific files
  31. 31. Resources