Platform vs. Native vs. HTML5: Which mobile development makes sense for your business?
HTML5 vs. Native Applications
-
Upload
zach-leatherman -
Category
Technology
-
view
5.258 -
download
0
description
Transcript of HTML5 vs. Native Applications
HTMLNATIVE APPLICATIONS
vs
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
All Source Code and Slides
zachleat.com/mobile/uno/
MOBILE
http://www.flickr.com/photos/umpcportal/3221591123/
PLATFORMS
•Market Share / Popularity
•Learning Curve
HOW TO DECIDE?
MARKET SHAREhttp://www.flickr.com/photos/rednuht/479370088/
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 (%)
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
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
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 (%)
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 (%)
http://www.flickr.com/photos/bestrated1/3027598360/
CHANGEHAPPENS
FRAGMENTATION HAPPENS
LEARNING CURVE
http://www.flickr.com/photos/riebart/4466482623/
LANGUAGESC++
Objective C
Java
JavaScript
Java
XNA or Silverlight
DEVELOPMENT REQUIREMENTS
Requires MacOS X
Requires Windows
Requires Windows
Cross Platform
(THIS SUCKS)
TOO MANY
DEVICES
THIS IS
A SIGN
http://www.flickr.com/photos/oblongpictures/4516124048/
TOO MANY
APP STORES
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.flickr.com/photos/paulwb/4248242126/
THE WEB BROWSER
HTMLCue
and friends
Crash Course
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 AMulti-Platform Web App
WASH DRY
START
45:00
Laundry Timer
(DEMO)
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
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();
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');
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
Possible Features
•Return directions to Laundromat(Geolocation)
•Video
•2D/3D Transforms
•Web Fonts
•Graphics
•File Access
Let’s Make AMulti-Platform Native App
Native Options
•Accelerometer
•Camera
•Compass
•Contacts
•File System
•Media (Record)
•Network State
•Notifications
PhoneGap
PhoneGap
http://www.phonegap.com/start
It’s Easy to 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 http://www.slideshare.net/bryanrieger/
rethinking-the-mobile-web-by-yiibu
•jQuery Mobile http://jquerymobile.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