building mobile apps with phonegap and backbone
DESCRIPTION
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.TRANSCRIPT
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