View
6
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
@yottaa #WebPerf
So you want to build a mobile app…
Brought to you by:
@yottaa #WebPerf
Available info, tooling driven by market
http://ti.me/18FeIn4
@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
@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/
@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
@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
@yottaa #WebPerf
For LinkedIN it the ecosystem was lacking
2012: HTML5 for efficiency & agility
8-10%Mobileusers
Appsrunningout ofMemory
Lackedtesting &profiling
2013: Native for user experience
Majority of Traffic from
mobile
Betterfeatures (useHTML5, CSS
for email)
Apple andGoogle drive
innovation
http://bit.ly/15NdyAg
@yottaa #WebPerf
High-level OverviewGoverning body: W3C• 5 years to ratify…• 200+ browser
interpretations
More security vulnerabilities• Can’t encrypt cached
data• Encrypting data in
motion compromises performance
@yottaa #WebPerf
High-level OverviewGoverning 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
@yottaa #WebPerf
OK, to be fair…
http://blog.flurry.com
Over the past two years, Android has had 21 updates to their browser.
@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
@yottaa #WebPerf
A bit of trivia
http://bit.ly/15iQlqz
STARTUP TIME W/8 TABSAVERAGE STARTUP TIME40-TAB LOAD (CACHED, HOT)WEBKIT SUNSPIDERJSBENCHFACEBOOK JSGAMEBENCHHARDWARE ACCELERATIONPAGE LOAD RELIABILITYOVERALL WINNER
@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?
@yottaa #WebPerf
Appearances
http://bit.ly/133ijam
@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
@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
@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
@yottaa #WebPerf
Grab the brass browser ringRing 0State 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 1Enable 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)
@yottaa #WebPerf
How Ringmark workstest("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", "*" );});
@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
@yottaa #WebPerf
Modernizrjavascript 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
@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']);
@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.
@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 Polyfillshttp://addyosmani.com/blog/writing-polyfills/
Ultimate Guide to Mobile Emulators & Simulatorshttp://www.mobilexweb.com/emulators
@yottaa #WebPerf
Has.jsphiggins42./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.bind}else{ // you should get a new browser.}
@yottaa #WebPerf
Networks
@yottaa #WebPerf
@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
@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!
@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
@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%
@yottaa #WebPerf
Real Life
@yottaa #WebPerf
@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
@yottaa #WebPerf
Device
@yottaa #WebPerf
@yottaa #WebPerf
Yottaa
Mobile Performance TestingUnderstand performance across the globeSee iOS and Android end user rendering (diffs)Verify graceful degradation across various networks
Mobile MonitoringEliminate downtime, errorsUnderstand site performance & competitive positionPrioritize optimization, feature work w/historical analysis
Mobile OptimizationOvercome slow / variable networks with adaptive infrastructureOptimize dynamic content: offload bandwidth, intelligently cache, adapt imagesMaximize user experience with federated CDN delivery, global server load balancingGuarantee availability and network elasticity by analyzing and managing traffic
http://www.yottaa.com
@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
@yottaa #WebPerf
Thank You!
Follow us! @yottaa
www.yottaa.com/signup
@yottaa #WebPerf