grunt js for the enterprise vol.1: frontend performance with phantomas
DESCRIPTION
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 AmendTRANSCRIPT
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
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