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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (16)

Andere mochten auch

Andere mochten auch (20)

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

Ähnlich wie AppSphere 15 - How Your Monitoring Strategy Needs to Evolve for Single Page Apps (20)

Mehr von AppDynamics

Mehr von AppDynamics (20)

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