So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Experience Optimization...
-
date post
20-Sep-2014 -
Category
Education
-
view
3 -
download
0
description
Transcript of So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Experience Optimization...
@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