phonegap: mobile applications with html, css and javascript

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

phonegap.comnitobi.com

brian@nitobi.com

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

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.

‣ 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)

‣ 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.

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

phonegap: mobile applications with html, css and javascript

mobile applications

bc gastown

early player

Documents

html,css and javascript

javascript and css libraries

adobe® coldfusion® 9...

javascript dom and css

cours android - jquery mobile › uploads › cours ›...

css - github pagesyangliang.github.io/ppt/php/03-css.pdf ·...

html css javascript

html, css, and javascript mobile development for dummies ...

4. html css javascript basics

optimización javascript y css

html javascript and css

cc1003n week 6 more css and javascript.. objectives: ●...

php & javascript & css coding style

transitional css and javascript strategies

native javascript apps with phonegap 11-04-2014 codemotion...

html,css and javascript sams

drupalgap mobile apps & web apps for drupal...

website development process css javascript

html css and javascript

html, css, javascript