Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas. This is the first presentation of an upcoming series to achieve a proper Continous Integration process for big JavaScript projects, memory leaks javascript, David Amend

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

2. DavidAmend
● Java Web-Developer, Frontend Architecture
● Backbone, Ember, Angular, Grunt.js
Interests:
JavaScript, TypeScript, Triathlon-Sports
About
David.Amend@it-amend.de

4. Grunt.js
Build tool like:
Rake, ant, maven, groovy, yeoman, …
Runs as npm
Easy JSON-Syntax
Supports in Continous Integration

5. Frontend-Performance Monitoring

6. WTF Phantomas?

7. Ready for Continous Integration

8. History Comparison

9. Knownledge About Every Step !

11. JavaScript VM
Node
Phantom.js
Phantomas
Grunt-Phantomas
Phantomas-Grunt
Navigation
Timing API
D3 ChartsHTML-Page

12. Focus Frontend Only
→ No latency

13. Performance
Reports
JSON
CSV
TAP
StatsDElasticSearch
Export Formats

14. Runs Everywhere
JavaScriptVM
Headless-Phantom
=

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

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

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

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

19. Grunt-Devperf: HTML-Page

20. D3 Tables

22. Additional Information

23. Additional Information

24. Filmstrips

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

26. Questions ?

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