Brian LeRoux, Nitobi
PhoneGap: Mobile Applications with HTML, CSS and JavaScript

phonegap.com
nitobi.com

brian@nitobi.co...
pretty fucking rad conf right?




               Brian LeRoux / Nitobi Software / PhoneGap
Nitobi Software
     Founded in 1998
 ‣

     15 employees
 ‣

     Based in Vancouver, BC (Gastown)
 ‣

     ^---Canada, ...
<3 JavaScript Esp.<3 FOSS
     CompleteUI
 ‣

     PhoneGap
 ‣




                  Brian LeRoux / Nitobi Software / Phon...
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.
 ‣
...
The situation room
    Platform          Language                Awesome
     iPhone          Objective C            Not s...
We’ve seen this before...
     History doomed DOOOMED to repeat
 ‣
     itself.
     Platforms. Fragmentation.
 ‣

     Go...
Stand back! I know javascript.




                          Brian LeRoux / Nitobi Software / PhoneGap
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!
 ‣

...
Brock Whitten, solving problems




              Brian LeRoux / Nitobi Software / PhoneGap
Our philosophy
     The purpose of PhoneGap is for
 ‣
     PhoneGap to cease to exist.




                     Brian LeRo...
So.. what?
     What can PhoneGap do for you?
 ‣

     Anything the phone can do? Fuck off!
 ‣

     No shit! You can now ...
why are we doing this anyhow?




              Brian LeRoux / Nitobi Software / PhoneGap
PhoneGap now
     iPhone
 ‣

     Android
 ‣

     Blackberry
 ‣




                  Brian LeRoux / Nitobi Software / Ph...
PhoneGap soon
     iPhone
 ‣

     Android
 ‣

     Blackberry
 ‣

     Nokia
 ‣

     Windows Mobile
 ‣

     Palm Pre
 ‣...
Site specific browsers
     XULRunner or Prism
 ‣

     Fluid
 ‣

     ..or maybe..
 ‣

     AIR or Titanium?
 ‣

     ......
App stores
     Apple
 ‣

     Google Android
 ‣

     Blackberry
 ‣

     Windows Mobile (skymarket)
 ‣

     Nokia (ovi)...
How do you make money?
     Advertising
 ‣

     Freemium
 ‣

     Subscription
 ‣

     Value add type apps
 ‣

     iFar...
Problems we are not solving
     Open GL
 ‣

     Building a browser
 ‣

     Sub standard devices
 ‣




                ...
HTML 5
     (sorta)
 ‣




               Brian LeRoux / Nitobi Software / PhoneGap
Code. Finally.
     lets get serious.
 ‣

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




        ...
PhoneGap in the wild
     Over 50 apps in the store.
 ‣

     Very likely many more.
 ‣

     Lots of forks too..
 ‣

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




                    Brian LeRoux / Nitobi S...
jqTouch
     beautiful uis
 ‣

     jQuery based
 ‣

     fast (once it loads)
 ‣




                       Brian LeRoux ...
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 emul...
PhoneGap in the future
     hoverboards mthrfkr
 ‣




                    Brian LeRoux / Nitobi Software / PhoneGap
The internet of things.



          Its not just about phones.
      ‣




                    Brian LeRoux / Nitobi Soft...
Gecko rendering




              Brian LeRoux / Nitobi Software / PhoneGap
Moar devices
     Nokia
 ‣

     Windows mobile
 ‣

     Palm Pre
 ‣

     Blackberry pls pls wtf pls
 ‣

     Nintendo DS...
An open toolchain
     gcc, make, etc
 ‣




                      Brian LeRoux / Nitobi Software / PhoneGap
PhoneGap Simulator
     emulator
 ‣

     simulator
 ‣

     stimulator
 ‣

     ..wait, what?
 ‣




                    ...
New interfaces
     speech (sphinx wrapper)
 ‣

     sqlite wrapper ala couch
 ‣

     sockets (fuck ya)
 ‣

     file io
...
Resources
     http://phonegap.com
 ‣

     http://phonegap.pbwiki.com
 ‣

     http://groups.google.com/group/
 ‣
     ph...
Get involved
     docs!
 ‣

     tests and specs pls
 ‣

     code and ideas most welcome
 ‣

     fork it and hack it
 ‣
...
Thank you!


      http://phonegap.com
  ‣

      http://blogs.nitobi.com/brian
  ‣

      http://brianleroux.github.com
 ...
Upcoming SlideShare
Loading in...5
×

PhoneGap at JSConf

13,141

Published on

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

Published in: Technology
1 Comment
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,141
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
435
Comments
1
Likes
29
Embeds 0
No embeds

No notes for slide

PhoneGap at JSConf

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

    Clipping is a handy way to collect important slides you want to go back to later.

×