Phantomas

Web Performance Monitoring

and Angular.js

Performance

Do not investigate

time in fixing

performance issues,

if none actually

exists!*

* if costs more effort

Frontend-Performance Monitoring

Angular performance monitoring

http://kentcdodds.com/ng-stats/

Know about Performance passively !

Ready for Continous Integration

History Comparison

Knownledge About Every Step !

WTF Phantomas?

JavaScript VM

Node

Phantom.js

Phantomas

Grunt-Phantomas

Phantomas-Grunt

JenkinsNavigation Timing API

D3 ChartsHTML-Page

tap

statsd

csv

json

Focus Frontend Only

→ No latency

Easy Setup

phantomas: {

gruntSite : {

options : {

indexPath : './phantomas/',

options : {},

url : 'http://gruntjs.com/',

buildUi : true

}

}

}

Phantomas: Metrics

Requests monitor

Assets types

DOM complexity

Event listeners

Window performance

jQuery/Angular bound events, analyse-css

...

Grunt-Devperf: HTML-Page

Scriptable Metrics

if (typeof window.__phantomas !== 'undefined') {

(function(phantomas) {

phantomas.setMarkerMetric('actionFooBar');

})(window.__phantomas);

}

https://github.com/bahmutov/code-snippets#angular-performance

DEMO

phantomas http://localhost/ > perf.log

Know about Performance passively !

Questions ?

Sources

https://github.com/stefanjudis/grunt-phantomas

http://www.sunnytechblog.com/wp-content/uploads/computer-virus-Computer-slowing-down.jpg

http://thumbs.dreamstime.com/x/unstable-equilibrium-21968412.jpg

http://blog.trnd.com/wordpress/wp-content/uploads/2012/09/Staples-Easy-Button.jpg

http://www.netdirector.biz/wp-content/uploads/2014/04/automate-2.gif

PerformanceReports

JSONCSV

TAP

StatsDElasticSearch

Export Formats

D3 Tables

Additional Information

Additional Information

Filmstrips

Runs Everywhere

JavaScriptVM Headless-Phantom

=