phonegap mobile development

max firtman @firt firt.mobi

mobile+web developer mobilexweb.com blog @firt

who am I?

buenos aires ~ argentina

where?

patagonia football meat & wine tango

speaker

Image from my house

books

coming soon... also by @estellevw

.com

why mobile?

mobile

‣  absolutely personal ‣  +5 billions ‣  make us focus ‣  read our context... ‣  ... always... ‣  ... and everywhere.

then... what is the problem?

mobile is a minefield

Photo by World of Good (Flickr) Malvinas / Falklands Islands

lots of questions

Photo by wayneandwax (Flickr)

lots of questions

we need to learn

lots of platforms

mobile web appears

native vs

web

WAIT!

Are you sure?

native code vs

javascript

browser vs

installed apps & stores

lack of definitions

when we say mobile web

from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps

(browser or installed)

Callback

§  A platform to create native apps using web technologies

§  A JavaScript library

§  A native library for every platform

§  Compilation helpers

What is

§  Open Source

§  Multi-platform

§  Latests -even future- standards

§  First class apps

Features

WARNING!

§  PhoneGap is not a UI framework

§  PhoneGap doesn’t include a browser and or a rendering engine

§  PhoneGap doesn’t compile

§  Every platform need its own compilation

§  HTML5/CSS3 compatibility varies - www.mobilehtml5.org

Warning!

Compatibility

§  iOS (iPhone y iPad)

§  Android

§  BlackBerry 4.x, - 7

§  webOS

§  Symbian

§  Samsung Bada

§  Windows Phone 7.5

Compatibility (official 1.2)

§  BlackBerry PlayBook

§  Meego 1.2 Harmattan (Nokia N9)

Compatibility (non-official yet)

§  Apple AppStore

§  Android Market, Amazon AppStore

§  AppWorld

§  AppCatalog

§  Nokia Store

§  Samsung Apps

§  Windows Marketplace

Stores

§  Accelerometer

§  Camera (video/photo)

§  Compass

§  Contacts

§  File Management

Abilities

§  Geolocation

§  Multimedia

§  Network Information

§  Notification

§  Storage

Abilities

Abilities

Architecture

Requirements

§  Download PhoneGap www.phonegap.com

§  Use your HTML5 IDE

To develop

§  Install SDKs

§  Dreamweaver CS5.5 or IDEs

§  Or you can use PhoneGap Build

To compile

§  Xcode for iOS - available in Mac App Store

§  Android SDK - developer.android.com

§  BlackBerry WebWorks - blackberry.com/developers/browserdev/widgetsdk.jsp

§  Nokia Web Tools for Symbian - developer.nokia.com

§  Windows Phone SDK - microsoft.com/download

Compile ourselves

Get an account at build.phonegap.com

To compile on the cloud

§  Simulatos and Emulators (www.mobilexweb.com/emulators)

§  Real devices

§  Ripple Simulator

§  Can we use a desktop browser?

To test

Challenges & questions

we are using the browser engine... so

why package it?

is it safe to use an embedded web

view?

from http://blog.brightcove.com

§  HTML5 and CSS3 support

§  Debugging & Profiling

§  Performance & Memory usage

§  BlackBerry 5

Challenges

§  Screen sizes & orientations

§  DPIs

§  User Interface - should we emulate native UI?

§  Performance & JavaScript Best Practices

Challenges

Debug

§  Weinre (debug.phonegap.com)

§  iWebInspector for iOS (iwebinspector.com)

§  Pray?

Debug

Plugins

§  Native code to add more support

§  Every platform should have its native code

§  We need a plugin community

Plugins

Advices

§  Try to maintain one source code

§  Define CSS and JavaScript per platform for porting

§  Embrace differences

§  Best experience for every platform

Advices

some last advices

performance, performance

good practices

don’t be fanatic

photo by Kurt Christensen (flickr)

be multiplatform

be

futurefriend.ly

best experience for every context

best experience for every context

you can reach a good experience

firt.mobi twitter: @firt

mobilexweb.com

спасибо!