AppSphere 15 - How Your Monitoring Strategy Needs to Evolve for Single Page Apps

Download AppSphere 15 - How Your Monitoring Strategy Needs to Evolve for Single Page Apps

Post on 22-Mar-2017

255 views

Category:

Documents

0 download

TRANSCRIPT

How your monitoring strategy needs to evolve for Single Page Apps Ian Withrow Group Product Manager End User Monitoring What Are Single Page Applications? Copyright 2015 AppDynamics. All rights reserved. 2 . . . All necessary code HTML, JavaScript, and CSS is retrieved with a single page load or the appropriate resources are dynamically loaded and added to the page as necessary . . . can provide the perception and navigability of separate logical pages in the application Source: Randen Pederson (eye), (flickr) Traditional Web Page vs. SPA Architectures Copyright 2015 AppDynamics. All rights reserved. 3 Traditional SPA http://www.slideshare.net/NishantKumar162/comparative-analysis-of-java-script-framework SPA Example: USA Today Copyright 2014 AppDynamics. All rights reserved. 4 SPA can deliver more dynamic & faster apps Copyright 2015 AppDynamics. All rights reserved. 5 Source: THOR (flickr) Shift code onto clients Copyright 2015 AppDynamics. All rights reserved. 6 Source: Neil Kremer, (flickr) iPhone processing power over generations Copyright 2015 AppDynamics. All rights reserved. 7 Source: http://powerboard.basemark.com/compare?devices=206,2606,9310 SPAs can send less data good for wireless Copyright 2015 AppDynamics. All rights reserved. 8 Source: brett jordan, (flickr) The skill set is available 0 100000 200000 300000 400000 500000 600000 JavaScript Java .Net Resume hits on Indeed Copyright 2015 AppDynamics. All rights reserved. 9 Some popular SPA Frameworks Copyright 2015 AppDynamics. All rights reserved. 10 Some key differences between frameworks Copyright 2015 AppDynamics. All rights reserved. 11 http://www.developereconomics.com/feature-comparison-of-4-popular-js-mv-frameworks/ Things to watch out with SPA: Page bloat AngularJS 39.5kb Backbone.js 43.5kb Ember.js 136.2kb Critical path should be Wouldnt it be great if there were performance monitoring tools for SPA? Copyright 2015 AppDynamics. All rights reserved. 14 The traditional model for performance tools pageview = user experience This is pretty much industry standard for everyone This worked because page load data was easy to get and reasonably relevant Copyright 2015 AppDynamics. All rights reserved. 15 Unfortunately SPAs dont load pages Copyright 2015 AppDynamics. All rights reserved. 16 Source: magic4walls SPA monitoring version 1 The industrys first attempt was this: Monitor Ajax performance Take really long browser snapshots While these features had their own inherent value Copyright 2015 AppDynamics. All rights reserved. 17 Source: Chris Bastian, (flickr) Users were not impressed Copyright 2015 AppDynamics. All rights reserved. 18 We need a new model A good model: Measures what users actually see What we need is this: Page views = user experience Copyright 2015 AppDynamics. All rights reserved. 19 Everything old is new again Copyright 2015 AppDynamics. All rights reserved. 20 AppDynamics model for virtual page experience Its a hierarchy Virtual page = view = user experience Ajax = the data layer Eventually can do things like page components Copyright 2015 AppDynamics. All rights reserved. 21 Source: Hans Splinter, (flickr) Ajax as the data layer raises on interesting contradiction AJAX literally stands for Asyncronous JavaScript and XML However these requests can often be effectively synchronous from the views perspective. Ajax is being used in a way not intended Copyright 2015 AppDynamics. All rights reserved. 22 Progress to as of 4.1.x with this model Automatic Detection of Angular JS uirouter and ngrouter A route update = view Naming rules treat virtual pages the same as pages Associate concurrent Ajax requests based on time Copyright 2015 AppDynamics. All rights reserved. 23 SPA Monitoring Virtual Page Waterfall Copyright 2015 AppDynamics. All rights reserved. 24 Related Ajax associated Growth in SPA framework usage is accelerating Copyright 2014 AppDynamics. All rights reserved. 25 Source: Builtwith.com What about everyone else? Copyright 2015 AppDynamics. All rights reserved. 26 Manual API in 4.2 Report own virtual page timings regardless of framework (or lack thereof) Copyright 2015 AppDynamics. All rights reserved. 27 Wine details code example Copyright 2015 AppDynamics. All rights reserved. 28 Tricky issue: Which Ajax should be related?! Examples: Keep-alives Concurrent virtual page loads Two solutions: Exclude/include rules Manual association Copyright 2015 AppDynamics. All rights reserved. 29 Source: Diego David Garcia, (flickr) Exclude example Copyright 2015 AppDynamics. All rights reserved. 30 Manual association example Copyright 2015 AppDynamics. All rights reserved. 31 In sum: With the new virtual pages capability you can Setup health rules, policies, & actions See the underlying network calls Treat as a page in sessions Copyright 2015 AppDynamics. All rights reserved. 32 Source: Sascha (cable) ,Andrew aka Aushiker (beer), (flickr) Copyright 2015 AppDynamics. All rights reserved. 33 Text example Lead-in sentence goes in this spot. Arial font, no period at the end First level demotion has a round bullet Second level demotion has a standard en-dash All demotion levels should use the same font size Copyright 2015 AppDynamics. All rights reserved. 34 Note: Slide titles are in sentence case - NOT IN UPPERCASE - Not In Title Caps Note: Page numbers should appear on every page with limited exception