• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
 

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

on

  • 271 views

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

Statistics

Views

Total Views
271
Views on SlideShare
268
Embed Views
3

Actions

Likes
1
Downloads
1
Comments
0

2 Embeds 3

http://www.slideee.com 2
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Grunt.js for the Enterprise Vol. 1 Phantom.js
    • DavidAmend ● Java Web-Developer, Frontend Architecture ● Backbone, Ember, Angular, Grunt.js Interests: JavaScript, TypeScript, Triathlon-Sports About David.Amend@it-amend.de
    • Grunt.js Build tool like: Rake, ant, maven, groovy, yeoman, … Runs as npm Easy JSON-Syntax Supports 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
    • 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/', 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