View
270
Download
0
Category
Preview:
Citation preview
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 <= 14k (one RTT)
• So first page load will likely be slower
Copyright © 2015 AppDynamics. All rights reserved. 13
Source: yukariryu, (flickr)
Wouldn’t 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 don’t load pages
Copyright © 2015 AppDynamics. All rights reserved. 16
Source: magic4walls
SPA monitoring version 1
• The industry’s 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
It’s 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 view’s 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
Recommended