Building Mobile Apps with PhoneGap & Backbone
28 January 2014
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 [email protected]
Free mobile tutorials with source code @ therockncoder.blogspot.com
Want more? Follow me, new tutorials are announced on Twitter first:
@therockncoder
Source code for my tutorials hosted on GitHub @
https://github.com/Rockncoder
Check out my videos: www.youtube.com/rockncoder
Agenda
• A Quick & Dirty JavaScript Overview
• What is PhoneGap?
• Building PhoneGap Apps
• Backbone
• Underscore
Agenda
• Models
• Collections
• Views
• The Router
• Templates
• Chocolate Chip
Agenda
• Lists
• Widgets
• Look and Feel
• Google Maps
• Debugging
• Summary
Quick & Dirty JavaScript
JavaScript Best Practices
• Avoid sloppy JavaScript
• Avoid the Global Space
• Encapsulate Code into Objects
• Use Design Patterns
Avoid Sloppy JavaScript
• Use “strict” mode
• Always use ‘===’ & ‘!==’
• Code in JavaScript not C#, Java, Ruby, etc.
• Use JSLint or JSHint
Avoid the Global Space
• Minimize use of global variables
• Use Name-spacing
• Use anonymous/immediate functions when appropriate
Use Design Patterns
• Singleton
• Chaining
• Revealing Module Structure
• + many more
Functions
• Functions are a first class type
• Like other types they can be passed and assigned freely
• Anonymous functions are used frequently
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
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
Deferred Objects
• A rather new JavaScript concept
• Used to register multiple callbacks
• The app uses jQuery’s version
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
Other Cordova Implementations
• appMobi
• Convertigo
• Icenium (Telerik)
• ViziApps
• Worklight (IBM)
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
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
Setting up your environment
• Setup Device specific frameworks:
• Install Xcode
• Install Android Dev Kit
• Install Node.js
• Download Cordova CLI
Building PhoneGap Apps
• cordova precedes all commands
• cordova create
• cordova
Underscore
• A utility belt library for JavaScript
• Excellent at manipulating objects and collections
• About 5kb minified and compressed
• Required for Backbone apps
Backbone
• A MV* Framework
• Note: There are no controllers hence no ‘C’
• More lightweight than Angular or Ember
• Requires jQuery and Underscore
Models
• The base object in Backbone
• Essentially a wrapper around a JavaScript object
• Use get and set command to access properties
Collections
• A collection of models
• Can associate a URL with a collection
• Backbone native support of RESTful API
• Can also use third party API
Views
• Backbone’s UI layer
• Also does much of what a controller would do in typical MVC
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
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
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
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
Lists
• Lists have classes which enhance their looks
• Classes exists to indicate:
• Navigation to another page
• Navigation to a details page
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
Look and Feel
• Switching the look and feel is easy, just change CSS files
• PhoneGap version 3+ automates the process
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
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
Location & Maps
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
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
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
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
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-pt1-theory-and-semantics
The Rock n Coder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder
