Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

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

2.258 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software, Technologie, Business
  • Als Erste(r) kommentieren

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

×