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