Grunt.js for the Enterprise
Vol. 1
Phantomas: Performance Monitoring

DavidAmend
● 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 npm
Easy JSON-Syntax
Supports 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

Performance
Reports
JSON
CSV
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