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

  • 1,804 views
Uploaded 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.

More in: Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,804
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
16
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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
  • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
  • 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:
  • https://github.com/phiggins42/has.js
  • http://bit.ly/133ixOB
  • https://github.com/attdevsupport/ARO/tree/master/2013DevSummitTurbocharge
  • http://bit.ly/12Kl2lp
  • http://bit.ly/12Klct4

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 http://ti.me/18FeIn4
  • 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. @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. @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. @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 http://bit.ly/15NdyAg
  • 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… http://blog.flurry.com 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
  • 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. @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 http://bit.ly/133ijam
  • 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. @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 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. @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( event.data === "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: http://www.browserscope.org/?category=ringmark&v=top-m http://www.youtube.com/watch?v=8KAXh81hIwY
  • 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: '//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. @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. @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 https://github.com/attdevsupport/ARO
  • 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 http://soc.att.com/138bhRJ http://yhoo.it/1c6wcHV
  • 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 http://bit.ly/14MOmNr
  • 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 http://www.yottaa.com
  • 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 www.yottaa.com/signup @yottaa #WebPerf