Performance monitoring measurement angualrjs single page apps with phantomas

1. Phantomas
Web Performance Monitoring
and Angular.js

2. Performance
Do not investigate
time in fixing
performance issues,
if none actually
exists!*
* if costs more effort

3. Frontend-Performance Monitoring

4. Angular performance monitoring
http://kentcdodds.com/ng-stats/

5. Know about Performance passively !

6. Ready for Continous Integration

7. History Comparison

8. Knownledge About Every Step !

10. WTF Phantomas?

11. JavaScript VM
Node
Phantom.js
Phantomas
Grunt-Phantomas
Phantomas-Grunt
JenkinsNavigation
Timing API
D3 ChartsHTML-Page
tap
statsd
csv
json

12. Focus Frontend Only
→ No latency

13. Easy Setup
phantomas: {
gruntSite : {
options : {
indexPath : './phantomas/',
options : {},
url : 'http://gruntjs.com/',
buildUi : true
}
}
}

14. Phantomas: Metrics
Requests monitor
Assets types
DOM complexity
Event listeners
Window performance
jQuery/Angular bound events, analyse-css
...

15. Grunt-Devperf: HTML-Page

16. Scriptable Metrics
if (typeof window.__phantomas !== 'undefined') {
(function(phantomas) {
phantomas.setMarkerMetric('actionFooBar');
})(window.__phantomas);
}
https://github.com/bahmutov/code-snippets#angular-performance

17. DEMO
phantomas http://localhost/ > perf.log

18. Know about Performance passively !

19. Questions ?

21. 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

22. Performance
Reports
JSON
CSV
TAP
StatsDElasticSearch
Export Formats

23. D3 Tables

25. Additional Information

26. Additional Information

27. Filmstrips

28. Runs Everywhere
JavaScriptVM
Headless-Phantom
=