appsphere 15 - how your monitoring strategy needs to evolve for single page apps

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


Traditional SPA

http://www.slideshare.net/NishantKumar162/comparative-analysis-of-java-script-framework

SPA Example: USA Today


SPA can deliver more dynamic & faster apps


Source: THOR (flickr)

Shift code onto clients


Source: Neil Kremer, (flickr)

iPhone processing power over generations


Source: http://powerboard.basemark.com/compare?devices=206,2606,9310

SPAs can send less data – good for wireless


Source: brett jordan, (flickr)

The skill set is available

0 100000 200000 300000 400000 500000 600000

JavaScript

Java

.Net

Resume hits on Indeed


Some popular SPA Frameworks


Some key differences between frameworks


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


Source: yukariryu, (flickr)

Wouldn’t it be great if there were performance monitoring tools for SPA?


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


Unfortunately SPAs don’t load pages


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…


Source: Chris Bastian, (flickr)

Users were not impressed


We need a new model

•  A good model: Measures what users actually see

•  What we need is this:

•  Page views = user experience


Everything old is new again


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


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


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


SPA Monitoring Virtual Page Waterfall


Related Ajax associated

Growth in SPA framework usage is accelerating


Source: Builtwith.com

What about everyone else?


Manual API in 4.2

Report own virtual page timings regardless of framework (or lack thereof)


Wine details code example


Tricky issue: Which Ajax should be related?!

•  Examples: –  Keep-alives –  Concurrent virtual page

loads

•  Two solutions: –  Exclude/include rules –  Manual association


Source: Diego David Garcia, (flickr)

Exclude example


Manual association example


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


Source: Sascha (cable) ,Andrew aka Aushiker (beer), (flickr)

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


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

appsphere 15 - how your monitoring strategy needs to evolve for single page apps

Documents