Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

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

Libros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo
  • Sé el primero en comentar

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

×