84
Native vs Web vs Hybrid Mobile Development Choices Jason Grigsby • Web Visions 2009 @grigs on Twitter [email protected] cloudfour.com userfirstweb.com mobileportand.com

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

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Native vs

Webvs

Hybrid Mobile Development Choices

Jason Grigsby • Web Visions 2009@grigs on Twitter • [email protected]

cloudfour.com • userfirstweb.com mobileportand.com

Page 2: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 3: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 4: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Early 2008

Page 5: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

“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.

Page 6: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 7: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Surprise Story of 2008

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

Page 8: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Web 2.0Web-based Apps

Services & MashupsSoftware as ServiceCloud Computing

iPhone App StoreNative Apps

Few APIs between appsNo Recurring Revenue

Local Storage

Flickr photo by Civisi: http://www.flickr.com/photos/civisi/2611679744/

Page 10: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Carriers App Store

Openness

Entry Cost

Revenue Split

Restrictions

Releases

Micropayments

Closed, Seek permissionOpen to anyone

who signs agreement

Thousands of dollars $99

60/40 to 50/50 70/30

Many Few

Difficult, Timely 1 to 2 weeks

Inconsistent iTunes for every phone

What makes the App Store successful?

Page 11: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://blog.wired.com/gadgets/2009/02/shoot-is-iphone.html#c148364123

http://www.newsweek.com/id/174266

http://businessweek.com/@@0M43kIYQYKPISw0A/technology/content/sep2008/tc20080930_257832.htm

30 million devices

40,000 apps

1 billiondownloads

Page 12: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Gold Rush was On

Page 13: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 14: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Source: http://gizmodo.com/5199933/giz-explains-all-the-smartphone-mobile-app-stores

Page 15: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 16: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Ringtone Apps

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

http://twitter.com/justin/status/1210786170http://furbo.org/2008/12/09/ring-tone-apps/http://furbo.org/2009/02/16/raising-prices/

Page 17: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

0

3750

7500

11250

15000

0 1.99 3.99 5.99 7.99 9.99 11.99 13.99 15.99+

Ringtone Apps

http://148apps.com/10000

Page 18: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Brutally Honest iPhone App Sales:$32k Spent vs. $535 Revenue

http://www.streamingcolour.com/blog/2009/03/09/the-numbers-post-aka-brutal-honesty/

Dapple

Page 19: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Throwaway Apps

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

Page 20: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Throwaway Apps

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

Page 21: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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/

Page 22: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Success Determined by Top Lists & Features

http://appcubby.com/blog/files/financial_realities.html

Page 23: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

More Open ≠ No Gatekeeper

96%Approved

(what about that 4%?)

Page 24: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

10 Rejected Applications

http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html

• Obama Trampoline

• MyShoe

• I Am Poor

• The South Park App

• Pull My Finger

• iBoobs

• Slasher

• Murderdome

• Podcaster

• Freedom Time

"Even though my personal political leanings are Democratic, I think this app will be offensive to roughly half our customers. What's the point?" — Steve Jobs

Page 25: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html

Page 27: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 28: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 30: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

iPhone Only Part of World Wide Market

0

5000

10000

15000

20000

17949

7443

47144079

3195

327 437

Symbian RIM Windows Mobile iPhone LinuxPalm OS Other

Q4 2008 Smartphone Sales — Thousands of Unitshttp://www.gartner.com/it/page.jsp?id=910112

Page 31: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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

iPhone Only Part of US Market

Q1 2009 Sales According to NPD

http://www.npd.com/press/releases/press_090504.html

Blackberry 50% Marketshare

Page 32: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

3.3BillionMobile phone for half the planet.

Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/

Page 34: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

2007 SMS Revenue: 100 billion

Flickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/

Page 35: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

2007 SMS Revenue: 100 billion

•Box Office•DVD Sales & Rentals•Music Industry•Video Games

CombinedFlickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/

Page 36: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

BMW Turned $70k MMS into $45M Revenue

Page 37: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 38: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Flickr photo by André-Batista: http://www.flickr.com/photo_zoom.gne?id=408700622&size=o

Objective C

Java ME

WebOS

C++

.NET Compact

BREW

Dalvik

Visual Basic

C

Symbian Windows Mobile

Palm

Page 39: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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/

Page 40: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Flickr photo by .Hessam: http://www.flickr.com/photos/essamo/1070527547/

Fragmentation:This is what the

web is supposed to solve.

Page 41: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Daily

Weekly

Ever in Month

0 17500 35000 52500 70000

63182

19283

22369

36870

10312

10821

Jan 08 Jan 09

http://www.comscore.com/press/release.asp?press=2752

Unique Users (000s)

Mobile Web Doubled in 2008

Page 42: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Mobile Internet to Grow Despite Recession

U.S. Europe

Current Users 58% 55%

Non-Users 27% 28%

Average intended usage increase over the next 24 months

http://www.tellabs.com/news/2009/index.cfm/nr/53.cfm

Page 43: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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%

Page 44: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

The Hope for Mobile

What is the

likelihood of

exponential

growth for the

Internet on Mobile

Devices?

Page 45: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://www.opera.com/media/smw/

Opera Mini Traffic IncreasesUsage up 157% year-over-year

Page 46: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 47: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Carriers App Store Mobile Web

Openness

Entry Cost

Revenue Split

Restrictions

Releases

Micropayments

Closed, Seek permission

Open to anyone who signs agreement

Completely Open

Thousands of dollars $99 None

60/40 to 50/50 70/30 100%

Many Few None

Difficult, Timely 1 to 2 weeks Instantaneous

Inconsistent iTunes for every phone Not yet

Mobile Web Distribution

Page 48: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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

Page 49: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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

Page 50: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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

Page 51: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Five Common Reasons for Native Apps

Performance

Offline Mode

Findability

Device Attributes

MonetizationFlickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l

Page 52: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Flickr: Uploaded February 11, 2007 by hawridger

Not for all applications

Good enough for many applications

Javascript Performance improving

Hardware Accelerated CSS

Web developers must improve

Page 53: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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.htmlhttp://webkit.org/blog/214/introducing-squirrelfish-extreme/

Page 54: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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.htmlhttp://webkit.org/blog/214/introducing-squirrelfish-extreme/

Page 55: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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.htmlhttp://webkit.org/blog/214/introducing-squirrelfish-extreme/

Page 56: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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.htmlhttp://webkit.org/blog/214/introducing-squirrelfish-extreme/

Page 57: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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.htmlhttp://webkit.org/blog/214/introducing-squirrelfish-extreme/

Page 58: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 59: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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/

Page 60: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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

1. Make Fewer HTTP Requests

2. Use a Content Delivery Network

3. Add an Expires Header

4. Gzip Components

5. Put Stylesheets at the Top

6. Move Scripts to the Bottom

7. Avoid CSS Expressions

8. Make JavaScript and CSS External

9. Reduce DNS Lookups

10.Minify JavaScript

11.Avoid Redirects

12.Remove Duplicate Scripts

13.Configure ETags

14.Make AJAX Cacheable

Source: http://developer.yahoo.com/performance/rules.html

Page 61: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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?

Page 62: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Gmail Using HTML5

Page 63: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://148apps.com/10000

25,000 Apps

&

Findability?

Page 64: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 65: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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

Page 66: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Geolocation API

Camera

Address Book

Accelerometer

Page 67: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Flickr photo by Lyza Gardner: http://www.flickr.com/photos/lyza/49545547/

Page 68: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Flickr photo by Thomas Purves: http://www.flickr.com/photos/thomaspurves/744225198/

Page 69: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://phonegap.com

Page 70: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

What Can You Do With PhoneGap?

http://phonegap.com/projects

Page 71: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Other Hybrid Approaches

• QuickConnecthttp://quickconnect.pbworks.com

• Rhomobile http://rhomobile.com

• Big 5 http://big5apps.com/

Page 72: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 73: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Hybrid Apps?

Yes we can

Page 74: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 75: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Mobile Progressive Enhancement

[content]

Page 76: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Mobile Progressive Enhancement

[content]

WURFL

Page 77: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Mobile Progressive Enhancement

[content]

WURFL

Page 78: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Mobile Progressive Enhancement

[content]

WURFL Phone GapAdd Functionality

Page 79: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes

Mobile Progressive Enhancement

[content]

WURFL Phone GapAdd Functionality

Page 80: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

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

Page 81: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 82: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Flickr photo by MarkKelley: http://www.flickr.com/photos/markkelley/1022720488/

Page 83: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development
Page 84: Native vs. Mobile Web vs. Hybrid Apps for Mobile Development

Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/

Thank You for Your Time!

Work: http://cloudfour.com • Blog: http://userfirstweb.com • Twitter: @grigs Mobile Portland: http://mobileportland.com