PhoneGap

                           Easy Mobile Apps with JavaScript




Monday, December 7, 2009
THANK YOU!

             > var web = {};
             undefined
             > web.next();
             [”javascript”,”mob...
me.
         • github.com/brianleroux
         • twitter.com/brianleroux




                                     3


Mond...
http://www.gartner.com/it/page.jsp?id=1126812
Monday, December 7, 2009
Mobile app dev is hard.




Monday, December 7, 2009
Device Platform Fragmentation
  Platform                 Language                    Notes

  Apple iPhone             Obj...
App Distribution Fragmentation
    Apple App Store 
    Android Market 
    Blackberry App World 
    Nokia Ovi Store 
   ...
Dev and distribution nightmare.




Monday, December 7, 2009
This is why the internet works.

                           cross platform
                           open standards
     ...
Cross Platform iPhone
                           Android
                           Blackberry
                           ...
HTML5

                            sorta




Monday, December 7, 2009
Webkit APIs

 SQLite
 Cache Manifest
 CSS Transitions / Transforms / Animations
 Custom fonts




Monday, December 7, 2009
PhoneGap API
                           Geolocation
                           Accelerometer
                           No...
Future APIs




                                   File IO
                               WebSocket
                      ...
Free: as in freedom.

                                MIT Licensed




Monday, December 7, 2009
PhoneGap Philosophy

                           The purpose is to cease to exist.
                           Make the web ...
Sony Ericsson WebSDK




                http://developer.sonyericsson.com/websdk



                                     ...
Yeah way.

       Geolocation
       Accelerometer
       Notifications
       Media playback
       Camera
       Device i...
Problems with the PhoneGap project


            documentation
            app store FUD
            no fucking tests
    ...
docs.phonegap.com
                   http://github.com/phonegap/phonegap-docs 




Monday, December 7, 2009
App Store Rejections?

                              Rename your project.




Monday, December 7, 2009
No fucking tests?!




Monday, December 7, 2009
mobile-spec




Monday, December 7, 2009
Webkit




                                    24


Monday, December 7, 2009
Yay Webkit!


                                     Good!
                                     sqlite
                     ...
Bad *




                           * many variants
                           ** not mozilla
Monday, December 7, 2009
Ugly
                           •   Blackberry less than 4.6 have no XHR

                           •   Windows Mobile ru...
The many flavours of Webkit
   iPhone OS 3.0 Webkit 528.16 Build
   iPhone OS 2.2 Webkit 525.20 Build
   iPhone OS 2.02 Web...
Not to mention what isn't Webkit

     Blackberry 
     Windows Mobile
     .
     .
     .
     .
     .
     .
     .
  ...
The web still rocks.

                           (even if the browsers do not)




Monday, December 7, 2009
Other options?
  Option                   Supported Platforms   Language            License
  BigFive                  iPh...
PhoneGap supported devices

                           http://rubyurl.com/jtNs




                                       ...
Wash, Rinse, Repeat...FAIL

   1. First, install all these:
       o iPhone SDK
       o Android SDK
       o Blackberry S...
phonegap-dev

                            coming soon...




Monday, December 7, 2009
is demo time nao




Monday, December 7, 2009
Extending PhoneGap

                                 Plugins




Monday, December 7, 2009
Many codebases.
Monday, December 7, 2009
Great but how to get started?

 Small screens.
 Less memory.
 Less CPU.
 Less hard drive space if any.
 Sketchy connectivi...
Constraints == Focus

                                      




Monday, December 7, 2009
JavaScript Sucks

                            (But it is ubiquitous.)




Monday, December 7, 2009
jQuery / Dojo / YUI / MooTools




Monday, December 7, 2009
XUI

                           2.2 kb




Monday, December 7, 2009
XUI + Emile




Monday, December 7, 2009
Good enough.

                           DOM / Event / Style / XHR / FX




Monday, December 7, 2009
What about UI components?

                               




Monday, December 7, 2009
FUCK UI components.


Monday, December 7, 2009
Apps built w/ components look like it.
Monday, December 7, 2009
Solve your unique problem.

                           goals > features




Monday, December 7, 2009
Tapbots, for example.




Monday, December 7, 2009
This is the modern equivalent of
                                 Outlook Express.




            Fuck components. Especi...
Solve your unique problem.




            And you will do it better than a generic solution.

Monday, December 7, 2009
Maybe you don't even need native features?

 Use a mobile specific stylesheet.
 Progressive enhancement of functionality w/...
The Future




Monday, December 7, 2009
More devices.
Monday, December 7, 2009
OMTP BONDI

                              Spec.




Monday, December 7, 2009
W3C Device API Group




Monday, December 7, 2009
Get involved.
         • code: github.com
         • docs: docs.phonegap.com / wiki.phonegap.com
         • test: mobile-s...
Now... go write some apps!*
                     http://phonegap.com
                     http://groups.google.com/group/p...
Upcoming SlideShare
Loading in...5
×

Mobile Web App Development

4,230

Published on

Published in: Technology, News & Politics
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,230
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
165
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Mobile Web App Development

  1. 1. PhoneGap Easy Mobile Apps with JavaScript Monday, December 7, 2009
  2. 2. THANK YOU! > var web = {}; undefined > web.next(); [”javascript”,”mobile”] Monday, December 7, 2009
  3. 3. me. • github.com/brianleroux • twitter.com/brianleroux 3 Monday, December 7, 2009
  4. 4. http://www.gartner.com/it/page.jsp?id=1126812 Monday, December 7, 2009
  5. 5. Mobile app dev is hard. Monday, December 7, 2009
  6. 6. Device Platform Fragmentation Platform Language Notes Apple iPhone Objective C Requires an Apple machine. Left arm. RIM Blackberry OS Java  Requires a Windows based machine. WTF. Google Android Java (Dalvik VM) Runs mostly anywhere. Windows Mobile .NET or unmanaged C++ Requires a Windows based machine. Nokia Symbian C++, Java, Python, Flash, Runs mostly anywhere. WRT Palm WebOS HTML, CSS and JavaScript Runs mostly anywhere. Monday, December 7, 2009
  7. 7. App Distribution Fragmentation Apple App Store  Android Market  Blackberry App World  Nokia Ovi Store  GetJar  Palm App Catalog  Samsung App Store  LG Application Store  Mobango  Sony Ericsson PlayNow  Windows Marketplace  Vodafone App Store  Java App Store  Verizon VCast Monday, December 7, 2009
  8. 8. Dev and distribution nightmare. Monday, December 7, 2009
  9. 9. This is why the internet works. cross platform open standards open source Monday, December 7, 2009
  10. 10. Cross Platform iPhone Android Blackberry Windows Mobile Nokia Palm * Maemo* * releasing VERY soon Monday, December 7, 2009
  11. 11. HTML5 sorta Monday, December 7, 2009
  12. 12. Webkit APIs SQLite Cache Manifest CSS Transitions / Transforms / Animations Custom fonts Monday, December 7, 2009
  13. 13. PhoneGap API Geolocation Accelerometer Notifications Media playback Camera Device info Contacts Online/Offline SMS / Telephone Magnetometer Monday, December 7, 2009
  14. 14. Future APIs File IO WebSocket SQLite Wrapper Monday, December 7, 2009
  15. 15. Free: as in freedom. MIT Licensed Monday, December 7, 2009
  16. 16. PhoneGap Philosophy The purpose is to cease to exist. Make the web a first class dev tool. Be open, transparent and free. Adhere to standards when possible. Monday, December 7, 2009
  17. 17. Sony Ericsson WebSDK http://developer.sonyericsson.com/websdk 17 Monday, December 7, 2009
  18. 18. Yeah way. Geolocation Accelerometer Notifications Media playback Camera Device info Contacts On these devices: Online/Offline SMS / Telephone iPhone / iPod Touch Magnetometer Android Blackberry Nokia Windows Mobile Palm webOS Monday, December 7, 2009
  19. 19. Problems with the PhoneGap project documentation app store FUD no fucking tests many webkit variants perceived competition tooling is not consolidated source is a bit of a gong show no standard technique for extending the project Monday, December 7, 2009
  20. 20. docs.phonegap.com  http://github.com/phonegap/phonegap-docs  Monday, December 7, 2009
  21. 21. App Store Rejections? Rename your project. Monday, December 7, 2009
  22. 22. No fucking tests?! Monday, December 7, 2009
  23. 23. mobile-spec Monday, December 7, 2009
  24. 24. Webkit 24 Monday, December 7, 2009
  25. 25. Yay Webkit! Good! sqlite cache manifest css awesome custom fontage Monday, December 7, 2009
  26. 26. Bad * * many variants ** not mozilla Monday, December 7, 2009
  27. 27. Ugly • Blackberry less than 4.6 have no XHR • Windows Mobile runs IE 4 • Or worse: IE 6 + 7 Monday, December 7, 2009
  28. 28. The many flavours of Webkit iPhone OS 3.0 Webkit 528.16 Build iPhone OS 2.2 Webkit 525.20 Build iPhone OS 2.02 Webkit 525.20 Build iPhone OS 1.5 Webkit 419.3 Build Android 1.5 Webkit Nov 2008 Fork Android 1.1 Webkit Rev r30692 Android 1.0 Webkit PalmPre OS Webkit Nokia S60 Webkit Fork Nokia WRT Webkit Fork Monday, December 7, 2009
  29. 29. Not to mention what isn't Webkit Blackberry  Windows Mobile . . . . . . . ...yet. Monday, December 7, 2009
  30. 30. The web still rocks. (even if the browsers do not) Monday, December 7, 2009
  31. 31. Other options? Option Supported Platforms Language License BigFive iPhone HTML, CSS and JS GPL2 LiquidGear iPhone HTML, CSS and JS* MIT Corona iPhone Lua Proprietary Appcelerator iPhone HTML, CSS and JS* Apache Android Rhodes iPhone HTML, CSS and JS. GPL3 Symbian Ruby for native code. Android Accessed client/server BlackBerry style. Windows Mobile NimbleKit iPhone HTML, CSS and JS* Proprietary * Renders native controls via JavaScript. Monday, December 7, 2009
  32. 32. PhoneGap supported devices http://rubyurl.com/jtNs 32 Monday, December 7, 2009
  33. 33. Wash, Rinse, Repeat...FAIL 1. First, install all these: o iPhone SDK o Android SDK o Blackberry SDK o Windows Mobile SDK o Nokia WRT SDK 2. Download the PhoneGap source.  3. Map to each SDK. 4. Copy your app into each. 5. Build for each. 6. Fix a bug.  7. GOTO 3. Automation FAIL. Monday, December 7, 2009
  34. 34. phonegap-dev coming soon... Monday, December 7, 2009
  35. 35. is demo time nao Monday, December 7, 2009
  36. 36. Extending PhoneGap Plugins Monday, December 7, 2009
  37. 37. Many codebases. Monday, December 7, 2009
  38. 38. Great but how to get started? Small screens. Less memory. Less CPU. Less hard drive space if any. Sketchy connectivity. Monday, December 7, 2009
  39. 39. Constraints == Focus   Monday, December 7, 2009
  40. 40. JavaScript Sucks (But it is ubiquitous.) Monday, December 7, 2009
  41. 41. jQuery / Dojo / YUI / MooTools Monday, December 7, 2009
  42. 42. XUI 2.2 kb Monday, December 7, 2009
  43. 43. XUI + Emile Monday, December 7, 2009
  44. 44. Good enough. DOM / Event / Style / XHR / FX Monday, December 7, 2009
  45. 45. What about UI components?   Monday, December 7, 2009
  46. 46. FUCK UI components. Monday, December 7, 2009
  47. 47. Apps built w/ components look like it. Monday, December 7, 2009
  48. 48. Solve your unique problem. goals > features Monday, December 7, 2009
  49. 49. Tapbots, for example. Monday, December 7, 2009
  50. 50. This is the modern equivalent of Outlook Express. Fuck components. Especially native components. Monday, December 7, 2009
  51. 51. Solve your unique problem. And you will do it better than a generic solution. Monday, December 7, 2009
  52. 52. Maybe you don't even need native features? Use a mobile specific stylesheet. Progressive enhancement of functionality w/ js. Monday, December 7, 2009
  53. 53. The Future Monday, December 7, 2009
  54. 54. More devices. Monday, December 7, 2009
  55. 55. OMTP BONDI Spec. Monday, December 7, 2009
  56. 56. W3C Device API Group Monday, December 7, 2009
  57. 57. Get involved. • code: github.com • docs: docs.phonegap.com / wiki.phonegap.com • test: mobile-spec • blog about it • tweet about it! • tell your mom about it (I already did) • help on mailing list 57 Monday, December 7, 2009
  58. 58. Now... go write some apps!* http://phonegap.com http://groups.google.com/group/phonegap Brian LeRoux brian@nitobi.com http://twitter.com/brianleroux * After beers. Ideally at least 12 hours after beers. Monday, December 7, 2009
  1. A particular slide catching your eye?

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

×