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
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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