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

Recommandé

Recommandé

Contenu connexe

Similaire à HTML5 vs. Native Applications

Similaire à HTML5 vs. Native Applications (20)

Dernier

Dernier (20)

HTML5 vs. Native Applications