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

  • Published on
    22-Mar-2017

  • View
    255

  • Download
    0

Embed Size (px)

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