Building Mobile Apps with PhoneGap and

Backbone10 November 2013

Who am I?Hi, I am Troy. I have fun as a full stack programmer. I develop using ASP.NET MVC or Node.js on the backend and the web or mobile up front. !

I can be reached at: rockncoder@gmail.com

Who are you?I am assuming you are familiar with web programming and have some knowledge of JavaScript.

The End of HTML5 as a Platform?

• Facebook mobile apps on iOS and Android were originally using HTML5

• Users complained about performance

• In 2012, Facebook switch to native apps

• The pundits announced the end of HTML5 as a mobile platform

The Pieces

• PhoneGap

• Backbone.js

• jQuery Mobile

PhoneGap“PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.” http://phonegap.com/about/faq/

Backbone.js“Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.”http://documentcloud.github.io/backbone/

jQuery Mobile “A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”http://jquerymobile.com/

PhoneGap

PhoneGap vs. Cordova

• Adobe owns the name PhoneGap

• They open-sourced the project to the Apache Foundation as Cordova

• For most cases Cordova is pronounced PhoneGap

PhoneGap is not...

• a turnkey system for turning websites into mobile apps

• a way for non-developers to make mobile apps

• a way to bypass any mobile app store

• easy

PhoneGap is not the web

• The HTML, CSS, and JavaScript files are all on the device

• PhoneGap apps use the web mainly to upload/download data

Commands

• cordova create - create your app’s folder

• cordova platform add - add a device

• cordova build - creates the project folders

• cordova run - compile & deploy (Android only)

Source Code

• www - base source code

• plugins - PhoneGap plugins

• merges - device specific differences

• platforms - generated device specific files

PhoneGap wrapper

• Initializes itself

• Creates a full screen browser view

• Loads/executes the index.html file

• Provides a “deviceready” event to HTML

• Provides a way for HTML to bridge gap separating it from the device side

Backbone.js

JavaScript Sucks

• Has objects but no classes

• No information hiding facilities

• No structure

• jQuery made things worse, not better

• Backbone brings order to chaos

Order from chaos

• Backbone is a MV* framework

• M - models

• V - views

• * - other stuff like collections and router

• but no controller

Backbone Pieces

• models

• collections

• views

• router

Models

• The basic data object

• Very flexible

• Built in functions

Collections

• Collections of model objects

• Events for changes

• Accepts a URL for RESTful API

3rd Party Collection

• Often you need data from a 3rd party

• Backbone makes this simple

• In many cases you can only implement the GET verb

• Use the parse() method to intercept the call and clean the data

Views

• Render data the page

• We use templates not string

• Backbones has templating engine built in

• but we Handlebars.js

The router

• URL based routes

• Not for bookmarking but for state maintenance

• One router per app

jQuery Mobile

No UI Framework

• PhoneGap uses HTML/CSS for UI

• Makes building app difficult

• jQuery Mobile is one possible solution

• jqMobi, Sencha, iUI, etc.

A UI Framework

• jQuery Mobile is a misunderstood project

• Built on top of jQuery

• Like jQuery UI, but for mobile

• Mobile/touch friendly website

The Router Problem

• Backbone is being used to handle routing

• jQuery Mobile by default handles routing

• This is a problem

• To solve, we turn off JQM’s router

The Ready Problem

• A PhoneGap app shouldn’t start until the “deviceready” event is received

• A jQuery Mobile app shouldn’t start until the “pageinit” event is received

• A PhoneGap/jQuery Mobile app needs to wait for both

Look & Feel

• jQuery Mobile looks iOS 6-ish

• Not everyone likes that look

• You can customize via ThemeRoller

• Or use a canned look & feel

• The merges directory is best spot to device specific files

Resources