Intro

Get to know Phonegap

Getting started

Risks

Future

I love the web

• Open standards; View source rocks.
• OS lovers/haters: "Nobody" cares anymore!
• Super exciting times for the open web

Widget developer for 3 years

fokusOn by Nordija - Widget based IPTV

Mobile Webkit developer since last summer

Agnitio: Sales presentations in HTML5 for iPad.

We're looking for freelancers!

Tap5: Games, webapps, talks, workshops.

What's his face?

• I take photos
• Interesting/funny/awesome covers of famous songs + Spotify URL: Spotons
• Meetups: Øresund Frontend, Øresund Javascript, Copenhagen Veggie.

@kaptencybear b@ tap5.com flic.kr/kapten

"PhoneGap is an open source development framework for building cross-platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs."

http://www.phonegap.com

Better than native

• The web is the platform.
• Write in the same language, to the same API, for all devices.
• Javascript: cooler by the day. V8. Node. CommonJS.
• Cost beneficial && more time for fun.

Better than open web (currently)

Device API lets you do more stuff

-but Phonegap has an express goal to cease to exist!

Polyfilling the future

• PhoneGap is a progressive enhancement technique.
• PhoneGap is a reference implementation for future browsers.
• PhoneGap is for when you want Device Sensors/Data...for now.
• Installable web apps RIGHT NAO!

• August of 2008 introduced iPhone
• Mid-November of 2008 introduced Android
• End of November Blackberry 4.2
• August 2009 Windows Mobile
• September 2009 Symbian
• November of 2009 HP / Palm

(Nicked from Fullfrontal keynote slide 3)

stats from gartner

Platforms of your choice?

• iOS, Android today.
• Blackberry, Windows Phone 7, Symbian 3, WebOS, Samsung Bada tomorrow?

"It's a party"

• Apple iOS: Objective C
• Google Android: Dalvik Java
• RIM Blackberry: Widgets, Java
• HP / Palm WebOS: HTML, CSS & JS
• Windows Mobile: .Net C variants
• Windows 7: (same)
• MeeGo: .
• Symbian 3: .

Lowest denominator?

• iOS, Android, Blackberry, Symbian 3, WebOS, Samsung Bada: Mobile webkit. (Awesum!)
• Windows Phone 7: Internet Smellsplorer "between 7 and 8". HTML5 coming to Mango "this summer"! [1]
• Firefox on the horizon for Symbian and Android. Pray for WP7.

1

Standards

So many to choose from! Opera widgets. W3C widgets. Yahoo widgets.

Device sensors && Device data

W3C Device API Working Group

• Except Opera has huuuuge share in Symbian and older Blackberry devices.
• Firefox Mobile is on the horizon for Symbian and Android. PRAY FOR WP7!
• Windows Mobile is IE 4.
• Windows Phone is franken-stIE 7/8

But pretending it is a WebKit world...

• Canvas
• SVG
• CSS Transitions/Animations/Transforms
• SQLite

Still fxxed

• SVG: great on Blackberry 6.0! Only Blackberry 6.0.
• Canvas: great on webOS, Android. Slooooooow on iOS.
• ONLY CSS Transforms are hardware accelerated. And only on iOS.
• Android < 2.0 uses Google Gears. Blackberry < 6.0 has its own thing.
• SQLite being deprecated for IndexedDB

Supported DAP APIs

• Contacts
• Calendar
• Media Capture
• Sys Info
• Device
• Gallery

Currently unsupported DAP APIs

• Permissioning
• Messaging
• Policy Framework

DAP: Device APIs and Policy Working Group

DAP APIs at risk

• App Launcher
• Tasks
• Communications Log

Tested/Supported PhoneGap APIs

• Accelerometer
• Camera
• Contacts
• Device
• Events
• Geolocation
• Network
• Notification

Experimental/Forthcoming PhoneGap API

• XMPP
• File IO
• Compass
• Gyroscope
• Bluetooth
• Web Sockets
• Menuing

Micro frameworks

• xui - tiny dom framework
• zepto.js - minimalist js framework with JQuery-like syntax
• EmbedJS like a mini-Dojo

Frameworks with UI components

• Sencha Touch / jqTouch
• Jquery Mobile
• Jo
• Qooxdoo

Persisting stuff

• Lawnchair

Different devices are different

• Resolution
• Pixel density
• Screen size
• Hardware capabilities
• Software capabilities

etc.

Resolution and pixel density (retina)

• CSS media queries!
• <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css"/>
• <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="app.css"/>
• <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:2)" href="retina.css"/>

Which device is this?

• device.platform, device.version, device.name...
• WURFL - good in theory... even better, make your own list

• Get a mac / use OS X in a VM to build the iPhone apps
• For all others, Linux and Windows are welcome
• build.phonegap.com <- This is incredibly cool

I said it was cool!

• web tech not appropriate for everything
• there are bugs!
• many webkits (says PPK)
• api is in flux
• many screens/pixel densities (as always)
• docs are somewhat sparse
• getting started is hard, expensive

• Apple rejections
• Not native

• A solid CLI
• CommonJS require refactoring
• Fully documented Plugin API

“When you use your notebook computer and want to check if your flight is on time, do you download the United Airlines computer application, install it, and then lookup your flight? No, because it’s not 1995.”

Venturebeat

• a fixed tabbar IS NOT a business requirement
• nor is “native” scrolling/transitions

• know your audience
• do your research
• look at your stats
• consider what is trending for your audience

• 99.99999999999999% of apps are buttons and lists. maybe an effing slider. maybe.
• platform inconsistencies abstracted with adaptive code: persistence and dom
• consider your data not your decor

• buttons
• lists
• sliders

<button>I'm a native</button>

<ul>
    <li>Chunky bacon</li>
    <li>Boiled goose</li>
</ul>

<input type="range"/>

Currently only on WebKit

• Getting started screencasts (iPhone, Android, WebOS, Blackberry)

• API ref

• Brian LeRoux' Fullfrontal keynote