phonegap at jsconf

48
Brian LeRoux, Nitobi PhoneGap: Mobile Applications with HTML, CSS and JavaScript phonegap.com nitobi.com [email protected] twitter.com/brianleroux brianleroux.github.com westcoastlogic.com etc.

Upload: brian-leroux

Post on 09-May-2015

13.043 views

Category:

Technology


1 download

DESCRIPTION

Intro to PhoneGap and the mobile web by Nitobi software developer Brian LeRoux.

TRANSCRIPT

Page 1: PhoneGap at JSConf

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

phonegap.comnitobi.com

[email protected]

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

Page 2: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

pretty fucking rad conf right?

Page 3: PhoneGap at JSConf

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

Page 4: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

<3 JavaScript Esp.<3 FOSS

‣ CompleteUI‣ PhoneGap

Page 5: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

interwebs

‣ its more than a serious tube

Page 6: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

The mobile web opportunity

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

Page 7: PhoneGap at JSConf

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

Sorta cool right?

Palm HTML. CSS. JavaScript.

Exactly.

Page 8: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

We’ve seen this before...

‣ History doomed DOOOMED to repeat itself.

‣ Platforms. Fragmentation.‣ Gopher. Etc.

Page 9: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Stand back! I know javascript.

Page 10: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Obligatory lolcat fail.

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

Page 11: PhoneGap at JSConf

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.

Page 12: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Brock Whitten, solving problems

Page 13: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Our philosophy

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

Page 14: PhoneGap at JSConf

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

Page 15: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

why are we doing this anyhow?

Page 16: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap now

‣ iPhone‣ Android‣ Blackberry

Page 17: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap soon

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

Page 18: PhoneGap at JSConf

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?

Page 19: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

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

Page 20: PhoneGap at JSConf

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.

Page 21: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Problems we are not solving

‣ Open GL‣ Building a browser‣ Sub standard devices

Page 22: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

HTML 5

‣ (sorta)

Page 23: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Code. Finally.

‣ lets get serious.

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

***

Page 24: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Geolocation

Page 25: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Accelerometer

Page 26: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Contacts

Page 27: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Vibration

‣ heh.

Page 28: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Make some noise

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

Page 29: PhoneGap at JSConf

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

Page 30: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Techniques

‣ PhoneGap apps are just web apps.

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

Page 31: PhoneGap at JSConf

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

Page 32: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Dashcode

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

Page 33: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

iUI

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

Page 34: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Magic Framework

‣ looks hot‣ jQuery based‣ under dev

Page 35: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

jqTouch

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

Page 36: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

XUI

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

Page 37: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Roll your own?

‣ Simplest thing that could possibly work.

‣ Progressively enhance.‣ Repeat.

Page 38: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Quick note on testing..

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

not emulate the execution times)

Page 39: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap in the future

‣ hoverboards mthrfkr

Page 40: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

The internet of things.

‣ Its not just about phones.

Page 41: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Gecko rendering

Page 42: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Moar devices

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

Page 43: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

An open toolchain

‣ gcc, make, etc

Page 44: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

PhoneGap Simulator

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

Page 45: PhoneGap at JSConf

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

Page 46: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Resources

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

phonegap‣ twitter.‣ etc.

Page 47: PhoneGap at JSConf

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.

Page 48: PhoneGap at JSConf

Brian LeRoux / Nitobi Software / PhoneGap

Thank you!

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