Sunteți pe pagina 1din 48
Brian LeRoux, Nitobi PhoneGap: Mobile Applications with HTML, CSS and JavaScript phonegap.com nitobi.com brian@nitobi.com
Brian LeRoux, Nitobi PhoneGap: Mobile Applications with HTML, CSS and JavaScript phonegap.com nitobi.com brian@nitobi.com
Brian LeRoux, Nitobi
Brian LeRoux, Nitobi

PhoneGap: Mobile Applications with HTML, CSS and JavaScript

nitobi.com

twitter.com/brianleroux

brianleroux.github.com

westcoastlogic.com

etc.

pretty fucking rad conf right?

pretty fucking rad conf right? Brian LeRoux / Nitobi Software / PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

pretty fucking rad conf right? Brian LeRoux / Nitobi Software / PhoneGap

Nitobi Software

‣ Founded in 1998 ‣ 15 employees ‣ Based in Vancouver, BC (Gastown) ‣ ^---Canada,
‣ Founded in 1998
‣ 15 employees
‣ Based in Vancouver, BC (Gastown)
‣ ^---Canada, eh.
‣ Early player in JavaScript, Ajax, AIR,
Mobile web

Brian LeRoux / Nitobi Software / PhoneGap

‣ ^---Canada, eh. ‣ Early player in JavaScript, Ajax, AIR, Mobile web Brian LeRoux / Nitobi

<3 JavaScript Esp.<3 FOSS

‣ CompleteUI ‣ PhoneGap
‣ CompleteUI
‣ PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

<3 JavaScript Esp.<3 FOSS ‣ CompleteUI ‣ PhoneGap Brian LeRoux / Nitobi Software / PhoneGap

interwebs

‣ its more than a serious tube
‣ its more than a serious tube

Brian LeRoux / Nitobi Software / PhoneGap

interwebs ‣ its more than a serious tube Brian LeRoux / Nitobi Software / PhoneGap

The mobile web opportunity

‣ 1 Billion television sets worldwide. ‣ 2 Billion web enabled mobile devices.
‣ 1 Billion television sets worldwide.
‣ 2 Billion web enabled mobile devices.

Brian LeRoux / Nitobi Software / PhoneGap

1 Billion television sets worldwide. ‣ 2 Billion web enabled mobile devices. Brian LeRoux / Nitobi

The situation room

Platform Language Awesome iPhone Objective C Not so much. Android Java (Dalvik VM) Ok. Blackberry
Platform
Language
Awesome
iPhone
Objective C
Not so much.
Android
Java (Dalvik VM)
Ok.
Blackberry
Java (Who knows.)
Bad scene.
Windows Mobile
.NET and/or C++
Nuff said.
Nokia
C++, Java, Flash
Lite,Web tech
Sorta cool right?
Palm
HTML. CSS.
JavaScript.
Exactly.

Brian LeRoux / Nitobi Software / PhoneGap

Flash Lite,Web tech Sorta cool right? Palm HTML. CSS. JavaScript. Exactly. Brian LeRoux / Nitobi Software

We’ve seen this before

‣ History doomed DOOOMED to repeat itself. ‣ Platforms. Fragmentation. ‣ Gopher. Etc.
‣ History doomed DOOOMED to repeat
itself.
‣ Platforms. Fragmentation.
‣ Gopher. Etc.

Brian LeRoux / Nitobi Software / PhoneGap

DOOOMED to repeat itself. ‣ Platforms. Fragmentation. ‣ Gopher. Etc. Brian LeRoux / Nitobi Software /

Stand back! I know javascript.

Stand back! I know javascript. Brian LeRoux / Nitobi Software / PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

Stand back! I know javascript. Brian LeRoux / Nitobi Software / PhoneGap

Obligatory lolcat fail.

‣ Platforms don’t scale. ‣ This internet thing does. ‣ internets? ftw! LULZ
‣ Platforms don’t scale.
‣ This internet thing does.
‣ internets? ftw! LULZ

Brian LeRoux / Nitobi Software / PhoneGap

don’t scale. ‣ This internet thing does. ‣ internets? ftw! LULZ Brian LeRoux / Nitobi Software

In the beginning

‣ There was beer. ‣ Then the iPhone was released! ‣ Web tech ftw! ‣
‣ There was beer.
‣ Then the iPhone was released!
‣ Web tech ftw!
‣ Beer!
‣ Wait: Objective C.
‣ Dudeman. Time for more beer.
‣ Etc.

Brian LeRoux / Nitobi Software / PhoneGap

‣ Beer! ‣ Wait: Objective C. ‣ Dudeman. Time for more beer. ‣ Etc. Brian LeRoux

Brock Whitten, solving problems

Brock Whitten, solving problems Brian LeRoux / Nitobi Software / PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

Brock Whitten, solving problems Brian LeRoux / Nitobi Software / PhoneGap

Our philosophy

‣ The purpose of PhoneGap is for PhoneGap to cease to exist.
‣ The purpose of PhoneGap is for
PhoneGap to cease to exist.

Brian LeRoux / Nitobi Software / PhoneGap

Our philosophy ‣ The purpose of PhoneGap is for PhoneGap to cease to exist. Brian LeRoux

So

what?

‣ What can PhoneGap do for you? ‣ Anything the phone can do? Fuck off!
‣ What can PhoneGap do for you?
‣ Anything the phone can do? Fuck off!
‣ No shit! You can now rock out with
renewed authority. MIT style.
‣ Make your mobile device your minion.
Your slave. You ask it to jump and it
responds, “Let this application use
your current location?”.

Brian LeRoux / Nitobi Software / PhoneGap

jump and it responds, “Let this application use your current location?”. Brian LeRoux / Nitobi Software

why are we doing this anyhow?

why are we doing this anyhow? Brian LeRoux / Nitobi Software / PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

why are we doing this anyhow? Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap now

‣ iPhone ‣ Android ‣ Blackberry
‣ iPhone
‣ Android
‣ Blackberry

Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap now ‣ iPhone ‣ Android ‣ Blackberry Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap soon

‣ iPhone ‣ Android ‣ Blackberry ‣ Nokia ‣ Windows Mobile ‣ Palm Pre
‣ iPhone
‣ Android
‣ Blackberry
‣ Nokia
‣ Windows Mobile
‣ Palm Pre

Brian LeRoux / Nitobi Software / PhoneGap

iPhone ‣ Android ‣ Blackberry ‣ Nokia ‣ Windows Mobile ‣ Palm Pre Brian LeRoux /

Site specific browsers

‣ XULRunner or Prism ‣ Fluid ‣ or maybe ‣ AIR or Titanium? ‣ ‣
XULRunner or Prism
Fluid
or
maybe
AIR or Titanium?
maybe the browsers should let us do
this cool stuff?

Brian LeRoux / Nitobi Software / PhoneGap

or Titanium? ‣ ‣ maybe the browsers should let us do this cool stuff? Brian LeRoux

App stores

‣ Apple ‣ Google Android ‣ Blackberry ‣ Windows Mobile (skymarket) ‣ Nokia (ovi) ‣
‣ Apple
‣ Google Android
‣ Blackberry
‣ Windows Mobile (skymarket)
‣ Nokia (ovi)
‣ Palm
‣ Nintendo (this is awesome btw)

Brian LeRoux / Nitobi Software / PhoneGap

(skymarket) ‣ Nokia (ovi) ‣ Palm ‣ Nintendo (this is awesome btw) Brian LeRoux / Nitobi

How do you make money?

‣ Advertising ‣ Freemium ‣ Subscription ‣ Value add type apps ‣ iFart type apps
‣ Advertising
‣ Freemium
‣ Subscription
‣ Value add type apps
‣ iFart type apps
‣ Niche type apps
‣ Building apps for others.

Brian LeRoux / Nitobi Software / PhoneGap

apps ‣ iFart type apps ‣ Niche type apps ‣ Building apps for others. Brian LeRoux

Problems we are not solving

‣ Open GL ‣ Building a browser ‣ Sub standard devices
‣ Open GL
‣ Building a browser
‣ Sub standard devices

Brian LeRoux / Nitobi Software / PhoneGap

we are not solving ‣ Open GL ‣ Building a browser ‣ Sub standard devices Brian

HTML 5

‣ (sorta)
‣ (sorta)

Brian LeRoux / Nitobi Software / PhoneGap

HTML 5 ‣ (sorta) Brian LeRoux / Nitobi Software / PhoneGap

Code. Finally.

‣ lets get serious. * ** * this one is for you tom ** thx
‣ lets get serious.
*
**
* this one is for you tom
** thx for the graphic alexei

Brian LeRoux / Nitobi Software / PhoneGap

get serious. * ** * this one is for you tom ** thx for the graphic

Geolocation

Geolocation Brian LeRoux / Nitobi Software / PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

Geolocation Brian LeRoux / Nitobi Software / PhoneGap

Accelerometer

Accelerometer Brian LeRoux / Nitobi Software / PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

Accelerometer Brian LeRoux / Nitobi Software / PhoneGap

Contacts

Contacts Brian LeRoux / Nitobi Software / PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

Contacts Brian LeRoux / Nitobi Software / PhoneGap

Vibration

‣ heh.
‣ heh.

Brian LeRoux / Nitobi Software / PhoneGap

Vibration ‣ heh. Brian LeRoux / Nitobi Software / PhoneGap

Make some noise

‣ phone beep events ‣ phone lights blinky ‣ any audio ‣ most video
‣ phone beep events
‣ phone lights blinky
‣ any audio
‣ most video

Brian LeRoux / Nitobi Software / PhoneGap

‣ phone beep events ‣ phone lights blinky ‣ any audio ‣ most video Brian LeRoux

PhoneGap in the wild

‣ Over 50 apps in the store. ‣ Very likely many more. ‣ Lots of
‣ Over 50 apps in the store.
‣ Very likely many more.
‣ Lots of forks too
‣ http://github.com/sintaxi/phonegap

Brian LeRoux / Nitobi Software / PhoneGap

likely many more. ‣ Lots of forks too ‣ http://github.com/sintaxi/phonegap Brian LeRoux / Nitobi Software /

Techniques

‣ PhoneGap apps are just web apps. ‣ HTML ‣ CSS ‣ JS ‣ and
‣ PhoneGap apps are just web apps.
‣ HTML
‣ CSS
‣ JS
‣ and
you.

Brian LeRoux / Nitobi Software / PhoneGap

‣ PhoneGap apps are just web apps. ‣ HTML ‣ CSS ‣ JS ‣ and you.

Webkit is winning

‣ easily the most advanced, fastest, ass kicking, name taking browser ‣ css transitions, animations,
‣ easily the most advanced, fastest, ass
kicking, name taking browser
‣ css transitions, animations, etc
‣ custom fonts
‣ sqlite
‣ you cannot distinguish a well written
web app from a native app

Brian LeRoux / Nitobi Software / PhoneGap

‣ sqlite ‣ you cannot distinguish a well written web app from a native app Brian

Dashcode

‣ WTF!!! ‣ Totally got overshadowed by the SDK ‣ Amazing ‣ iPhone only.
‣ WTF!!!
‣ Totally got overshadowed by the SDK
‣ Amazing
‣ iPhone only.

Brian LeRoux / Nitobi Software / PhoneGap

WTF!!! ‣ Totally got overshadowed by the SDK ‣ Amazing ‣ iPhone only. Brian LeRoux /

iUI

‣ old school ‣ not super well maintained ‣ no css transitions ‣ kinda clunky
‣ old school
‣ not super well maintained
‣ no css transitions
‣ kinda clunky approach

Brian LeRoux / Nitobi Software / PhoneGap

‣ not super well maintained ‣ no css transitions ‣ kinda clunky approach Brian LeRoux /

Magic Framework

‣ looks hot ‣ jQuery based ‣ under dev
‣ looks hot
‣ jQuery based
‣ under dev

Brian LeRoux / Nitobi Software / PhoneGap

Magic Framework ‣ looks hot ‣ jQuery based ‣ under dev Brian LeRoux / Nitobi Software

jqTouch

‣ beautiful uis ‣ jQuery based ‣ fast (once it loads)
‣ beautiful uis
‣ jQuery based
‣ fast (once it loads)

Brian LeRoux / Nitobi Software / PhoneGap

jqTouch ‣ beautiful uis ‣ jQuery based ‣ fast (once it loads) Brian LeRoux / Nitobi

XUI

‣ experimental fun ‣ jQuery inspired ‣ lightweight ‣ no gui controls. thats ur problem
‣ experimental fun
‣ jQuery inspired
‣ lightweight
‣ no gui controls. thats ur problem

Brian LeRoux / Nitobi Software / PhoneGap

fun ‣ jQuery inspired ‣ lightweight ‣ no gui controls. thats ur problem Brian LeRoux /

Roll your own?

‣ Simplest thing that could possibly work. ‣ Progressively enhance. ‣ Repeat.
‣ Simplest thing that could possibly
work.
‣ Progressively enhance.
‣ Repeat.

Brian LeRoux / Nitobi Software / PhoneGap

thing that could possibly work. ‣ Progressively enhance. ‣ Repeat. Brian LeRoux / Nitobi Software /

Quick note on testing

‣ JSSpec ‣ Firebug light ‣ The devices themselves. (emulators do not emulate the execution
‣ JSSpec
‣ Firebug light
‣ The devices themselves. (emulators do
not emulate the execution times)

Brian LeRoux / Nitobi Software / PhoneGap

‣ The devices themselves. (emulators do not emulate the execution times) Brian LeRoux / Nitobi Software

PhoneGap in the future

‣ hoverboards mthrfkr
‣ hoverboards mthrfkr

Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap in the future ‣ hoverboards mthrfkr Brian LeRoux / Nitobi Software / PhoneGap

The internet of things.

‣ Its not just about phones.
‣ Its not just about phones.

Brian LeRoux / Nitobi Software / PhoneGap

The internet of things. ‣ Its not just about phones. Brian LeRoux / Nitobi Software /

Gecko rendering

Gecko rendering Brian LeRoux / Nitobi Software / PhoneGap

Brian LeRoux / Nitobi Software / PhoneGap

Gecko rendering Brian LeRoux / Nitobi Software / PhoneGap

Moar devices

‣ Nokia ‣ Windows mobile ‣ Palm Pre ‣ Blackberry pls pls wtf pls ‣
‣ Nokia
‣ Windows mobile
‣ Palm Pre
‣ Blackberry pls pls wtf pls
‣ Nintendo DS?

Brian LeRoux / Nitobi Software / PhoneGap

Windows mobile ‣ Palm Pre ‣ Blackberry pls pls wtf pls ‣ Nintendo DS? Brian LeRoux

An open toolchain

‣ gcc, make, etc
‣ gcc, make, etc

Brian LeRoux / Nitobi Software / PhoneGap

An open toolchain ‣ gcc, make, etc Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap Simulator

‣ emulator ‣ simulator ‣ stimulator ‣ wait, what?
‣ emulator
‣ simulator
‣ stimulator
wait,
what?

Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap Simulator ‣ emulator ‣ simulator ‣ stimulator ‣ wait, what? Brian LeRoux / Nitobi Software

New interfaces

‣ speech (sphinx wrapper) ‣ sqlite wrapper ala couch ‣ sockets (fuck ya) ‣ file
‣ speech (sphinx wrapper)
‣ sqlite wrapper ala couch
‣ sockets (fuck ya)
‣ file io
‣ sms and telephone api (undocumented)
‣ facebook connect (nifty contrib)
‣ native controls***

Brian LeRoux / Nitobi Software / PhoneGap

api (undocumented) ‣ facebook connect (nifty contrib) ‣ native controls*** Brian LeRoux / Nitobi Software /

Resources

‣ http://phonegap.com ‣ http://phonegap.pbwiki.com ‣ http://groups.google.com/group/ phonegap ‣ twitter. ‣
‣ http://phonegap.com
‣ http://phonegap.pbwiki.com
‣ http://groups.google.com/group/
phonegap
‣ twitter.
‣ etc.

Brian LeRoux / Nitobi Software / PhoneGap

‣ http://groups.google.com/group/ phonegap ‣ twitter. ‣ etc. Brian LeRoux / Nitobi Software / PhoneGap

Get involved

‣ docs! ‣ tests and specs pls ‣ code and ideas most welcome ‣ fork
‣ docs!
‣ tests and specs pls
‣ code and ideas most welcome
‣ fork it and hack it
‣ build something for yourself
‣ have fun and talk about it on the
mailing list, ur blawg, twitter, etc.

Brian LeRoux / Nitobi Software / PhoneGap

‣ have fun and talk about it on the mailing list, ur blawg, twitter, etc. Brian

Thank you!

‣ http://phonegap.com ‣ http://blogs.nitobi.com/brian ‣ http://brianleroux.github.com ‣
‣ http://phonegap.com
‣ http://blogs.nitobi.com/brian
‣ http://brianleroux.github.com
‣ http://westcoastlogic.com

Brian LeRoux / Nitobi Software / PhoneGap

‣ http://brianleroux.github.com ‣ http://westcoastlogic.com Brian LeRoux / Nitobi Software / PhoneGap