html5 vs. native applications

46
HTML NATIVE APPLICATIONS vs

Upload: zach-leatherman

Post on 01-Dec-2014

5.263 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: HTML5 vs. Native Applications

HTMLNATIVE APPLICATIONS

vs

Page 2: HTML5 vs. Native Applications

Hello.Zach LeathermanFront End Engineer since Y2K - 1Senior Project Engineer at Union Pacific Railroad767,000+ page views1,000+ RSS subscribersPublished on: Lifehacker, DailyJS, JavaScript Weekly, AjaxianMember of two winning Omaha Startup Weekend teams

@zachleat http://zachleat.com

Page 3: HTML5 vs. Native Applications

All Source Code and Slides

zachleat.com/mobile/uno/

Page 5: HTML5 vs. Native Applications

PLATFORMS

Page 6: HTML5 vs. Native Applications

•Market Share / Popularity

•Learning Curve

HOW TO DECIDE?

Page 7: HTML5 vs. Native Applications

MARKET SHAREhttp://www.flickr.com/photos/rednuht/479370088/

Page 8: HTML5 vs. Native Applications

0

3000

6000

9000

12000

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

Units Sold (Thousands)

0

5.25

10.5

15.75

21

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

Market Share (%)

Page 9: HTML5 vs. Native Applications

0

7500

15000

22500

30000

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

Units Sold (Thousands)

0

15

30

45

60

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

Market Share (%)

*

* Likely dissolving due to Windows Phone 7 Partnership

Page 10: HTML5 vs. Native Applications

0

1250

2500

3750

5000

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

Units Sold (Thousands)

0

2.75

5.5

8.25

11

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

Market Share (%)

*

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

Page 11: HTML5 vs. Native Applications

0

3500

7000

10500

14000

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

Units Sold (Thousands)

0

4.5

9

13.5

18

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

Market Share (%)

Page 12: HTML5 vs. Native Applications

0

7500

15000

22500

30000

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

Units Sold (Thousands)

0

7.5

15

22.5

30

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

Market Share (%)

Page 13: HTML5 vs. Native Applications

http://www.flickr.com/photos/bestrated1/3027598360/

CHANGEHAPPENS

Page 14: HTML5 vs. Native Applications

FRAGMENTATION HAPPENS

Page 15: HTML5 vs. Native Applications

LEARNING CURVE

http://www.flickr.com/photos/riebart/4466482623/

Page 16: HTML5 vs. Native Applications

LANGUAGESC++

Objective C

Java

JavaScript

Java

XNA or Silverlight

Page 17: HTML5 vs. Native Applications

DEVELOPMENT REQUIREMENTS

Requires MacOS X

Requires Windows

Requires Windows

Cross Platform

Page 18: HTML5 vs. Native Applications

(THIS SUCKS)

Page 19: HTML5 vs. Native Applications

TOO MANY

DEVICES

THIS IS

A SIGN

http://www.flickr.com/photos/oblongpictures/4516124048/

TOO MANY

APP STORES

Page 20: HTML5 vs. Native Applications

I WANT MY APP TO WORK WITH

MULTIPLE PLATFORMS

Page 21: HTML5 vs. Native Applications

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

Page 22: HTML5 vs. Native Applications

WHAT DO ALL THESE DEVICES HAVE IN COMMON?

http://www.flickr.com/photos/paulwb/4248242126/

Page 23: HTML5 vs. Native Applications

THE WEB BROWSER

Page 24: HTML5 vs. Native Applications

HTMLCue

and friends

Page 25: HTML5 vs. Native Applications

Crash Course

Page 26: HTML5 vs. Native Applications

HTML(Content)

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

Page 27: HTML5 vs. Native Applications

CSS(How it looks)

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

Page 28: HTML5 vs. Native Applications

JavaScript(How it behaves)

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

Page 29: HTML5 vs. Native Applications

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>

Page 30: HTML5 vs. Native Applications

Let’s Make AMulti-Platform Web App

Page 31: HTML5 vs. Native Applications

WASH DRY

START

45:00

Laundry Timer

Page 32: HTML5 vs. Native Applications

(DEMO)

Page 33: HTML5 vs. Native Applications

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 {

width: 100%;}

}</style>

min-device-widthmax-device-width

min-widthmax-width

orientation: landscape;orientation: portrait;min-device-pixel-ratio

(iPhone 4 Retina Display)

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_querieshttps://developer.mozilla.org/En/CSS/Media_queries

Page 34: HTML5 vs. Native Applications

HTML5 Audio•Plays a sound when finished

<audio id="priceiswrong" preload="auto" autobuffer> <source src="price-is-right-fail.ogg" /> <source src="price-is-right-fail.mp3" /> </audio>

•Make sure the file is encoded correctly.

•OGG, MP3, etc

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

Page 35: HTML5 vs. Native Applications

HTML5 LocalStorage•Reload the app, saves your timer

// save Date as a string on startlocalStorage.setItem('laundryTimer', time.getTime());

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

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

Page 36: HTML5 vs. Native Applications

HTML5 Offline•Access the app without internet

<html manifest="cache.manifest">

AddType text/cache-manifest .manifest

.htaccess file

cache.manifest fileCACHE MANIFESTprice-is-right-fail.mp3price-is-right-fail.ogg

Page 37: HTML5 vs. Native Applications

Possible Features

•Return directions to Laundromat(Geolocation)

•Video

•2D/3D Transforms

•Web Fonts

•Graphics

•File Access

Page 38: HTML5 vs. Native Applications

Let’s Make AMulti-Platform Native App

Page 39: HTML5 vs. Native Applications

Native Options

•Accelerometer

•Camera

•Compass

•Contacts

•File System

•Media (Record)

•Network State

•Notifications

Page 40: HTML5 vs. Native Applications

PhoneGap

Page 41: HTML5 vs. Native Applications

PhoneGap

Page 42: HTML5 vs. Native Applications

http://www.phonegap.com/start

It’s Easy to Start

Page 43: HTML5 vs. Native Applications

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

Page 45: HTML5 vs. Native Applications

Thanks!

Zach Leatherman

http://zachleat.com

@zachleat

Page 46: HTML5 vs. Native Applications

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