PhoneGap: Mobile Applications with HTML, CSS and JavaScript
-
Upload
best-tech-videos -
Category
Documents
-
view
128 -
download
3
description
Transcript of PhoneGap: Mobile Applications with HTML, CSS and JavaScript
![Page 1: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/1.jpg)
Brian LeRoux, NitobiPhoneGap: Mobile Applications with HTML, CSS and JavaScript
phonegap.comnitobi.com
twitter.com/brianlerouxbrianleroux.github.comwestcoastlogic.cometc.
![Page 2: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/2.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
pretty fucking rad conf right?
![Page 3: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/3.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/4.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
<3 JavaScript Esp.<3 FOSS
‣ CompleteUI‣ PhoneGap
![Page 5: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/5.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
interwebs
‣ its more than a serious tube
![Page 6: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/6.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
The mobile web opportunity
‣ 1 Billion television sets worldwide.‣ 2 Billion web enabled mobile devices.
![Page 7: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/7.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/8.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
We’ve seen this before...
‣ History doomed DOOOMED to repeat itself.
‣ Platforms. Fragmentation.‣ Gopher. Etc.
![Page 9: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/9.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Stand back! I know javascript.
![Page 10: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/10.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Obligatory lolcat fail.
‣ Platforms don’t scale.‣ This internet thing does.‣ internets? ftw! LULZ
![Page 11: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/11.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/12.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Brock Whitten, solving problems
![Page 13: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/13.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Our philosophy
‣ The purpose of PhoneGap is for PhoneGap to cease to exist.
![Page 14: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/14.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/15.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
why are we doing this anyhow?
![Page 16: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/16.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
PhoneGap now
‣ iPhone‣ Android‣ Blackberry
![Page 17: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/17.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
PhoneGap soon
‣ iPhone‣ Android‣ Blackberry‣ Nokia‣ Windows Mobile‣ Palm Pre
![Page 18: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/18.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/19.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/20.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/21.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Problems we are not solving
‣ Open GL‣ Building a browser‣ Sub standard devices
![Page 22: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/22.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
HTML 5
‣ (sorta)
![Page 23: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/23.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Code. Finally.
‣ lets get serious.
* this one is for you tom** thx for the graphic alexei
***
![Page 24: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/24.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Geolocation
![Page 25: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/25.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Accelerometer
![Page 26: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/26.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Contacts
![Page 27: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/27.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Vibration
‣ heh.
![Page 28: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/28.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Make some noise
‣ phone beep events‣ phone lights blinky‣ any audio‣ most video
![Page 29: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/29.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/30.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Techniques
‣ PhoneGap apps are just web apps.
‣ HTML‣ CSS‣ JS‣ ...and you.
![Page 31: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/31.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/32.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Dashcode
‣ WTF!!!‣ Totally got overshadowed by the SDK‣ Amazing ‣ iPhone only.
![Page 33: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/33.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
iUI
‣ old school‣ not super well maintained‣ no css transitions‣ kinda clunky approach
![Page 34: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/34.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Magic Framework
‣ looks hot‣ jQuery based‣ under dev
![Page 35: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/35.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
jqTouch
‣ beautiful uis‣ jQuery based‣ fast (once it loads)
![Page 36: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/36.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
XUI
‣ experimental fun‣ jQuery inspired‣ lightweight‣ no gui controls. thats ur problem
![Page 37: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/37.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Roll your own?
‣ Simplest thing that could possibly work.
‣ Progressively enhance.‣ Repeat.
![Page 38: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/38.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/39.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
PhoneGap in the future
‣ hoverboards mthrfkr
![Page 40: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/40.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
The internet of things.
‣ Its not just about phones.
![Page 41: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/41.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Gecko rendering
![Page 42: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/42.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Moar devices
‣ Nokia‣ Windows mobile‣ Palm Pre ‣ Blackberry pls pls wtf pls‣ Nintendo DS?
![Page 43: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/43.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
An open toolchain
‣ gcc, make, etc
![Page 44: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/44.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
PhoneGap Simulator
‣ emulator‣ simulator‣ stimulator‣ ..wait, what?
![Page 45: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/45.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/46.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Resources
‣ http://phonegap.com‣ http://phonegap.pbwiki.com‣ http://groups.google.com/group/
phonegap‣ twitter.‣ etc.
![Page 47: PhoneGap: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/47.jpg)
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: Mobile Applications with HTML, CSS and JavaScript](https://reader033.fdocuments.us/reader033/viewer/2022061118/5468e335b4af9ffd498b45b3/html5/thumbnails/48.jpg)
Brian LeRoux / Nitobi Software / PhoneGap
Thank you!
‣ http://phonegap.com‣ http://blogs.nitobi.com/brian‣ http://brianleroux.github.com‣ http://westcoastlogic.com