Developing cross-platform mobile applications with

PhoneGap 

@ColinEberhardt

Why cross-platform?Introduction to PhoneGap

PhoneGap APIs, History of PhoneGap WP7

A simple PhoneGap applicationHow PhoneGap works

A more complex applicationKnockoutJS – MVVM, Property FinderiOS ‘view’

Is PhoneGap a viable approach?

Overview

Why cross platform?

http://bit.ly/gartner-wp7-share

Rewrite for each platform

What is PhoneGap?

HTML / JavaScript

Application

Phon

e AP

IsPh

one

APIs

AccelerometerCompassCameraCaptureConnectionContactsDevice

PhoneGap APIs

EventsFileGeolocationMediaNotificationStorage

PhoneGap, first stable release, Feb 2009Matt Lacey, August 2010, initial implementationPhoneGap for WP7 beta, Sept 2011Mango roll-out, Oct 2011Adobe acquires Nitobi, Oct 2011Property Finder enters Marketplace, Nov 2011

http://bit.ly/property-finder

WP7 fully supported, Jan 2012

PhoneGap for Windows Phone 7

Our first PhoneGap app

PhoneGap application template

Overview of the various files‘www’ folder - HTML / JS / image assetsGapSourceDictionary.xmlRegular WP7 Silverlight files

Simple modificationRead accelerometer data

How does it work?

acc.getCurrentPosition()

window.external.Notify()

PhoneGap C# code Acceleromete

r

getAcceleration()

DispatchResult()

ScriptNotify()

PhoneGap JavaScript

Multi-page applicationsSeparate HTML pagesJavaScript re-loaded between each pageNo state transferred from page-to-pageBack-button handling required

http://bit.ly/wp7-multipage-phonegap

Single-page applicationsPage updates as application state changes

‘think’ GMail

Applications styles

Twitter Search

http://knockoutjs.com/

Demo running FireFoxBack-button handling

CSS StylingDoes not support pressed state

Disable pinch / tap zoomRequires some ‘hacking’http://bit.ly/suppress-pinch

Gray highlightYou’re stuck with it!

Native look and feel

ProsMuch better than the pre-mango!http://bit.ly/ie9-mobile-features

Canvas, video, audioMany CSS3 features

ConsA lack of touch eventsThe ‘gray link’ issue

http://bit.ly/stackoverflow-gray-highlight

The WP7 IE9 browser

Property Finder (video)

The first HTML5-based WP7 app (I think!)Uncovered a few PhoneGap issues!

Knockout JS enables the use of MVVMThe ‘view’ code is currently WP7 specificFor iOS use a different view

http://jquerymobile.com/

Cross platform?

Property Finder iOS

PhoneGap Build

Property Finder iOS (video)

Set-up cost is lowPhoneGap build removes the need for a MacBrowser-based testing

Browser specific JavaScript / CSS codeOften handled by existing JavaScript librariesMore required if you want to have a native ‘feel’

Currently most people roll-out an iOS look to Android

WP7 IE9 browser is _almost_ good enoughWebkit browsers also have major flaws – overflow:scroll

Is PhoneGap a viable approach?

Is PhoneGap a viable approach?

Create an application with its own identity

JavaScript is ubiquitousRe-use code for a Windows 8 Metro AppRe-use code for web-app

JavaScript is relatively future proof

Offline applicationsUses the HTML5 app-cache

The FT iPad application is a good example

Frees you from the marketplace

The JavaScript advantage

It depends!Project budgetNumber of platforms targetedRichness of content being deliveredWillingness to depart from native UIs

Would I use it? Or go native?

MonoTouchC# with bindings to native controlshttp://xamarin.com/monotouch

Appcelerator TitaniumPreviously ran JavaScript in browser, now compiles to nativehttp://www.appcelerator.com/

Adobe Mobile AirAS3 running within the Air runtimehttp://www.adobe.com/products/air.html

PhoneGap alternatives

Questions?

Image credit: Lattice by ColinBroug (http://www.sxc.hu/photo/1359433)