Building Mobile Apps with PhoneGap and
Backbone10 November 2013
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: [email protected]
Who are you?I am assuming you are familiar with web programming and have some knowledge of JavaScript.
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
The Pieces
• PhoneGap
• Backbone.js
• jQuery Mobile
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/
Backbone.js“Backbone.js gives structure to web applications by providing models with key-value 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/
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/
PhoneGap
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
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
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
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)
Source Code
• www - base source code
• plugins - PhoneGap plugins
• merges - device specific differences
• platforms - generated device specific files
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
Backbone.js
JavaScript Sucks
• Has objects but no classes
• No information hiding facilities
• No structure
• jQuery made things worse, not better
• Backbone brings order to chaos
Order from chaos
• Backbone is a MV* framework
• M - models
• V - views
• * - other stuff like collections and router
• but no controller
Backbone Pieces
• models
• collections
• views
• router
Models
• The basic data object
• Very flexible
• Built in functions
Collections
• Collections of model objects
• Events for changes
• Accepts a URL for RESTful API
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
Views
• Render data the page
• We use templates not string
• Backbones has templating engine built in
• but we Handlebars.js
The router
• URL based routes
• Not for bookmarking but for state maintenance
• One router per app
jQuery Mobile
No UI Framework
• PhoneGap uses HTML/CSS for UI
• Makes building app difficult
• jQuery Mobile is one possible solution
• jqMobi, Sencha, iUI, etc.
A UI Framework
• jQuery Mobile is a misunderstood project
• Built on top of jQuery
• Like jQuery UI, but for mobile
• Mobile/touch friendly website
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
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
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
Resources
Top Related