際際滷

際際滷Share a Scribd company logo

HTML5 vs. Native Applications

Z
Zach Leatherman

This document compares developing mobile applications using HTML vs native applications. It notes that HTML allows creating applications that work across multiple platforms using common web technologies like HTML, CSS, and JavaScript. Native applications require developing for each platform's languages like Objective C or Java. The document demonstrates a simple laundry timer application built with HTML5 features like audio, local storage, and offline access to function across devices. It recommends HTML for cross-platform apps due to fewer development requirements compared to building separately for each device.

1 of 46
Downloaded 188 times
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 際際滷s zachleat.com/mobile/uno/
MOBILE http://www.鍖ickr.com/photos/umpcportal/3221591123/
PLATFORMS
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
* Market Share (%) Units Sold (Thousands) 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
* Market Share (%) Units Sold (Thousands) 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
Market Share (%) Units Sold (Thousands) 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
Market Share (%) Units Sold (Thousands) 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 鞄岳岳沿://敬敬敬.鍖i界一姻.界看馨/沿鞄看岳看壊/恢艶壊岳姻温岳艶糸1/3027598360/
FRAGMENTATION HAPPENS
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
(THIS SUCKS)
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/
THE WEB BROWSER
Cue HTML 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>
Lets Make A Multi-Platform Web App
Laundry Timer WASH DRY 45:00 START
(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 { 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=/slideshow/html5-vs-native-applications/7160947/"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
Lets Make A Multi-Platform Native App
Native Options Accelerometer File System Camera Media (Record) Compass Network State Contacts Noti鍖cations
PhoneGap
PhoneGap
Its 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

More Related Content

HTML5 vs. Native Applications

  • 1. HTML vs NATIVE APPLICATIONS
  • 2. 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
  • 3. All Source Code and 際際滷s zachleat.com/mobile/uno/
  • 6. HOW TO DECIDE? Market Share / Popularity Learning Curve
  • 8. 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
  • 9. * Market Share (%) Units Sold (Thousands) 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
  • 10. * Market Share (%) Units Sold (Thousands) 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
  • 11. Market Share (%) Units Sold (Thousands) 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
  • 12. Market Share (%) Units Sold (Thousands) 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
  • 13. CHANGE HAPPENS 鞄岳岳沿://敬敬敬.鍖i界一姻.界看馨/沿鞄看岳看壊/恢艶壊岳姻温岳艶糸1/3027598360/
  • 16. LANGUAGES C++ Objective C Java JavaScript Java XNA or Silverlight
  • 17. DEVELOPMENT REQUIREMENTS Cross Platform Requires MacOS X Requires Windows Requires Windows
  • 19. 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/
  • 20. I WANT MY APP TO WORK WITH MULTIPLE PLATFORMS
  • 21. ? (OKAY, MORE LIKE AN EASIER BUTTON)
  • 22. WHAT DO ALL THESE DEVICES HAVE IN COMMON? http://www.鍖ickr.com/photos/paulwb/4248242126/
  • 26. HTML (Content) <!doctype html> <html> <head></head> <body> This is the content. It shows in the browser window. </body> </html>
  • 27. CSS (How it looks) body { background-color: #000; color: #fff; }
  • 28. JavaScript (How it behaves) document.body.addEventListener(click, function() { alert(You clicked on the page.); }, false);
  • 29. 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>
  • 31. Laundry Timer WASH DRY 45:00 START
  • 33. 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
  • 34. HTML5 Audio Plays a sound when 鍖nished <audio id="priceiswrong" preload="auto" autobuffer> <source src=/slideshow/html5-vs-native-applications/7160947/"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
  • 35. 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');
  • 36. 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
  • 37. Possible Features Return directions to Laundromat(Geolocation) Video Graphics 2D/3D Transforms File Access Web Fonts
  • 39. Native Options Accelerometer File System Camera Media (Record) Compass Network State Contacts Noti鍖cations
  • 42. Its Easy to Start http://www.phonegap.com/start
  • 43. 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
  • 44. 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
  • 45. Thanks! Zach Leatherman @zachleat http://zachleat.com
  • 46. 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