phonegap mobile development

66
max firtman @firt firt.mobi

Upload: maximiliano-firtman

Post on 17-May-2015

5.425 views

Category:

Technology


0 download

DESCRIPTION

Presentation in english of my talk abou mobile development using PhoneGap at toster in

TRANSCRIPT

Page 1: PhoneGap mobile development

max firtman @firt firt.mobi

Page 2: PhoneGap mobile development

mobile+web developer mobilexweb.com blog @firt

who am I?

Page 3: PhoneGap mobile development

buenos aires ~ argentina

where?

patagonia football meat & wine tango

Page 4: PhoneGap mobile development

speaker

Page 5: PhoneGap mobile development

Image from my house

books

Page 6: PhoneGap mobile development
Page 7: PhoneGap mobile development

coming soon... also by @estellevw

Page 8: PhoneGap mobile development
Page 9: PhoneGap mobile development

.com

Page 10: PhoneGap mobile development

why mobile?

Page 11: PhoneGap mobile development

mobile

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

Page 12: PhoneGap mobile development

then... what is the problem?

Page 13: PhoneGap mobile development

mobile is a minefield

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

Page 14: PhoneGap mobile development

lots of questions

Photo by wayneandwax (Flickr)

Page 15: PhoneGap mobile development

lots of questions

we need to learn

Page 16: PhoneGap mobile development

lots of platforms

Page 17: PhoneGap mobile development

mobile web appears

Page 18: PhoneGap mobile development

native vs

web

Page 19: PhoneGap mobile development

WAIT!

Page 20: PhoneGap mobile development

Are you sure?

Page 21: PhoneGap mobile development

native code vs

javascript

Page 22: PhoneGap mobile development

browser vs

installed apps & stores

Page 23: PhoneGap mobile development

lack of definitions

Page 24: PhoneGap mobile development

when we say mobile web

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

(browser or installed)

Page 25: PhoneGap mobile development

Callback

Page 26: PhoneGap mobile development
Page 27: PhoneGap mobile development

§  A platform to create native apps using web technologies

§  A JavaScript library

§  A native library for every platform

§  Compilation helpers

What is

Page 28: PhoneGap mobile development

§  Open Source

§  Multi-platform

§  Latests -even future- standards

§  First class apps

Features

Page 29: PhoneGap mobile development

WARNING!

Page 30: PhoneGap mobile development

§  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!

Page 31: PhoneGap mobile development

Compatibility

Page 32: PhoneGap mobile development

§  iOS (iPhone y iPad)

§  Android

§  BlackBerry 4.x, - 7

§  webOS

§  Symbian

§  Samsung Bada

§  Windows Phone 7.5

Compatibility (official 1.2)

Page 33: PhoneGap mobile development

§  BlackBerry PlayBook

§  Meego 1.2 Harmattan (Nokia N9)

Compatibility (non-official yet)

Page 34: PhoneGap mobile development

§  Apple AppStore

§  Android Market, Amazon AppStore

§  AppWorld

§  AppCatalog

§  Nokia Store

§  Samsung Apps

§  Windows Marketplace

Stores

Page 35: PhoneGap mobile development

§  Accelerometer

§  Camera (video/photo)

§  Compass

§  Contacts

§  File Management

Abilities

Page 36: PhoneGap mobile development

§  Geolocation

§  Multimedia

§  Network Information

§  Notification

§  Storage

Abilities

Page 37: PhoneGap mobile development

Abilities

Page 38: PhoneGap mobile development

Architecture

Page 39: PhoneGap mobile development
Page 40: PhoneGap mobile development

Requirements

Page 41: PhoneGap mobile development

§  Download PhoneGap www.phonegap.com

§  Use your HTML5 IDE

To develop

Page 42: PhoneGap mobile development

§  Install SDKs

§  Dreamweaver CS5.5 or IDEs

§  Or you can use PhoneGap Build

To compile

Page 43: PhoneGap mobile development

§  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

Page 44: PhoneGap mobile development

Get an account at build.phonegap.com

To compile on the cloud

Page 45: PhoneGap mobile development

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

§  Real devices

§  Ripple Simulator

§  Can we use a desktop browser?

To test

Page 46: PhoneGap mobile development

Challenges & questions

Page 47: PhoneGap mobile development

we are using the browser engine... so

why package it?

Page 48: PhoneGap mobile development

is it safe to use an embedded web

view?

Page 49: PhoneGap mobile development

from http://blog.brightcove.com

Page 50: PhoneGap mobile development

§  HTML5 and CSS3 support

§  Debugging & Profiling

§  Performance & Memory usage

§  BlackBerry 5

Challenges

Page 51: PhoneGap mobile development

§  Screen sizes & orientations

§  DPIs

§  User Interface - should we emulate native UI?

§  Performance & JavaScript Best Practices

Challenges

Page 52: PhoneGap mobile development

Debug

Page 53: PhoneGap mobile development

§  Weinre (debug.phonegap.com)

§  iWebInspector for iOS (iwebinspector.com)

§  Pray?

Debug

Page 54: PhoneGap mobile development

Plugins

Page 55: PhoneGap mobile development

§  Native code to add more support

§  Every platform should have its native code

§  We need a plugin community

Plugins

Page 56: PhoneGap mobile development

Advices

Page 57: PhoneGap mobile development

§  Try to maintain one source code

§  Define CSS and JavaScript per platform for porting

§  Embrace differences

§  Best experience for every platform

Advices

Page 58: PhoneGap mobile development

some last advices

Page 59: PhoneGap mobile development
Page 60: PhoneGap mobile development

performance, performance

Page 61: PhoneGap mobile development

good practices

Page 62: PhoneGap mobile development

don’t be fanatic

photo by Kurt Christensen (flickr)

Page 63: PhoneGap mobile development

be multiplatform

Page 64: PhoneGap mobile development

be

futurefriend.ly

Page 65: PhoneGap mobile development

best experience for every context

best experience for every context

Page 66: PhoneGap mobile development

you can reach a good experience

firt.mobi twitter: @firt

mobilexweb.com

спасибо!