Running phantomas against single page applications

[macbre]

@william-p / @gmetais - any suggestions / examples?

• measuring transitions between application states
• triggering events (from phantomas run) that causes application transition

[gmetais]

Measuring all the metrics while changing from page A to page B sounds definitely interesting to me. I never analyzed webperf on this kind of transition but I'm curious to see the results. Also I don't know any tool able to do it and that's a good enough reason to make it.

SPA can be very CPU consuming on transitions, when new data needs to be transformed into DOM elements that are then rendered with the correct style and bound to events. I guess most of the frameworks do all of this in a single shot (synchronous JS) so it might be possible to measure this CPU time. Probably difficult, but possible.

Not-parallelized ajax calls could be a performance problem too: a first call to the API triggers a second call, which triggers a third call... Don't know if it's a real case though.

I'll try to think of some other possible problems.

[gmetais]

Here are some nice JS snippets that measure some Angular specific metrics:
https://github.com/bahmutov/code-snippets#angular-performance (thank you @bahmutov !)

This can be a good starting point for transitions measurements. We probably won't be able to get metrics that work for every JS framework, so being framework specific could be a good solution.

[gmetais]

Last week I saw a great Velocity Conf talk, called "Measuring the performance of SPAs", by @nicjansma and @bluesmoon (hi there!). Both of them are contributors in Boomerang, a RUM tool. They are working on having similar metrics for a SPA.

Slides are here: http:https://fr.slideshare.net/nicjansma/measuring-the-performance-of-single-page-applications

TL;DR It's not easy. Here is what they do:

• listen to page change events sent by the different frameworks,
• wrap the XHR methods to capture Ajax metrics
• use DOM Observers to detect new images in the DOM and capture onload
• add some intelligence to avoid false detections

[nicjansma]

Thanks @gmetais, this is a really cool project that I hadn't heard about before.

The SPA-monitoring code we have is in akamai/boomerang#68 in plugins/auto_xhr.js. It's rather complex, and is still being tweaked.

Monitoring SPAs is hard!

[macbre]

@gmetais, thanks for the links. I guess one would need to write an app-specific custom module to monitor single page application.