phonegap: mobile applications with html, css and javascript

Brian LeRoux, NitobiPhoneGap: Mobile Applications with HTML, CSS and JavaScript

phonegap.comnitobi.com

[email protected]

twitter.com/brianlerouxbrianleroux.github.comwestcoastlogic.cometc.

http://phonegap.com

http://phonegap.com

mailto:[email protected]

mailto:[email protected]

Brian LeRoux / Nitobi Software / PhoneGap

pretty fucking rad conf right?


Nitobi Software

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

Mobile web


<3 JavaScript Esp.<3 FOSS

‣ CompleteUI‣ PhoneGap


interwebs

‣ its more than a serious tube


The mobile web opportunity

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


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 Lite, Web tech

Sorta cool right?

Palm HTML. CSS. JavaScript.

Exactly.


We’ve seen this before...

‣ History doomed DOOOMED to repeat itself.

‣ Platforms. Fragmentation.‣ Gopher. Etc.


Stand back! I know javascript.


Obligatory lolcat fail.

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


In the beginning...

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


Brock Whitten, solving problems


Our philosophy

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


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?”.


why are we doing this anyhow?


PhoneGap now

‣ iPhone‣ Android‣ Blackberry


PhoneGap soon

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


Site specific browsers

‣ XULRunner or Prism‣ Fluid‣ ..or maybe..‣ AIR or Titanium?‣ ...‣ maybe the browsers should let us do

this cool stuff?


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


How do you make money?

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


Problems we are not solving

‣ Open GL‣ Building a browser‣ Sub standard devices


HTML 5

‣ (sorta)


Code. Finally.

‣ lets get serious.

* this one is for you tom** thx for the graphic alexei

***


Geolocation


Accelerometer


Contacts


Vibration

‣ heh.


Make some noise

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


PhoneGap in the wild

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


Techniques

‣ 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, etc‣ custom fonts‣ sqlite‣ you cannot distinguish a well written

web app from a native app


Dashcode

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


iUI

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


Magic Framework

‣ looks hot‣ jQuery based‣ under dev


jqTouch

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


XUI

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


Roll your own?

‣ Simplest thing that could possibly work.

‣ Progressively enhance.‣ Repeat.


Quick note on testing..

‣ JSSpec‣ Firebug light‣ The devices themselves. (emulators do

not emulate the execution times)


PhoneGap in the future

‣ hoverboards mthrfkr


The internet of things.

‣ Its not just about phones.


Gecko rendering


Moar devices

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


An open toolchain

‣ gcc, make, etc


PhoneGap Simulator

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


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***


Resources

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

phonegap‣ twitter.‣ etc.

http://phonegap.com

http://phonegap.com

http://phonegap.pbwiki.com

http://phonegap.pbwiki.com

http://groups.google.com/group/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.


Thank you!

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

http://blogs.nitobi.com/brian








phonegap: mobile applications with html, css and javascript

Documents

mobile applications

bc gastown

early player