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 rockncoder@gmail.com

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