Grunt.js for the Enterprise
Vol. 1
Phantomas: Performance Monitoring
DavidAmend
● Java Web-Developer, Frontend Architecture
● Backbone, Ember, Angular, Grunt.js
Interests:
JavaScript, TypeScr...
Grunt.js
Build tool like:
Rake, ant, maven, groovy, yeoman, …
Runs as npm
Easy JSON-Syntax
Supports in Continous Integrati...
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/',
b...
Phantomas: Metrics
● Requests monitor
● Assets types
● DOM complexity
● Event listeners
● Window performance
● jQuery/Angu...
Scriptable Metrics
if (typeof window.__phantomas !== 'undefined') {
(function(phantomas) {
phantomas.setMarkerMetric('acti...
Custom Metrics / Assertions
Some Parameters:
--wait-for-selector=[CSS selector]
--post-load-delay=[seconds]
--proxy=[host:...
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 AP...
Questions ?
Sources
https://github.com/stefanjudis/grunt-phantomas
http://www.sunnytechblog.com/wp-content/uploads/computer-virus-Comp...
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Upcoming SlideShare
Loading in...5
×

Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas

865

Published on

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

Published in: Software, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
865
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas

  1. 1. Grunt.js for the Enterprise Vol. 1 Phantomas: Performance Monitoring
  2. 2. DavidAmend ● Java Web-Developer, Frontend Architecture ● Backbone, Ember, Angular, Grunt.js Interests: JavaScript, TypeScript, Triathlon-Sports About David.Amend@it-amend.de
  3. 3. Grunt.js Build tool like: Rake, ant, maven, groovy, yeoman, … Runs as npm Easy JSON-Syntax Supports in Continous Integration
  4. 4. Frontend-Performance Monitoring
  5. 5. WTF Phantomas?
  6. 6. Ready for Continous Integration
  7. 7. History Comparison
  8. 8. Knownledge About Every Step !
  9. 9. JavaScript VM Node Phantom.js Phantomas Grunt-Phantomas Phantomas-Grunt Navigation Timing API D3 ChartsHTML-Page
  10. 10. Focus Frontend Only → No latency
  11. 11. Performance Reports JSON CSV TAP StatsDElasticSearch Export Formats
  12. 12. Runs Everywhere JavaScriptVM Headless-Phantom =
  13. 13. Easy Setup phantomas: { gruntSite : { options : { indexPath : './phantomas/', options : {}, url : 'http://gruntjs.com/', buildUi : true } } }
  14. 14. Phantomas: Metrics ● Requests monitor ● Assets types ● DOM complexity ● Event listeners ● Window performance ● jQuery/Angular bound events, analyse-css ● ...
  15. 15. Scriptable Metrics if (typeof window.__phantomas !== 'undefined') { (function(phantomas) { phantomas.setMarkerMetric('actionFooBar'); })(window.__phantomas); }
  16. 16. 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
  17. 17. Grunt-Devperf: HTML-Page
  18. 18. D3 Tables
  19. 19. Additional Information
  20. 20. Additional Information
  21. 21. Filmstrips
  22. 22. 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
  23. 23. Questions ?
  24. 24. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×