Native
                  vs
            Web
                  vs
        Hybrid
Mobile Development Choices
Jason Grigsby •...
Early 2008
“It’s about usage. Not units”

• Number of queries on Google search from iPhones surpassed those
  from Symbian-based phon...
Surprise Story of 2008




Flickr photo by Drift Words: http://www.flickr.com/photos/44124413076@N01/11846265/
Flickr photo by Civisi: http://www.flickr.com/photos/civisi/2611679744/




      Web 2.0                                  ...
http://www.readwriteweb.com/archives/top_10_web_platforms_of_2008.php
What makes the App Store successful?
                       Carriers                App Store

                           ...
30 million
http://blog.wired.com/gadgets/2009/02/shoot-is-iphone.html#c148364123
                                         ...
Gold Rush was On
Source: http://gizmodo.com/5199933/giz-explains-all-the-smartphone-mobile-app-stores
Ringtone Apps




(FYI: Justin’s app is out soon. FitnessTrack. $2.99)

                 http://twitter.com/justin/status/...
Ringtone Apps

15000



11250



7500



3750



    0
        0   1.99   3.99     5.99       7.99          9.99   11.99  ...
Brutally Honest iPhone App Sales:
     $32k Spent vs. $535 Revenue
Dapple




 http://www.streamingcolour.com/blog/2009/03...
Throwaway Apps




http://www.pinchmedia.com/appstore-secrets/
Throwaway Apps




http://www.pinchmedia.com/appstore-secrets/
Pinch Media’s Conclusions

•Users stop using the average applications
 quickly.

•Long-term audiences are generally 1% of
...
Success Determined by Top Lists & Features




        http://appcubby.com/blog/files/financial_realities.html
More Open ≠ No Gatekeeper




    96%
    Approved
   (what about that 4%?)
10 Rejected Applications
                                                              •   Obama Trampoline
              ...
http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html
http://twitter.com/trent_reznor/status/1681690305
http://bits.blogs.nytimes.com/2009/04/30/the-hundred-million-dollar-mobile-app-question/
iPhone Only Part of World Wide Market
   Symbian        RIM            Windows Mobile                iPhone       Linux
  ...
iPhone Only Part of US Market

1.RIM BlackBerry Curve (all 83XX models)
2.Apple iPhone 3G (all models)
3.RIM BlackBerry St...
3.3
                                         Billion
                                           Mobile phone for
         ...
3.3 Billion in Perspective




Source: http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html
   http:/...
2007 SMS Revenue: 100 billion




Flickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/
2007 SMS Revenue: 100 billion




                                                                            •Box Office
 ...
BMW Turned $70k MMS into $45M Revenue
Symbian                     Windows Mobile

Objective C              WebOS
                                               ...
Google Mobile — App Challenges
                  • Pressure from CEO for rapid releases

                  • 10+ platforms...
Fragmentation:
      This is what the
      web is supposed
          to solve.




Flickr photo by .Hessam: http://www.fli...
Mobile Web Doubled in 2008
                              Jan 08                             Jan 09



                    ...
Mobile Internet to Grow Despite Recession

  Average intended usage increase over the next 24 months


                   ...
Top Five Services Non-users Intend
to Start Using in the Next 24 Months

                        U.S.     Europe

    Mobi...
The Hope for Mobile


                         What is the
                         likelihood of
                        ...
Opera Mini Traffic Increases
Usage up 157% year-over-year




       http://www.opera.com/media/smw/
Mobile Web Distribution
                     Carriers               App Store            Mobile Web

                   Cl...
Ok Hot Shot, How are You Going to Create
    Super Monkey Ball with HTML?
Ok Hot Shot, How are You Going to Create
    Super Monkey Ball with HTML?


                            <div id=”bridge”
 ...
Ok Hot Shot, How are You Going to Create
    Super Monkey Ball with HTML?


                            <div id=”bridge”
 ...
Five Common Reasons for Native Apps



                         Performance

                         Offline Mode

       ...
Not for all applications

Good enough for many applications

Javascript Performance improving

   Hardware Accelerated CSS...
Javascript Speed Wars




                http://webkit.org/blog/189/announcing-squirrelfish/
              http://news.cne...
Javascript Speed Wars




                http://webkit.org/blog/189/announcing-squirrelfish/
              http://news.cne...
Javascript Speed Wars




                http://webkit.org/blog/189/announcing-squirrelfish/
              http://news.cne...
Javascript Speed Wars




                http://webkit.org/blog/189/announcing-squirrelfish/
              http://news.cne...
Javascript Speed Wars




                http://webkit.org/blog/189/announcing-squirrelfish/
              http://news.cne...
We’ve Become Bandwidth Gluttons

                                                     Since 2003:

                       ...
Yahoo!’s 14 Performance Rules (Now 34!)

1. Make Fewer HTTP Requests                          8. Make JavaScript and CSS E...
Offline Support

• HTML 5


  • Client-side Database Storage API


  • Application Cache


• Essentially SQLite in browser
...
Gmail Using HTML5
25,000 Apps

          &

  Findability?


http://148apps.com/10000
“It all depends on the application, of course,” says

Mauro Montanaro, [Fox Mobile CEO] “and whether

they are paid or fre...
Geolocation API

   Camera

Address Book

Accelerometer
Flickr photo by Lyza Gardner: http://www.flickr.com/photos/lyza/49545547/
Flickr photo by Thomas Purves: http://www.flickr.com/photos/thomaspurves/744225198/
http://phonegap.com
What Can You Do With PhoneGap?




              http://phonegap.com/projects
Other Hybrid Approaches

                    • QuickConnect
                      http://quickconnect.pbworks.com

       ...
Hybrid
Apps?

 Yes
 we
 can
Mobile Progressive Enhancement
                             [content]




   http://mobiforge.com/designing/story/effectiv...
Mobile Progressive Enhancement
                             [content]

  WURFL




   http://mobiforge.com/designing/story...
Mobile Progressive Enhancement
                             [content]

  WURFL




   http://mobiforge.com/designing/story...
Mobile Progressive Enhancement
                             [content]

  WURFL                                            ...
Mobile Progressive Enhancement
                             [content]

  WURFL                                            ...
Keys to Successful Hybrid Apps

•Make the experience feel like a native application

•Take advantage of the enhanced featu...
Flickr photo by MarkKelley: http://www.flickr.com/photos/markkelley/1022720488/
Thank You for Your Time!




Work: http://cloudfour.com • Blog: http://userfirstweb.com • Twitter: @grigs
                 ...
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Upcoming SlideShare
Loading in...5
×

Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

52,645

Published on

Examining the landscape of the mobile development, the hidden challenges of the iPhone app store, and the middle way provided by hybrid applications.

Published in: Technology, News & Politics
5 Comments
93 Likes
Statistics
Notes
No Downloads
Views
Total Views
52,645
On Slideshare
0
From Embeds
0
Number of Embeds
38
Actions
Shares
0
Downloads
2,659
Comments
5
Likes
93
Embeds 0
No embeds

No notes for slide

Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

  1. 1. Native vs Web vs Hybrid Mobile Development Choices Jason Grigsby • Web Visions 2009 @grigs on Twitter • jason@cloudfour.com cloudfour.com • userfirstweb.com mobileportand.com
  2. 2. Early 2008
  3. 3. “It’s about usage. Not units” • Number of queries on Google search from iPhones surpassed those from Symbian-based phones in the days after Christmas. Nokia’s Symbian-based phones are 40% of the market worldwide. • German iPhone users consume 30 times more data. • 95% of iPhone customers regularly surf the Internet. Data services revenue increased from $2.7 billion in 2005 to $6.9 billion in 2007. • Google sees 50 times the number of searches using the iPhone than any other mobile device. They were so surprised, they asked their engineers to check the logs to make sure it was correct. • This is why major companies, Google, Quicken, etc. are all launching iPhone-optimized services despite the iPhone’s 1% market share.
  4. 4. Surprise Story of 2008 Flickr photo by Drift Words: http://www.flickr.com/photos/44124413076@N01/11846265/
  5. 5. Flickr photo by Civisi: http://www.flickr.com/photos/civisi/2611679744/ Web 2.0 iPhone App Store Web-based Apps Native Apps Services & Mashups Few APIs between apps Software as Service No Recurring Revenue Cloud Computing Local Storage
  6. 6. http://www.readwriteweb.com/archives/top_10_web_platforms_of_2008.php
  7. 7. What makes the App Store successful? Carriers App Store Open to anyone Openness Closed, Seek permission who signs agreement Entry Cost Thousands of dollars $99 Revenue Split 60/40 to 50/50 70/30 Restrictions Many Few Releases Difficult, Timely 1 to 2 weeks Micropayments Inconsistent iTunes for every phone
  8. 8. 30 million http://blog.wired.com/gadgets/2009/02/shoot-is-iphone.html#c148364123 devices 40,000 http://www.newsweek.com/id/174266 apps 1 billion http://businessweek.com/@@0M43kIYQYKPISw0A/technology/content/sep2008/tc20080930_257832.htm downloads
  9. 9. Gold Rush was On
  10. 10. Source: http://gizmodo.com/5199933/giz-explains-all-the-smartphone-mobile-app-stores
  11. 11. Ringtone Apps (FYI: Justin’s app is out soon. FitnessTrack. $2.99) http://twitter.com/justin/status/1210786170 http://furbo.org/2008/12/09/ring-tone-apps/ http://furbo.org/2009/02/16/raising-prices/
  12. 12. Ringtone Apps 15000 11250 7500 3750 0 0 1.99 3.99 5.99 7.99 9.99 11.99 13.99 15.99+ http://148apps.com/10000
  13. 13. Brutally Honest iPhone App Sales: $32k Spent vs. $535 Revenue Dapple http://www.streamingcolour.com/blog/2009/03/09/the-numbers-post-aka-brutal-honesty/
  14. 14. Throwaway Apps http://www.pinchmedia.com/appstore-secrets/
  15. 15. Throwaway Apps http://www.pinchmedia.com/appstore-secrets/
  16. 16. Pinch Media’s Conclusions •Users stop using the average applications quickly. •Long-term audiences are generally 1% of total downloads •Paid apps retain users longer, but still steep drop off. http://www.pinchmedia.com/appstore-secrets/
  17. 17. Success Determined by Top Lists & Features http://appcubby.com/blog/files/financial_realities.html
  18. 18. More Open ≠ No Gatekeeper 96% Approved (what about that 4%?)
  19. 19. 10 Rejected Applications • Obama Trampoline • MyShoe • I Am Poor • The South Park App • Pull My Finger • iBoobs • Slasher • Murderdome • Podcaster • Freedom Time quot;Even though my personal political leanings are Democratic, I think this app will be offensive to roughly half our customers. What's the point?quot; — Steve Jobs http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html
  20. 20. http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html
  21. 21. http://twitter.com/trent_reznor/status/1681690305
  22. 22. http://bits.blogs.nytimes.com/2009/04/30/the-hundred-million-dollar-mobile-app-question/
  23. 23. iPhone Only Part of World Wide Market Symbian RIM Windows Mobile iPhone Linux Palm OS Other 20000 17949 15000 10000 7443 4714 5000 4079 3195 0 327 437 Q4 2008 Smartphone Sales — Thousands of Units http://www.gartner.com/it/page.jsp?id=910112
  24. 24. iPhone Only Part of US Market 1.RIM BlackBerry Curve (all 83XX models) 2.Apple iPhone 3G (all models) 3.RIM BlackBerry Storm 4.RIM BlackBerry Pearl (all models, except flip) 5.T-Mobile G1 Blackberry 50% Marketshare Q1 2009 Sales According to NPD http://www.npd.com/press/releases/press_090504.html
  25. 25. 3.3 Billion Mobile phone for half the planet. Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/
  26. 26. 3.3 Billion in Perspective Source: http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html http://communities-dominate.blogs.com/brands/2008/01/when-there-is-a.html
  27. 27. 2007 SMS Revenue: 100 billion Flickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/
  28. 28. 2007 SMS Revenue: 100 billion •Box Office •DVD Sales & Rentals Combined •Music Industry •Video Games Flickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/
  29. 29. BMW Turned $70k MMS into $45M Revenue
  30. 30. Symbian Windows Mobile Objective C WebOS C Java ME Dalvik Palm Visual Basic C++ .NET Compact BREW Flickr photo by André-Batista: http://www.flickr.com/photo_zoom.gne?id=408700622&size=o
  31. 31. Google Mobile — App Challenges • Pressure from CEO for rapid releases • 10+ platforms to support • Over 100 different builds http://www.flickr.com/photos/83731031@N00/445924458/ • http://www.flickr.com/photos/mcdave/142758127/ http://www.flickr.com/photos/nataliejohnson/290541732/
  32. 32. Fragmentation: This is what the web is supposed to solve. Flickr photo by .Hessam: http://www.flickr.com/photos/essamo/1070527547/
  33. 33. Mobile Web Doubled in 2008 Jan 08 Jan 09 10821 Daily 22369 10312 Weekly 19283 36870 Ever in Month 63182 0 17500 35000 52500 70000 Unique Users (000s) http://www.comscore.com/press/release.asp?press=2752
  34. 34. Mobile Internet to Grow Despite Recession Average intended usage increase over the next 24 months U.S. Europe Current Users 58% 55% Non-Users 27% 28% http://www.tellabs.com/news/2009/index.cfm/nr/53.cfm
  35. 35. Top Five Services Non-users Intend to Start Using in the Next 24 Months U.S. Europe Mobile Internet 49% 34% MMS 38% 39% Uploading Photos 34% 27% Software/app download 30% 30% Email 28% 32%
  36. 36. The Hope for Mobile What is the likelihood of exponential growth for the Internet on Mobile Devices?
  37. 37. Opera Mini Traffic Increases Usage up 157% year-over-year http://www.opera.com/media/smw/
  38. 38. Mobile Web Distribution Carriers App Store Mobile Web Closed, Seek Open to anyone Openness Completely Open permission who signs agreement Entry Cost Thousands of dollars $99 None Revenue Split 60/40 to 50/50 70/30 100% Restrictions Many Few None Releases Difficult, Timely 1 to 2 weeks Instantaneous Micropayments Inconsistent iTunes for every phone Not yet
  39. 39. Ok Hot Shot, How are You Going to Create Super Monkey Ball with HTML?
  40. 40. Ok Hot Shot, How are You Going to Create Super Monkey Ball with HTML? <div id=”bridge” class=”rope”> <div id=”bubble”> <span id=”monkey sprite- replace”> Monkey</span> jquery-banana.js
  41. 41. Ok Hot Shot, How are You Going to Create Super Monkey Ball with HTML? <div id=”bridge” class=”rope”> <div id=”bubble”> <span id=”monkey sprite- replace”> Monkey</span> jquery-banana.js Some Applications Have to Be Native
  42. 42. Five Common Reasons for Native Apps Performance Offline Mode Findability Device Attributes Monetization Flickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l
  43. 43. Not for all applications Good enough for many applications Javascript Performance improving Hardware Accelerated CSS Web developers must improve Flickr: Uploaded February 11, 2007 by hawridger
  44. 44. Javascript Speed Wars http://webkit.org/blog/189/announcing-squirrelfish/ http://news.cnet.com/8301-1001_3-10030888-92.html http://weblogs.mozillazine.org/roadmap/archives/2008/09/tracemonkey_update.html http://webkit.org/blog/214/introducing-squirrelfish-extreme/
  45. 45. Javascript Speed Wars http://webkit.org/blog/189/announcing-squirrelfish/ http://news.cnet.com/8301-1001_3-10030888-92.html http://weblogs.mozillazine.org/roadmap/archives/2008/09/tracemonkey_update.html http://webkit.org/blog/214/introducing-squirrelfish-extreme/
  46. 46. Javascript Speed Wars http://webkit.org/blog/189/announcing-squirrelfish/ http://news.cnet.com/8301-1001_3-10030888-92.html http://weblogs.mozillazine.org/roadmap/archives/2008/09/tracemonkey_update.html http://webkit.org/blog/214/introducing-squirrelfish-extreme/
  47. 47. Javascript Speed Wars http://webkit.org/blog/189/announcing-squirrelfish/ http://news.cnet.com/8301-1001_3-10030888-92.html http://weblogs.mozillazine.org/roadmap/archives/2008/09/tracemonkey_update.html http://webkit.org/blog/214/introducing-squirrelfish-extreme/
  48. 48. Javascript Speed Wars http://webkit.org/blog/189/announcing-squirrelfish/ http://news.cnet.com/8301-1001_3-10030888-92.html http://weblogs.mozillazine.org/roadmap/archives/2008/09/tracemonkey_update.html http://webkit.org/blog/214/introducing-squirrelfish-extreme/
  49. 49. We’ve Become Bandwidth Gluttons Since 2003: • Web Page Size Tripled •# of Objects Doubled Since 1995: • Web Page Size: 22x •# of Objects: 21x Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/
  50. 50. Yahoo!’s 14 Performance Rules (Now 34!) 1. Make Fewer HTTP Requests 8. Make JavaScript and CSS External 2. Use a Content Delivery Network 9. Reduce DNS Lookups 3. Add an Expires Header 10.Minify JavaScript 4. Gzip Components 11.Avoid Redirects 5. Put Stylesheets at the Top 12.Remove Duplicate Scripts 6. Move Scripts to the Bottom 13.Configure ETags 7. Avoid CSS Expressions 14.Make AJAX Cacheable Source: http://developer.yahoo.com/performance/rules.html
  51. 51. Offline Support • HTML 5 • Client-side Database Storage API • Application Cache • Essentially SQLite in browser • Available on iPhone since 2.0 • Google Gears, Android, Nokia soon?
  52. 52. Gmail Using HTML5
  53. 53. 25,000 Apps & Findability? http://148apps.com/10000
  54. 54. “It all depends on the application, of course,” says Mauro Montanaro, [Fox Mobile CEO] “and whether they are paid or free.” But he also notes that the “discoverability” of iPhone apps is becoming a bigger problem, and that some of the marketing tactics that Fox Mobile has used successfully on other handsets just don’t work on the iPhone. “The question, as usual, is placement. Who determines [editorial placement]? Maybe someone out of Cupertino.”
  55. 55. Geolocation API Camera Address Book Accelerometer
  56. 56. Flickr photo by Lyza Gardner: http://www.flickr.com/photos/lyza/49545547/
  57. 57. Flickr photo by Thomas Purves: http://www.flickr.com/photos/thomaspurves/744225198/
  58. 58. http://phonegap.com
  59. 59. What Can You Do With PhoneGap? http://phonegap.com/projects
  60. 60. Other Hybrid Approaches • QuickConnect http://quickconnect.pbworks.com • Rhomobile http://rhomobile.com • Big 5 http://big5apps.com/
  61. 61. Hybrid Apps? Yes we can
  62. 62. Mobile Progressive Enhancement [content] http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  63. 63. Mobile Progressive Enhancement [content] WURFL http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  64. 64. Mobile Progressive Enhancement [content] WURFL http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  65. 65. Mobile Progressive Enhancement [content] WURFL Phone Gap Add Functionality http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  66. 66. Mobile Progressive Enhancement [content] WURFL Phone Gap Add Functionality http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
  67. 67. Keys to Successful Hybrid Apps •Make the experience feel like a native application •Take advantage of the enhanced features •Don’t simply release a hybrid version of the mobile web •Optimize performance •Plan your marketing
  68. 68. Flickr photo by MarkKelley: http://www.flickr.com/photos/markkelley/1022720488/
  69. 69. Thank You for Your Time! Work: http://cloudfour.com • Blog: http://userfirstweb.com • Twitter: @grigs Mobile Portland: http://mobileportland.com Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×