Your SlideShare is downloading. ×
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Experience Optimization Meetup
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Experience Optimization Meetup


Published on

Building a mobile app - depending upon who you speak with it's a quick way to make a ton of cash (SnapChat), a sign of maturity for a SaaS startup that offers advantages over a desktop solution …

Building a mobile app - depending upon who you speak with it's a quick way to make a ton of cash (SnapChat), a sign of maturity for a SaaS startup that offers advantages over a desktop solution (ifttt), or the only way your company chooses to do business (WhatsApp). If you get it right...

Today's mobile app developers have to make some difficult choices in their implementations, and a lack of history to provide clear direction doesn't help. In this meetup we'll look at Responsive, Adaptive and Native app development alternatives and how your choice can impact day-to-day necessities like testing and troubleshooting. This will be slightly more technical than our last meetup as we will examine implementations and optimization techniques using mobile applications in the wild.

Published in: Education, Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Appcelerator/IDC’s Q2 2012 survey of 3,600+ developers found that 6% of applications were targeted for development in HTML5 1.25 million native applications versus 75,000 HTML5 applications in production today in public app stores: these are telling statistics.400,000,000 accounts tied to credit cards in Apple’s app store, This is the largest number of participants for a transactional site on the Internet. Consumers have downloaded 30 billion apps and Applehas written checks for over $5 billion to developers. The store is now available in over 155 countries around the world. However, costs can be prohibitive when building native applications on every required OS. In the same developer survey referenced above, 80% of developers expressed the need to deploy their applications on more than one operating system. Development team costs need to be doubled or tripled to deliver this native experience on multiple OSes (if those developers can even be found and hired).
  • It’s ideal to keep rendered content for instant switching back. However you could only do that if memory management is done optimally. There’s only so much you could keep until the app crashes running out of memory.
  • Over 28 implementations by multiple manufacturers (e.g. HTC, Samsung, Motorola, Kindle, Google itself, Sony and more), the pains associated with writing an application for Android deployment are well documented.
  • TouchOrientationGPSBandwidth
  • It works by trying to load in the script, and then immediately after, testing to see if the jQuery object is available. If It’s not, then they load a local copy of jQuery as a fallback. This is generally not that easy in script-loaders, but Modernizr.load has got you covered. You can just use the same logic, and Modernizr.load will handle the execution order for you:
  • Transcript

    • 1. @yottaa #WebPerf So you want to build a mobile app… Brought to you by:
    • 2. @yottaa #WebPerf Available info, tooling driven by market
    • 3. @yottaa #WebPerf Prioritize based on volume Share (%) of Smartphone Subscribers January 2013 April 2013 Delta Google 52.3% 52.0% -0.3% Apple 37.8% 39.2% 1.4% BlackBerry 5.9% 5.1% -0.8% Microsoft 3.1% 3.0% -0.1% Symbian 0.5% 0.5% 0.0%
    • 4. @yottaa #WebPerf Prioritize further: who are your users? Your momma’s… got game! It’s actually Gen-Xers. Millennials are into fitness & entertainment
    • 5. @yottaa #WebPerf What do your target users do and use? 80% of mobile interaction is via native apps HTML5 apps are great for: • Productivity • News • Generally - forms
    • 6. @yottaa #WebPerf Why are only 6% of apps HTML5? No app store makes it more difficult to monetize Build once, run everywhere translates to optimize everywhere HTML5’s “good enough” experience isn’t always good enough
    • 7. @yottaa #WebPerf For LinkedIN it the ecosystem was lacking 2012: HTML5 for efficiency & agility 8-10% Mobile users Apps running out of Memory Lacked testing & profiling 2013: Native for user experience Majority of Traffic from mobile Better features (use HTML5, CSS for email) Apple and Google drive innovation
    • 8. @yottaa #WebPerf High-level Overview Governing body: W3C • 5 years to ratify… • 200+ browser interpretations More security vulnerabilities • Can’t encrypt cached data • Encrypting data in motion compromises performance
    • 9. @yottaa #WebPerf High-level Overview Governing bodies: Apple and Google • At least one release/year • iOS is highly standardized & regulated • More Android variety, but still finite (~30 varieties vs. over 200 for HTML5) Better user experience • Fewer security vulnerabilities • Device-specific functionality is richer
    • 10. @yottaa #WebPerf OK, to be fair… Over the past two years, Android has had 21 updates to their browser.
    • 11. @yottaa #WebPerf What do you hold most dear? 1. User experience 2. Performance 3. Monetization 4. X-plat deployment $$ 5. Fragmentation 6. Programming expertise 7. Updates & distribution 8. New innovation timeline 9. Security
    • 13. @yottaa #WebPerf Test…Testing…Testing 1, 2, 3 Question: How do your features Appear to your users? Behave in the wild? Impact the device? Perform across networks?
    • 14. @yottaa #WebPerf Appearances
    • 15. @yottaa #WebPerf To Emulate or Simulate? Emulator • Mimics device hardware & software • Android developers tend to complain about performance • Emulates GPU but tends to lag (instructions translated to x86) Simulator • Mimics device software • Apple stresses device testing b/c disk space, CPU & memory speed different • Faster cycle times, but requires recompiling to device
    • 16. @yottaa #WebPerf How to determine browser features • UA sniffing – Poor choice – detects navigator.userAgent – User agent string may have changed – New browser versions or flavors • Feature detection – HTML5 + CSS3 – JavaScript
    • 17. @yottaa #WebPerf - Ringmark OSS maintained by Facebook @ Native UX testing & development Works with existing W3C tests Full list of supported features across browsers: Check whether an API is usable & produces expected, specified output
    • 18. @yottaa #WebPerf Grab the brass browser ring Ring 0 State of the world today. Actively used mobile web features. • Application Cache • Canvas • CSS 2.1 • CSS 3D Transforms • CSS3 Animation • CSS3 Background • CSS3 Color • CSS Min, Max • CSS Opacity • CSS3 Text • CSS3 2D Transforms • CSS3 Transitions • CSS3 UI • CSS3 Values • Data URL • Doctype • Geolocation • JSON • Masking Images • Web Messaging • Progress Event • Prompts • Selectors 2 • Video • Viewport • Web Storage Ring 1 Enable 2D game, audio, video, camera Most popular types of mobile apps today. • Audio, Multi-Track • Blob • CSS3 Background, Standard • CSS3 Fonts • CSS3 MediaQueries • CSS Overflow Scrolling • CSS Position Fixed • CSS3 Text, Standard • CSS3 UI, Standard • Device Orientation Event • FileReader • FormData • HTML5 Forms, Inputs • Hashchange • History • Media Capture Input • IndexedDB • Multi Touch Event • Offline Mode • Ring 1 Performance • Touch Event • URL • Web Workers • XHR2 Ring 2 3D games, messaging, video streaming Work in progress. • Animation Timing • Canvas 3D • Canvas 3D, Standard • CSS Unspecified • CSS3 Animation, Standard • CSS3 BorderImage • CSS Element • CSS3 Flexbox • CSS3 Flexbox, Standard • CSS3 Images • CSS3 Images, Standard • CSS Overflow Scrolling, Standard • CSS3 2D Transforms, Standard • CSS3 Transitions, Standard • Custom Data Attributes • Fullscreen • HTML5 Layout & Semantic • Iframe Sandboxing • IndexedDB, Standard • Performance Timing • Network Info • Notifications • Ring 2 Performance • SharedWorkers • SVG • SVG Animation • SVG Inline • Video Tracks • Vibration • Page Visibility • WebRTC (Real time Audio & Video)
    • 19. @yottaa #WebPerf How Ringmark works test("postMessage", function() { var postMessage = window.postMessage; assert( !!postMessage, "postMessage supported" ); }); test("onmessage", function() { assert( "onmessage" in window, "onmessage supported" ); }); asyncTest("postMessage/onmessage In Practice", function( async ) { window.onmessage = function( event ) { async.step(function() { assert( true, "onmessage event fired" ); assert( === "This is Ground Control", "message content matched expected" ); async.done(); }); }; window.postMessage( "This is Ground Control", "*" ); });
    • 20. @yottaa #WebPerf Lord of the Rings: Dolphin (and BB10) Also:
    • 21. @yottaa #WebPerf Modernizr javascript library For development with HTML5 + CSS3 Ensure support for old browsers Checks for native browser support of new web features Generates custom object to test what you need
    • 22. @yottaa #WebPerf Example method in Modernizr Polyfills are scripts that simulate the behavior of native API in older browsers This method: Modernizr.load has been released standalone as yesnope.js Modernizr.load([ { // Logical list of things we would normally need test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients, // Modernizr.load loads css and javascript by default nope : ['presentational-polyfill.js', 'presentational.css'] }, // Functional polyfills { // This just has to be truthy test : Modernizr.websockets && window.JSON, // socket-io.js and json2.js nope : 'functional-polyfills.js', // You can also give arrays of resources to load. both : [ 'app.js', 'extra.js' ], complete : function () { // Run this after everything in this group has downloaded // and executed, as well everything in all previous groups myApp.init(); } }, // Run analytics after you've already run the rest of your app. 'post-analytics.js' ]);
    • 23. @yottaa #WebPerf Using Modernizr Modernizr.load([ { load: '//', complete: function () { if ( !window.jQuery ) { Modernizr.load('js/libs/jquery-1.7.1.min.js'); } } }, { // This will wait for the fallback to load and // execute if it needs to. load: 'needs-jQuery.js' } ]); • Modernizr attempts to load a script that requires jQuery • Immediately after, it tests to determine whether the jQuery object is available • If not, loads a local copy of jQuery WIN: Modernizr.load handles the execution order for you.
    • 24. @yottaa #WebPerf Useful Links The All-In-One Entirely-Not-Alphabetical No- Bullshit Guide to HTML5 Fallbacks (yes, really) Writing Cross-Browser JavaScript Polyfills Ultimate Guide to Mobile Emulators & Simulators
    • 25. @yottaa #WebPerf Has.js phiggins42./has.js on Github For development with JavaScript Self-contained tests & unified framework Checks for native browser support of JavaScript features Modular/a-la-carte to test only what you need if(has("function- bind")){ // your enviroment has a native Function.prototype.bin d }else{ // you should get a new browser. }
    • 26. @yottaa #WebPerf Networks @yottaa #WebPerf
    • 27. @yottaa #WebPerf AT&T Application Resource Optimizer • All Platforms – pcap/tcpdump network trace – Wi-Fi Hotspot + Wireshark/NetMon • iOS – Remote Virtual Interface – Uses Instruments to collect pcap over 3G/LTE • Android – Native Collector – Requires root
    • 28. @yottaa #WebPerf Close Connections HttpURLConnection getimagecloseconn = (HttpURLConnection) urln.openConnection(); getimagecloseconn.setRequestProperty("connection", "close"); getimagecloseconn.connect(); String cachecontrol = getimagecloseconn.getHeaderField("Cache- Control"); InputStream isclose = getimagecloseconn.getInputStream(); bitmap = BitmapFactory.decodeStream(isclose); getimagecloseconn.disconnect(); >80% of apps DO NOT close connections!
    • 29. @yottaa #WebPerf Cache Your Data • 17% of mobile traffic is duplicate downloads – Reading from local cache is 75-99% faster than downloading from the web – Even when supported, it’s OFF by default!! • Each file uniquely tagged, revalidated for reach request – Requests use the radio, drain the battery – Also add 500-3,000 ms of latency • Carefully assign Max-Age times – App won’t check for the file on server until reached – Retrieval is strictly file processing: up to 98% faster, no radio
    • 30. @yottaa #WebPerf Manage Connections if (Tel.getDataActivity() >0){ if (Tel.getDataActivity() <4){ //ok, we are passed the minimum time to check //and we found network activity- //download the image here using image getter imagegetter(counter, numberofimages); //and show the ad AdRequest adRequest = new AdRequest(); adRequest.addTestDevice(AdRequest.TEST_EMULATOR); adView.loadAd(adRequest); // Initiate a generic request to load it with an ad adView.loadAd(new AdRequest()); Grouping data, ads, analytics can save > 50%
    • 31. @yottaa #WebPerf Real Life @yottaa #WebPerf
    • 32. @yottaa #WebPerf DIY - Move Yourself • Lose the signal – Find a basement or elevator • Mix it up – Walk in and out of WiFi areas • Have a cuppa – Find slow, saturated WiFi (coffee shop, train) • Shut up and drive – Ride along in a car to swap towers, signals • Paint a picture – Map your findings to understand and prioritize
    • 33. @yottaa #WebPerf Device @yottaa #WebPerf
    • 34. @yottaa #WebPerf Yottaa Mobile Performance Testing Understand performance across the globe See iOS and Android end user rendering (diffs) Verify graceful degradation across various networks Mobile Monitoring Eliminate downtime, errors Understand site performance & competitive position Prioritize optimization, feature work w/historical analysis Mobile Optimization Overcome slow / variable networks with adaptive infrastructure Optimize dynamic content: offload bandwidth, intelligently cache, adapt images Maximize user experience with federated CDN delivery, global server load balancing Guarantee availability and network elasticity by analyzing and managing traffic
    • 35. @yottaa #WebPerf In Summary Heavily tested hybrid apps are most likely the ideal solution Native is more work, but nets a better experience There is no substitute for real world testing If there’s a tool, use it! ARO, Ringmark, Modernizr, Yottaa Mobile networks are unreliable. Code for graceful degradation
    • 36. @yottaa #WebPerf Thank You! Follow us! @yottaa @yottaa #WebPerf