HTML5 vs. Native Applications

HTML vs

NATIVE APPLICATIONS

Hello.
Zach Leatherman
Front End Engineer since Y2K - 1
Senior Project Engineer at Union Paciﬁc Railroad
767,000+ page views
1,000+ RSS subscribers
Published on: Lifehacker, DailyJS, JavaScript Weekly, Ajaxian
Member of two winning Omaha Startup Weekend teams

@zachleat http://zachleat.com

All Source Code and Slides
zachleat.com/mobile/uno/

MOBILE

http://www.ﬂickr.com/photos/umpcportal/3221591123/

HOW TO DECIDE?
•Market Share / Popularity
•Learning Curve

MARKET SHARE
http://www.ﬂickr.com/photos/rednuht/479370088/

Market Share (%) Units Sold (Thousands)
21 12000

15.75 9000

10.5 6000

5.25 3000

0 0
1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10

*
60 30000

45 22500

30 15000

15 7500

0 0
1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10

* Likely dissolving due to Windows Phone 7 Partnership

*

11 5000

8.25 3750

5.5 2500

2.75 1250

0 0
1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10

* Not included in Charts, but 2M devices sold to carriers as of end of 2010

18 14000

13.5 10500

9 7000

4.5 3500

0 0
1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10

30 30000

22.5 22500

15 15000

7.5 7500

0 0
1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10 1Q09 2Q09 3Q09 4Q09 1Q10 2Q10 3Q10

CHANGE
HAPPENS

http://www.ﬂickr.com/photos/bestrated1/3027598360/

LEARNING CURVE

http://www.ﬂickr.com/photos/riebart/4466482623/

LANGUAGES
C++

Objective C

Java

JavaScript

Java

XNA or Silverlight

DEVELOPMENT REQUIREMENTS
Cross Platform
Requires MacOS X

Requires Windows

Requires Windows

T HIS IS
A SIGN

TO OM ANY
OO M ANY RES
T P STO
DE VI CES AP

http://www.ﬂickr.com/photos/oblongpictures/4516124048/

I WANT MY APP TO WORK WITH
MULTIPLE PLATFORMS

?
(OKAY, MORE LIKE AN “EASIER BUTTON”)

WHAT DO ALL
THESE DEVICES
HAVE IN
COMMON?
http://www.ﬂickr.com/photos/paulwb/4248242126/

HTML
(Content)

<!doctype html>
<html>
<head></head>
<body>
This is the content.
It shows in the browser window.
</body>
</html>

CSS
(How it looks)

body {
background-color: #000;
color: #fff;
}

JavaScript
(How it behaves)

document.body.addEventListener(‘click’,
function()
{
alert(‘You clicked on the page.’);
}, false);

Combined
<!doctype html>
<html>
<head>
<style>
body {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
This is the content.
It shows in the browser window.

<script>
document.body.addEventListener(‘click’, function()
{
alert(‘You clicked on the page.’);
}, false);
</script>
</body>
</html>

Let’s Make A
Multi-Platform Web App

Laundry Timer
WASH DRY

45:00
START

CSS Media Queries
•Adaptable Layout for Different Screen Sizes
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">

<style>
label {
width: 50%;
}

@media all and (max-width: 399px) {
label { min-device-width
width: 100%; max-device-width
} min-width
} max-width
orientation: landscape;
</style> orientation: portrait;
min-device-pixel-ratio
(iPhone 4 Retina Display)
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
https://developer.mozilla.org/En/CSS/Media_queries

HTML5 Audio
•Plays a sound when ﬁnished
<audio id="priceiswrong" preload="auto" autobuffer>
<source src="price-is-right-fail.ogg" />
<source src="price-is-right-fail.mp3" />
</audio>

document.getElementById('priceiswrong').play();

•Make sure the ﬁle is encoded correctly.
•OGG, MP3, etc

HTML5 LocalStorage
•Reload the app, saves your timer
// save Date as a string on start
localStorage.setItem('laundryTimer', time.getTime());

// remove when the alarm plays
localStorage.removeItem('laundryTimer');

// retrieve the saved time on page load (if exists)
var savedTimer = localStorage.getItem('laundryTimer');

HTML5 Offline
•Access the app without internet
<html manifest="cache.manifest">

.htaccess ﬁle
AddType text/cache-manifest .manifest

cache.manifest ﬁle
CACHE MANIFEST
price-is-right-fail.mp3
price-is-right-fail.ogg

Possible Features
•Return directions to Laundromat(Geolocation)
•Video •Graphics
•2D/3D Transforms •File Access
•Web Fonts

Let’s Make A
Multi-Platform Native App

Native Options

•Accelerometer •File System
•Camera •Media (Record)
•Compass •Network State
•Contacts •Notiﬁcations

It’s Easy to Start

http://www.phonegap.com/start

CAVEATS
•Not all web browsers are created equal
•Blackberry OS (watch out: pre v5)

•IE Mobile (watch out: pre IE9, due 4Q2011)

•Lowest Common Denominator Development
•Not every device requires/can support the
same experience

RESOURCES
•Can I Use? http://caniuse.com

•Dive Into HTML5 http://diveintohtml5.org

•HTML5 Rocks http://www.html5rocks.com/

•PhoneGap http://phonegap.com

•Rethinking the Mobile Web
rethinking-the-mobile-web-by-yiibu
http://www.slideshare.net/bryanrieger/

•jQuery Mobile http://jquerymobile.com

Thanks!

Zach Leatherman
@zachleat

http://zachleat.com

SOURCES
• ADMOB has more Mobile Operating System Statistics: http://metrics.admob.com/wp-
content/uploads/2010/06/May-2010-AdMob-Mobile-Metrics-Highlights.pdf

• Great stats on different App Stores on Wikipedia: http://en.wikipedia.org/wiki/
List_of_digital_distribution_platforms_for_mobile_devices

• ADMOB App Usage Survey: http://metrics.admob.com/wp-content/uploads/2010/03/
AdMob-Mobile-Metrics-Jan-10-Survey-Supplement.pdf

• ADMOB Mobile Metrics Highlights May 2010: http://metrics.admob.com/wp-content/
uploads/2010/06/May-2010-AdMob-Mobile-Metrics-Highlights.pdf

HTML5 vs. Native Applications

Recommended

Recommended

More Related Content

Similar to HTML5 vs. Native Applications

Similar to HTML5 vs. Native Applications (20)

Recently uploaded

Recently uploaded (20)

HTML5 vs. Native Applications