HTML5 at one point held the promise of being the unifying platform for desktop and mobile devices. Then big name companies turned their backs on the platform in droves. But don't don't despair, HTML5 isn't dead, in fact it is still a great choice for many mobile applications. In this session, we will build a simple to understand but easy to enhance mobile app. We will use PhoneGap version 3.x, HTML5, CSS3, and JavaScript. While will be working on a Mac since it is required for iOS, users of other platforms should be able to follow along. The techniques show should also work with Windows Phone 8, Blackberry and other support PhoneGap platforms.

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