PhoneGap mobile development

max firtman@firt firt.mobi

who am I?mobile+web developermobilexweb.com blog @ﬁrt

where?buenos aires ~ argentina patagonia football meat & wine tango

speaker

booksImage from my house

coming soon...also by @estellevw

why mobile?

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

then... what is the problem?

mobile is amineﬁeld Photo by World of Good (Flickr) Malvinas / Falklands Islands

lots of questionsPhoto by wayneandwax (Flickr)

we need to learnlots of questions

lots of platforms

mobile web appears

native vs web

Are you sure?

native code vs javascript

browser vsinstalled apps & stores

lack of deﬁnitions

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

What is §  A platform to create native apps using web technologies §  A JavaScript library §  A native library for every platform §  Compilation helpers

Features§  Open Source§  Multi-platform§  Latests -even future- standards§  First class apps

WARNING!

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

Compatibility

Compatibility (oﬃcial 1.2)§  iOS (iPhone y iPad)§  Android§  BlackBerry 4.x, - 7§  webOS§  Symbian§  Samsung Bada§  Windows Phone 7.5

Compatibility (non-oﬃcial yet) §  BlackBerry PlayBook §  Meego 1.2 Harmattan (Nokia N9)

Stores§  Apple AppStore§  Android Market, Amazon AppStore§  AppWorld§  AppCatalog§  Nokia Store§  Samsung Apps§  Windows Marketplace

Abilities§  Accelerometer§  Camera (video/photo)§  Compass§  Contacts§  File Management

Abilities§  Geolocation§  Multimedia§  Network Information§  Notiﬁcation§  Storage

Abilities

Architecture

Requirements

To develop§  Download PhoneGap www.phonegap.com§  Use your HTML5 IDE

To compile§  Install SDKs§  Dreamweaver CS5.5 or IDEs§  Or you can use PhoneGap Build

Compile ourselves§  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

To compile on the cloudGet an account at build.phonegap.com

To test§  Simulatos and Emulators (www.mobilexweb.com/emulators)§  Real devices§  Ripple Simulator§  Can we use a desktop browser?

Challenges & questions

we are using thebrowser engine... so why package it?

is it safe to use an embedded web view?

from http://blog.brightcove.com

Challenges§  HTML5 and CSS3 support§  Debugging & Proﬁling§  Performance & Memory usage§  BlackBerry 5

Challenges§  Screen sizes & orientations§  DPIs§  User Interface - should we emulate native UI?§  Performance & JavaScript Best Practices

Debug§  Weinre (debug.phonegap.com)§  iWebInspector for iOS (iwebinspector.com)§  Pray?

Plugins

Plugins§  Native code to add more support§  Every platform should have its native code§  We need a plugin community

Advices

Advices§  Try to maintain one source code§  Deﬁne CSS and JavaScript per platform for porting§  Embrace diﬀerences§  Best experience for every platform

some last advices

performance,performance

good practices

don’t be fanaticphoto by Kurt Christensen (ﬂickr)

be multiplatform

be futurefriend.ly

best experience for every context

you can reach a good спасибо! experience ﬁrt.mobi twitter: @ﬁrt mobilexweb.com

http://paper.li	63
http://a0.twimg.com	14
http://us-w1.rockmelt.com	4
http://127.0.0.1	2
http://staging.fellownation.com	2
http://beta.jolicloud.com	1
http://fellownation.com	1

PhoneGap mobile development

by Maximiliano Firtman

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 87

Statistics

PhoneGap mobile development Presentation Transcript