Building Mobile Apps with PhoneGap and Backbone
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Building Mobile Apps with PhoneGap and Backbone

  • 6,626 views
Uploaded 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......

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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,626
On Slideshare
6,626
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
96
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Building Mobile Apps with PhoneGap and Backbone 10 November 2013
  • 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: rockncoder@gmail.com
  • 3. Who are you? I am assuming you are familiar with web programming and have some knowledge of JavaScript.
  • 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. The Pieces • PhoneGap • Backbone.js • jQuery Mobile
  • 6. PhoneGap “PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.” 
 http://phonegap.com/about/faq/
  • 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.”
 http://documentcloud.github.io/backbone/

  • 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.”
 http://jquerymobile.com/

  • 9. PhoneGap
  • 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. 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. 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. 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. Source Code • www - base source code • plugins - PhoneGap plugins • merges - device specific differences • platforms - generated device specific files
  • 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. Backbone.js
  • 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. Order from chaos • Backbone is a MV* framework • M - models • V - views • * - other stuff like collections and router • but no controller
  • 19. Backbone Pieces • models • collections • views • router
  • 20. Models • The basic data object • Very flexible • Built in functions
  • 21. Collections • Collections of model objects • Events for changes • Accepts a URL for RESTful API
  • 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. Views • Render data the page • We use templates not string • Backbones has templating engine built in • but we Handlebars.js
  • 24. The router • URL based routes • Not for bookmarking but for state maintenance • One router per app
  • 25. jQuery Mobile
  • 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. 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. 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. 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. 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. Resources