You are on page 1of 48

Brian LeRoux, Nitobi

PhoneGap: Mobile Applications with HTML, CSS and JavaScript

phonegap.com
nitobi.com

brian@nitobi.com

twitter.com/brianleroux
brianleroux.github.com
westcoastlogic.com
etc.
pretty fucking rad conf right?

Brian LeRoux / Nitobi Software / PhoneGap


Nitobi Software
‣ 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


<3 JavaScript Esp.<3 FOSS
‣ CompleteUI
‣ PhoneGap

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.

Brian LeRoux / Nitobi Software / PhoneGap


The situation room
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 Sorta cool right?


Lite, Web tech
Palm HTML. CSS. Exactly.
JavaScript.

Brian LeRoux / Nitobi Software / PhoneGap


We’ve seen this before...
‣ History doomed DOOOMED to repeat
itself.
‣ Platforms. Fragmentation.
‣ Gopher. Etc.

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

Brian LeRoux / Nitobi Software / PhoneGap


In the beginning...
‣ 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
Brock Whitten, solving problems

Brian LeRoux / Nitobi Software / PhoneGap


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

Brian LeRoux / Nitobi Software / PhoneGap


So.. what?
‣ 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


why are we doing this anyhow?

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

Brian LeRoux / Nitobi Software / PhoneGap


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

Brian LeRoux / Nitobi Software / PhoneGap


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

Brian LeRoux / Nitobi Software / PhoneGap


How do you make money?
‣ Advertising
‣ Freemium
‣ Subscription
‣ Value add type apps
‣ iFart type apps
‣ Niche type apps
‣ Building apps for others.
Brian LeRoux / Nitobi Software / PhoneGap
Problems we are not solving
‣ Open GL
‣ Building a browser
‣ Sub standard devices

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 for the graphic alexei

Brian LeRoux / Nitobi Software / PhoneGap


Geolocation

Brian LeRoux / Nitobi Software / PhoneGap


Accelerometer

Brian LeRoux / Nitobi Software / PhoneGap


Contacts

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

Brian LeRoux / Nitobi Software / PhoneGap


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

Brian LeRoux / Nitobi Software / PhoneGap


Techniques
‣ PhoneGap apps are just web apps.

‣ HTML
‣ CSS
‣ JS
‣ ...and you.

Brian LeRoux / Nitobi Software / PhoneGap


Webkit is winning
‣ 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


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

Brian LeRoux / Nitobi Software / PhoneGap


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

Brian LeRoux / Nitobi Software / PhoneGap


Magic Framework
‣ looks hot
‣ jQuery based
‣ under dev

Brian LeRoux / Nitobi Software / PhoneGap


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

Brian LeRoux / Nitobi Software / PhoneGap


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

Brian LeRoux / Nitobi Software / PhoneGap


Roll your own?
‣ Simplest thing that could possibly
work.
‣ Progressively enhance.
‣ Repeat.

Brian LeRoux / Nitobi Software / PhoneGap


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

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.

Brian LeRoux / Nitobi Software / PhoneGap


Gecko rendering

Brian LeRoux / Nitobi Software / PhoneGap


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

Brian LeRoux / Nitobi Software / PhoneGap


An open toolchain
‣ gcc, make, etc

Brian LeRoux / Nitobi Software / PhoneGap


PhoneGap Simulator
‣ emulator
‣ simulator
‣ stimulator
‣ ..wait, what?

Brian LeRoux / Nitobi Software / PhoneGap


New interfaces
‣ 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
Resources
‣ http://phonegap.com
‣ http://phonegap.pbwiki.com
‣ 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 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


Thank you!

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

Brian LeRoux / Nitobi Software / PhoneGap