Grunt.js for the EnterpriseVol. 1

Phantomas: Performance Monitoring

David Amend● Java Web-Developer, Frontend Architecture● Backbone, Ember, Angular, Grunt.js

Interests: JavaScript, TypeScript, Triathlon-Sports

About

David.Amend@it-amend.de

Grunt.js

Build tool like: Rake, ant, maven, groovy, yeoman, …

Runs as npmEasy JSON-SyntaxSupports in Continous Integration

Frontend-Performance Monitoring

WTF Phantomas?

Ready for Continous Integration

History Comparison

Knownledge About Every Step !

JavaScript VM

Node

Phantom.js

Phantomas

Grunt-Phantomas

Phantomas-Grunt

Navigation Timing API

D3 ChartsHTML-Page

Focus Frontend Only→ No latency

PerformanceReports

JSONCSV

TAP

StatsDElasticSearch

Export Formats

Runs Everywhere

JavaScriptVM Headless-Phantom

=

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

● ...

Scriptable Metrics

if (typeof window.__phantomas !== 'undefined') { (function(phantomas) { phantomas.setMarkerMetric('actionFooBar'); })(window.__phantomas);}

Custom Metrics / Assertions

Some Parameters:

--wait-for-selector=[CSS selector] --post-load-delay=[seconds]--proxy=[host:port]--phone viewport--runs 5

Phantomas-Juve: Simple Node Assertions

Grunt-devperf: Overview & Warnings

Grunt-Devperf: HTML-Page

D3 Tables

Additional Information

Additional Information

Filmstrips

Summary

● One and only tool available● Navigation API not always trustable?!● Some buggy Charts● Usage of Navigation API Specification● E2E-Testing pluggable● Easy to setup● Wishlist is high

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