Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,662 views

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 (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

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

  1. 1. @yottaa #WebPerf So you want to build a mobile app… Brought to you by:
  2. 2. @yottaa #WebPerf Available info, tooling driven by market http://ti.me/18FeIn4
  3. 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% http://bit.ly/1bRw6FC
  4. 4. @yottaa #WebPerf Prioritize further: who are your users? Your momma’s… got game! It’s actually Gen-Xers. Millennials are into fitness & entertainment http://blog.flurry.com/
  5. 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 http://bit.ly/17G1Ng5
  6. 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. 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 http://bit.ly/15NdyAg
  8. 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. 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. 10. @yottaa #WebPerf OK, to be fair… http://blog.flurry.com Over the past two years, Android has had 21 updates to their browser.
  11. 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
  12. 12. @yottaa #WebPerf A bit of trivia http://bit.ly/15iQlqz STARTUP TIME W/8 TABS AVERAGE STARTUP TIME 40-TAB LOAD (CACHED, HOT) WEBKIT SUNSPIDER JSBENCH FACEBOOK JSGAMEBENCH HARDWARE ACCELERATION PAGE LOAD RELIABILITY OVERALL WINNER
  13. 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. 14. @yottaa #WebPerf Appearances http://bit.ly/133ijam
  15. 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 http://bit.ly/17G2hTH
  16. 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. 17. @yottaa #WebPerf rng.io - Ringmark OSS maintained by Facebook @ https://github.com/facebook/rng.io Native UX testing & development Works with existing W3C tests Full list of supported features across browsers: http://bit.ly/1c0jDOj Check whether an API is usable & produces expected, specified output
  18. 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. 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( event.data === "This is Ground Control", "message content matched expected" ); async.done(); }); }; window.postMessage( "This is Ground Control", "*" ); });
  20. 20. @yottaa #WebPerf Lord of the Rings: Dolphin (and BB10) Also: http://www.browserscope.org/?category=ringmark&v=top-m http://www.youtube.com/watch?v=8KAXh81hIwY
  21. 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. 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. 23. @yottaa #WebPerf Using Modernizr Modernizr.load([ { load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', 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. 24. @yottaa #WebPerf Useful Links The All-In-One Entirely-Not-Alphabetical No- Bullshit Guide to HTML5 Fallbacks (yes, really) http://bit.ly/12griWY Writing Cross-Browser JavaScript Polyfills http://addyosmani.com/blog/writing-polyfills/ Ultimate Guide to Mobile Emulators & Simulators http://www.mobilexweb.com/emulators
  25. 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. 26. @yottaa #WebPerf Networks @yottaa #WebPerf
  27. 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 https://github.com/attdevsupport/ARO
  28. 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. 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 http://soc.att.com/138bhRJ http://yhoo.it/1c6wcHV
  30. 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. 31. @yottaa #WebPerf Real Life @yottaa #WebPerf
  32. 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 http://bit.ly/14MOmNr
  33. 33. @yottaa #WebPerf Device @yottaa #WebPerf
  34. 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 http://www.yottaa.com
  35. 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. 36. @yottaa #WebPerf Thank You! Follow us! @yottaa www.yottaa.com/signup @yottaa #WebPerf

×