HTML5 versus Native
 

HTML5 versus Native

on

  • 2,395 views

HTML5 versus native ...

HTML5 versus native
Web or native? This discussion is hot again in the mobile development world with its diversity of operating systems and devices. Mobile apps catch our attention with new navigation patterns and cool user experience. This talk helps you to choose the right technologies for your needs. It answers the question on when to use HTML and when to go native by showing the limits and strengths of HTML5. You will find the facts and arguments to make a decision specific to your situation. Do you need to support different devices or even desktops? How does the user interact with your app? Should the look and feel be close to a native one or do you want your own distinctive look and feel on every device?

Want more? Zühlke Academy offers several trainings related to this topic: http://bit.ly/Z_UI

Presentation held at GoToCon in Zurich http://gotocon.com/zurich-2013/

Statistics

Views

Total Views
2,395
Views on SlideShare
1,524
Embed Views
871

Actions

Likes
1
Downloads
42
Comments
0

15 Embeds 871

http://blog.zuehlke.com 496
https://www.socialbizug.org 217
http://www.socialbizug.org 123
http://planetlotus.org 12
http://localhost 5
http://feedly.com 5
http://blog-qa.zuehlke.com 3
https://reader.aol.com 2
http://zuehlkeblog.nx 2
http://wp.joshlabs.webfactional.com 1
http://mobile.planetsharepoint.org 1
http://10.100.0.241 1
http://jfeeds.carsmantra.com 1
http://wp.joshlabs.in 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 versus Native HTML5 versus Native Presentation Transcript

    • Mobile: HTML5 or native?Deciding right for your needs Slide 1 Nikolaos Kaintantzis 11. April 2013 nikolaos.kaintantzis@zuehlke.com Twitter: @xnka Nikolaos Kaintantzis © Zühlke 2013
    • Our biggest mistake was betting too muchon HTML5 rather than native applicationsIt just wasnt thereSeptember 11th, 2012 http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 2 © Zühlke 2013
    • Challenge accepted!HTML5 is readyMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 3 © Zühlke 2013
    • Facebook native vs. Fastbook HTML5Mobile: HTML5 or native? | Nikolaos Kaintantzis Source: http://vimeo.com/55486684 11. April 2013 Slide 4 © Zühlke 2013
    • Displaying lots of datais not technology relatedQuestions to solve:• Local caching• Identity over server roundtrips• Update tracking• When and how to refresh? This is maybe not your problem Facebooks problems are note everyone’s problems Facebook still likes and uses HTML5Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 5 © Zühlke 2013
    • HTML5 vs. native?What evangelists are saying expectation HTML5 vs 2010 time 2011 2012 2013Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 6 © Zühlke 2013
    • Goal of this talkIdentify your needs and use caseProvide facts and argumentsShowing the limits and strengths of HTML5 (focus on mobile)Help finding your decision HTML5 nativeMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 7 © Zühlke 2013
    • Facets in mobile developmentUser experienceScreen size segmentationSupporting main platformsApplication lifecycle management (ALM)Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 8 © Zühlke 2013
    • Facets in mobile developmentUser experienceScreen size segmentationSupporting main platformsApplication lifecycle management (ALM)Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 9 © Zühlke 2013
    • Classification 2010 (before HTML5) Thin, RIA, Richweb AJAX no Thin RIA techn. Plugin RIA cost barriersEnvironment Standalone RIA Store Rich Clientsnative low User Interaction complex/high Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 10 © Zühlke 2013
    • Classification 2013 HTML5 and Richweb no HTML5 techn HTML5 Plugin RIAEnvironment Standalone RIA Rich Clientsnative low User Interaction complex/high Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 11 © Zühlke 2013
    • HTML5 is more than a hypeexpands AJAX-RIA-box to the right expands AJAX-RIA-box to the bottom• New types for <input> tag • Offline capabilities/ application cache• Drag and drop • Local storage and• Canvas and webGL indexed database• Web sockets • File-API • Geolocation • Web messaging / Channel messagingMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 12 © Zühlke 2013
    • Classification 2015HTM5 for everything? Thin AJAX Plugin RIA Standalone RIA Rich Clients 2010 HTML5 2013 HTML5 HTML5 Plugin RIA 2015 ??? Standalone RIA Rich ClientsMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 13 © Zühlke 2013
    • HTML5 for everything? - Challenge complex user interactionweb no HTML5 techn HTML5 Plugin RIAEnvironment Standalone RIA Rich Clientsnative DnD, Keyboard low User Interaction complex/high Shortcuts, autom. data exchange Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 14 © Zühlke 2013
    • HTML5 for everything? - Challenge complex user interactionweb no HTML5 techn No mobile use case HTML5 Plugin RIAEnvironment Standalone RIA Rich Clientsnative low User Interaction complex/high Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 15 © Zühlke 2013
    • HTML5 for everything? - Challenge native APIs and look and feelweb no HTML5 techn No mobile use case HTML5 Plugin RIAEnvironment Standalone RIA Rich Clientsnative Access file system, low User Interaction complex/high webcam, native look and feel Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 16 © Zühlke 2013
    • Can I use the file system with HTML5?www.caniuse.comMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 17 © Zühlke 2013
    • Can I use the webcam with HTML5?www.caniuse.comMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 18 © Zühlke 2013
    • Can I use geolocation and deviceorientation?www.caniuse.comMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 19 © Zühlke 2013
    • Mobile HTML5 and wrapper  Hybrid appsweb HTML5 No use caseEnvironment Native Wrapper (Camera, Location, Contact, SMS, Orientation, File System Workers and Parallel Processing, Cross-Appnative Messaging) low User Interaction complex/high Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 20 © Zühlke 2013
    • Missing HTML5 features(or support old browsers)Use fallbacks and polyfills• Use one of the 100+ HTML5 frameworks• Check with modernizr to see if a feature is missing• Modernizr includes YepNope.js for conditional loading of external js and css resources yepnope({ test : Modernizr.geolocation, yep : normal.js, nope : [polyfill.js, wrapper.js] });Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 21 © Zühlke 2013
    • HTML5 lookLooks the way you styled itMay conflict with known and expected interaction paradigms• Backlink• Arrows in lists• No contextual action bar available (just the one of the browser)Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 22 © Zühlke 2013
    • HTML5 feelAn HTML5 app may look native but not feel native• Some transitions and effects need hardware performance• Animations when clicking on widgets are different than nativeFeel depends on• the maturity of the framework you use• browser and the capability the OS gives to the browserMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 24 © Zühlke 2013
    • User experience HTML5 or native? Best user experience is with nativenative Performance and reactiveness could become UX issues • e.g. slow rendering of big object graphs Look and feel might not be an issue • e.g. Business-to-Employee (B2E)-AppsHTML5 Use the company CI as look and feel is much easier with HTML5 Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 25 © Zühlke 2013
    • Facets in mobile developmentUser experienceScreen size segmentationSupporting main platformsApplication lifecycle management (ALM)Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 26 © Zühlke 2013
    • iPad and iPhone screen sizes Source: http://opensignal.com/reports/fragmentation.phpMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 27 © Zühlke 2013
    • Android screen sizes Source: http://opensignal.com/reports/fragmentation.phpMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 28 © Zühlke 2013
    • Android screen sizes of popular phones Source: http://opensignal.com/reports/fragmentation.phpMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 29 © Zühlke 2013
    • Native: programmatically with OS supportSource http://developer.android.com/design/patterns/multi-pane-layouts.html
    • HTML5: Responsive designsource: http://www.lukew.com/ff/entry.asp?1514 source: http://designmodo.com/responsive-design-examples/
    • Mobile Page instead of responsive design?Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 32 © Zühlke 2013
    • Screen size segmentationHTML5 or native?Easier with HTML5Save costs with HTML5 Advantage HTML5 HTML5 nativeMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 33 © Zühlke 2013
    • Facets in mobile developmentUser experienceScreen size segmentationSupporting main platformsApplication lifecycle management (ALM)Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 34 © Zühlke 2013
    • Mobile platform market shareMarch 2012 and 2013 Platform Market Share Market Share Market Share World Europe Switzerland 2013-03 2012-03 2013-03 2012-03 2013-03 2012-03 Android 37.19 45.42 33.22 (23.61) (31.72) (25.53) iOS 27.18 38.99 62.74 (23.99) (41.63) (70.14) Windows Phone ? 02.58 02.00 ? (00.99) (00.92) Symbian 07.99 02.32 01.05 (31.48) (08.31) (01.67) Blackberry 03.27 04.59 00.23 (06.43) (12.00) (00.40) Source: http://stats.areppim.com/Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 35 © Zühlke 2013
    • How to handle fragmentation? • For each Platformnative  Need skills for each platform and language • Cross compiling (e.g. with Mono/Xamarin) – Non UI-Code is common / But code each UI  Reuse skills in common code / UI skills for each platform / Know how for cross compiler • Interpreted apps (e.g. with Appcelerator Titanium) – One Language for all platforms & native widgets on each  Learn framework or reuse JavaScript skills • Generated apps  Modelling skills needed or reused • Hybrid AppsHTML5 • Web Apps – Responsive design – Mobile site } reuse HTML, JS and CSS skills Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 36 © Zühlke 2013
    • Supporting main platforms HTML5 or native? Native:native • Main is a small number • Having skills for each platform already • UI is less expensive than the rest (much common and less UI code) • You want the best user experience on each platform HTML5 • Main is a big number of platforms and versions • You whish less code to maintain You don’t have people or money to support each platformHTML5 • Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 37 © Zühlke 2013
    • interim balance: responsive design, mobilepage, hybrid application or native? responsive design mobile page hybrid app native Fast changes / Always up to date Works with sensors (e.g. geolocation) No additional code to maintain Appstore presence and monetarisation No additional costs (e.g. dev. licence)Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 38 © Zühlke 2013
    • Facets in mobile developmentUser experienceScreen size segmentationSupporting main platformsApplication lifecycle management (ALM)Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 39 © Zühlke 2013
    • Why is ALM a mobile topic?Native:• Support how many platforms?• Support how many platform versions?• Prepare for next platform version?HTML5:• Support how many browsers?Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 40 © Zühlke 2013
    • iOS 6 is the main version for iOS Source: http://forums.macrumors.com/showthread.php?t=1548883Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 41 © Zühlke 2013
    • New android versions need time 93% with 3 Android Versions Source: http://www.appbrain.com/stats/top-android-sdk-versionsMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 42 © Zühlke 2013
    • Application Lifecycle Management (ALM) HTML5 or native? Are you willing to maintain 1x Phone and 3x Android?native And are you willing to adapt your app for the new versions? And pay the costs? • Yes : – native o.k. • No: – HTML5 is the only way – Native: bad customer reviews rating for unsupported versions! Do you need to update fast?  HTMLHTML5 Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 43 © Zühlke 2013
    • SummaryFacets in mobile development HTML5 native User experience Screen size segmentation Supporting main platforms Application lifecycle management (ALM) And what is about conflicts? I need exiting user experience and have to support many platforms!  HTML5 and native!  Important use cases native  Remaining in HTML5Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 44 © Zühlke 2013
    • SummaryHTML5 or native? / HTML5 and native!Reconsider your decisions made years ago web HTML5There are lot of standards around HTML5 HTML5 Environment Plugin RIAthat will empower HTML5 in native direction More use case are possible with HTML5 Standalone RIAThere are limits and cost barriers Rich Clients native for HTML5 and native low User Interaction complex/highUser experience is important for customersBest user experience is with native User experience Screen size segmentation Supporting main platforms ALMMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 45 © Zühlke 2013
    • Questions? web HTML5 HTML5 Environment Plugin RIA Standalone RIA Rich Clients native low User Interaction complex/high User experience Screen size segmentation Supporting main platforms ALM niko.ch/talksMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 46 © Zühlke 2013
    • Want more?http://www.zuehlke.com/de/zuehlke-group/educationcentre/kursangebot.htmlZühlke trainings in Trainings with me• UI-Engineering • UI-Engineering• Interaction Design • Requirements Engineering Advanced Level – Elicitation &• Usability Engineering ConsolidationComing soon• HTML5 and JavaScriptMobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 47 © Zühlke 2013
    • Links (1/3)Peter Friese: Cross platform mobile developmenthttp://de.slideshare.net/peterfriese/cross-platform-mobile-development-11239246Mischa Demarmels, Katja Neumann und Thomas Memmel:Mobile Engineering - Welche Umsetzungsstrategie ist die richtige?http://www.zuehlke.com/fileadmin/pdf/others/whitepaper_mobile_engineering.pdfRomano Roth und Oliver Brack: iOS, Android, WP7... Alle nativ auf einenStreich! http://www.zuehlke.com/fileadmin/pdf/others/ios-android-wp7-alle-auf-einen-streich.pdfNikolaos Kaintantzis: Reicher werden - Wie HTML5 Rich Internet Applicationsverändert. http://www.zuehlke.com/fileadmin/pdf/fachartikel/218_ix_reicher_werden_nka.pdfPeter Kröner: Die Karte des HTML5-Universumshttp://www.peterkroener.de/die-karte-des-html5-universums/Compatibility tables for support of HTML5, CSS3, SVG and more in desktopand mobile browsers: http://caniuse.com/Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 48 © Zühlke 2013
    • Links (2/3)Responsive Navigation Pattternshttp://bradfrostweb.com/blog/web/responsive-nav-patterns/http://www.lukew.com/ff/entry.asp?1514Styleguide Android-Apps:http://developer.android.com/design/index.htmlResponsive Design Exampleshttp://designmodo.com/responsive-design-examples/5 Really Useful Responsive Web Design Patterns:http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/Standards for Web Applications on Mobilehttp://www.w3.org/Mobile/mobile-web-app-state/HTML5 compatibility on mobile and tablet browsershttp://mobilehtml5.org/Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 49 © Zühlke 2013
    • Links (3/3)Fastbook Homepage:http://fb.html5isready.com/Blog The Making of Fastbook: An HTML5 Love Storyhttp://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-storyFastbook vs Faceboom Video http://vimeo.com/55486684Facebook still likes Web apps in some circumstances.http://news.cnet.com/8301-1023_3-57511142-93/html5-is-dead-long-live-html5HTML5 isnt Facebooks biggest mistake‘http://www.theregister.co.uk/2012/09/14/facebook_html_5_vs_native_apps/polyfills http://tinyurl.com/polyfillmodernizr http://modernizr.com/YepNope.js http://yepnopejs.com/Mobile: HTML5 or native? | Nikolaos Kaintantzis 11. April 2013 Slide 50 © Zühlke 2013