HTML5 vs. Native Applications
-
Upload
zach-leatherman -
Category
Technology
-
view
5.265 -
download
0
description
Transcript of HTML5 vs. Native Applications
![Page 1: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/1.jpg)
HTMLNATIVE APPLICATIONS
vs
![Page 2: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/3.jpg)
All Source Code and Slides
zachleat.com/mobile/uno/
![Page 4: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/4.jpg)
MOBILE
http://www.flickr.com/photos/umpcportal/3221591123/
![Page 5: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/5.jpg)
PLATFORMS
![Page 6: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/6.jpg)
•Market Share / Popularity
•Learning Curve
HOW TO DECIDE?
![Page 7: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/7.jpg)
MARKET SHAREhttp://www.flickr.com/photos/rednuht/479370088/
![Page 8: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/8.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/10.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/11.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/12.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/13.jpg)
http://www.flickr.com/photos/bestrated1/3027598360/
CHANGEHAPPENS
![Page 14: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/14.jpg)
FRAGMENTATION HAPPENS
![Page 15: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/15.jpg)
LEARNING CURVE
http://www.flickr.com/photos/riebart/4466482623/
![Page 16: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/16.jpg)
LANGUAGESC++
Objective C
Java
JavaScript
Java
XNA or Silverlight
![Page 17: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/17.jpg)
DEVELOPMENT REQUIREMENTS
Requires MacOS X
Requires Windows
Requires Windows
Cross Platform
![Page 18: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/18.jpg)
(THIS SUCKS)
![Page 19: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/19.jpg)
TOO MANY
DEVICES
THIS IS
A SIGN
http://www.flickr.com/photos/oblongpictures/4516124048/
TOO MANY
APP STORES
![Page 20: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/20.jpg)
I WANT MY APP TO WORK WITH
MULTIPLE PLATFORMS
![Page 21: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/21.jpg)
?(OKAY, MORE LIKE AN “EASIER BUTTON”)
![Page 22: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/22.jpg)
WHAT DO ALL THESE DEVICES HAVE IN COMMON?
http://www.flickr.com/photos/paulwb/4248242126/
![Page 23: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/23.jpg)
THE WEB BROWSER
![Page 24: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/24.jpg)
HTMLCue
and friends
![Page 25: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/25.jpg)
Crash Course
![Page 26: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/26.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/27.jpg)
CSS(How it looks)
body { background-color: #000; color: #fff;}
![Page 28: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/28.jpg)
JavaScript(How it behaves)
document.body.addEventListener(‘click’, function() { alert(‘You clicked on the page.’); }, false);
![Page 29: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/29.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/30.jpg)
Let’s Make AMulti-Platform Web App
![Page 31: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/31.jpg)
WASH DRY
START
45:00
Laundry Timer
![Page 32: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/32.jpg)
(DEMO)
![Page 33: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/33.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/34.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/35.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/36.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/37.jpg)
Possible Features
•Return directions to Laundromat(Geolocation)
•Video
•2D/3D Transforms
•Web Fonts
•Graphics
•File Access
![Page 38: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/38.jpg)
Let’s Make AMulti-Platform Native App
![Page 39: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/39.jpg)
Native Options
•Accelerometer
•Camera
•Compass
•Contacts
•File System
•Media (Record)
•Network State
•Notifications
![Page 40: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/40.jpg)
PhoneGap
![Page 41: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/41.jpg)
PhoneGap
![Page 42: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/42.jpg)
http://www.phonegap.com/start
It’s Easy to Start
![Page 43: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/43.jpg)
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 44: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/44.jpg)
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
![Page 46: HTML5 vs. Native Applications](https://reader034.fdocuments.net/reader034/viewer/2022051209/547ea2fab479599d508b4c15/html5/thumbnails/46.jpg)
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