Native

vs
Web
vs
Hybrid
Mobile Development Choices
Jason Grigsby
@grigs on Twitter • jason@cloudfour.com
cloudfour.com • userfirstweb.com
mobileportand.com
Early 2008
“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.
 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 iPhone App Store

Web-based Apps Native Apps
Services & Mashups Few APIs between apps
Software as Service No Recurring Revenue
Cloud Computing Local Storage
http://www.readwriteweb.com/archives/top_10_web_platforms_of_2008.php
 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

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

25,000
http://www.newsweek.com/id/174266
apps

800 million
http://businessweek.com/@@0M43kIYQYKPISw0A/technology/content/sep2008/tc20080930_257832.htm downloads
Gold Rush was On
 Ringtone Apps

(FYI: Justin’s app is out soon. GymRat. $4.99)

http://twitter.com/justin/status/1210786170
http://furbo.org/2008/12/09/ring-tone-apps/
http://furbo.org/2009/02/16/raising-prices/
 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
 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/
 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

total downloads

•Paid apps retain users longer, but still

steep drop off.

http://www.pinchmedia.com/appstore-secrets/
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
• 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

http://www.pcworld.com/article/159887-2/rejected_10_iphone_apps_that_didnt_make_apples_app_store.html
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
 3.3
Billion
Mobile phone for
half the planet.

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

 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
2007 SMS Revenue: 100 billion

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

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/
200 billion for data services in 2008
(SMS accounts for 130B)

•Box Office
•DVD Sales & Rentals
Combined •Music Industry
•Video Games
Flickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/
 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
 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/
 Fragmentation:
This is what the
web is supposed
to solve.

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

 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
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
 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%

 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

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”
class=”rope”>

<div id=”bubble”>
<span id=”monkey sprite-
replace”>
Monkey</span>

jquery-banana.js
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

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

 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/
 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/
 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/
 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/
 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/
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/
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
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?

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

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
Phone
Gap?

Yes
we
can
Mobile Progressive Enhancement
[content]

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]

WURFL

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]

WURFL

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]

WURFL Phone Gap

Add Functionality

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Mobile Progressive Enhancement
[content]

WURFL Phone Gap

Add Functionality

http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
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 site

•Optimize performance
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

Mobile Concurrency Test: http://cloudfour.com/mobile/
Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/