1.
Building Mobile Apps with
PhoneGap & Backbone
28 January 2014

2.
Who am I?
Hi, I’m Troy. I have been developing software for over 30
years. For the last 12 years I have been focused on web,
mobile web, and mobile development. I currently work at
Kelley Blue Book as a senior software engineer. My
opinions are my own.
!
I can be reached rockncoder@gmail.com

3.
Free mobile tutorials with source
code @ therockncoder.blogspot.com

4.
Want more? Follow me, new tutorials are
announced on Twitter first:
@therockncoder

5.
Source code for my tutorials hosted on
GitHub @
https://github.com/Rockncoder

6.
Check out my videos:
www.youtube.com/rockncoder

7.
Agenda
• A Quick & Dirty JavaScript Overview
• What is PhoneGap?
• Building PhoneGap Apps
• Backbone
• Underscore

8.
Agenda
• Models
• Collections
• Views
• The Router
• Templates
• Chocolate Chip

9.
Agenda
• Lists
• Widgets
• Look and Feel
• Google Maps
• Debugging
• Summary

10.
Quick & Dirty
JavaScript

11.
JavaScript Best
Practices
• Avoid sloppy JavaScript
• Avoid the Global Space
• Encapsulate Code into Objects
• Use Design Patterns

12.
Avoid Sloppy JavaScript
• Use “strict” mode
• Always use ‘===’ & ‘!==’
• Code in JavaScript not C#, Java, Ruby, etc.
• Use JSLint or JSHint

13.
Avoid the Global Space
• Minimize use of global variables
• Use Name-spacing
• Use anonymous/immediate functions when
appropriate

14.
Use Design Patterns
• Singleton
• Chaining
• Revealing Module Structure
• + many more

15.
Functions
• Functions are a first class type
• Like other types they can be passed and
assigned freely
• Anonymous functions are used frequently

16.
Objects
• Objects are some what like Key/Value
dictionaries in other languages
• The Key can be anything when wrapped in
quotes
• The Value can be any type including a
function

17.
Events
• Events allow for excellent separation of
concerns
• You can listen for system events or
• Trigger and respond to your own
• Many external libraries will communicate
via events

18.
Deferred Objects
• A rather new JavaScript concept
• Used to register multiple callbacks
• The app uses jQuery’s version

19.
What is PhoneGap?
• Created by Nitobi in 2009 at an Apple
Event
• Nitobi was acquired by Adobe
• Open sourced as Apache Cordova
• PhoneGap is only one implementation

20.
Other Cordova
Implementations
• appMobi
• Convertigo
• Icenium (Telerik)
• ViziApps
• Worklight (IBM)

21.
PhoneGap
• Current release is 3.3
• Node.js is a hard requirement since version
3.0
• It is all command line instead of IDE
• Recommend not upgrading your app to a
new version right away

22.
How it Works?
• Most device APIs include an internal web
browser
• PhoneGap uses this internal web browser
as its app canvas
• It adds more features to the navigator via
software which bridges the gap between
the internal web and the device

23.
Setting up your
environment
• Setup Device specific frameworks:
• Install Xcode
• Install Android Dev Kit
• Install Node.js
• Download Cordova CLI

24.
Building PhoneGap
Apps
• cordova precedes all commands
• cordova create
• cordova

25.
Underscore
• A utility belt library for JavaScript
• Excellent at manipulating objects and
collections
• About 5kb minified and compressed
• Required for Backbone apps

26.
Backbone
• A MV* Framework
• Note: There are no controllers hence no
‘C’
• More lightweight than Angular or Ember
• Requires jQuery and Underscore

27.
Models
• The base object in Backbone
• Essentially a wrapper around a JavaScript
object
• Use get and set command to access
properties

28.
Collections
• A collection of models
• Can associate a URL with a collection
• Backbone native support of RESTful API
• Can also use third party API

29.
Views
• Backbone’s UI layer
• Also does much of what a controller would
do in typical MVC

30.
The Router
• The router controls application state
• In a web site it would control what is in the
URL bar
• PhoneGap apps may lack a visible URL bar,
but it still exists

31.
Templates
• Templates render markup to the DOM in a
cookie cutter fashion
• Especially good for render collections to a
view
• Make it easier to create single page apps

32.
Chocolate Chip
• A UI Framework akin to jQuery Mobile or
even Bootstrap
• Does a great job of impersonating iOS 7,
Android 4+, and Windows Phone 8

33.
Lists
• You will work a lot with lists in mobile apps
• In CC, lists will have the look and feel of
the device
• Lists typically will need a bit of code to
make them fully functional

34.
Lists
• Lists have classes which enhance their
looks
• Classes exists to indicate:
• Navigation to another page
• Navigation to a details page

35.
Widgets
• CC uses a combo of its own stuff with
HTML5
• For example the Range Slider is simply an
HTML5 input type=range
• But a switch is a combination of HTML,
CSS3, and JavaScript

36.
Look and Feel
• Switching the look and feel is easy, just
change CSS files
• PhoneGap version 3+ automates the
process

37.
Look and Feel
• iOS 7: chui-ios-3.5.0.css
• Android 4+: chui-android-3.5.0.css
• Windows Phone 8: chui-win-3.5.0.css

38.
Look and Feel
• PhoneGap’s merges folder
• one directory for each supported device
• Its contents will be copied and overwrite
during the build command
• Name all of the css files identically
• Place in each appropriate folder

39.
Location & Maps

40.
Location
• Use HTML5 location services
• Both location watching and current
location used in the app
• Recommend giving users an alternative if
they prefer not sharing their location

41.
Google Maps
• Google Maps works on both iPhone and
Android without code change
• Google also provides reverse geocoding
API
• Reverse geocoding turns some part of an
address into a lat/long

42.
Debugging
• No getting around it debugging PhoneGap
apps suck
• Best work around I have is console.log and
using a browser
• Some like the Ripple emulator

43.
What We Learned
• Some JavaScript Best Practice
• How to use PhoneGap and Backbone to
make mobile apps
• How to use one codebase to support
multiple devices
• How to go from web to app

44.
Links
• http://jquery.com/
• http://documentcloud.github.io/backbone/
• http://www.chocolatechip-ui.com/
• https://developers.google.com/maps/
• http://blog.mediumequalsmessage.com/
promise-deferred-objects-in-javascript-pt1theory-and-semantics

45.
The Rock n Coder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder