RubyGems - surfnperf - Versions diffs - 1.0.2 - Mend

surfnperf 1.0.2

Files changed (7) hide show

checksums.yaml +7 -0
data/README.md +126 -0
data/app/views/surfnperf/_head.html.erb +31 -0
data/lib/surfnperf.rb +21 -0
data/lib/surfnperf/rails.rb +6 -0
data/vendor/assets/javascripts/surfnperf.js +361 -0
metadata +77 -0

checksums.yaml ADDED Viewed

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c4c7403d39855f590d1dd5e2c2345237274bf602
+  data.tar.gz: 6e855ec75d1e8b0635c9e4ab5b6597518609da26
+SHA512:
+  metadata.gz: 52b75f11f6a00ba94a4a5e2d246d26860038dd0d9beac2371468a9059394620c794e562c2ff804813897589bd4fb9b9312d300eaa128408b9f61ce54161cb807
+  data.tar.gz: a9aba799e9f43869e3a45d0eb82acc8f63c17640db5e6f2c7309f0834d9608a299a40165e5c11e6a2b29370e2da3002c596f288a11e5e77fcec1fb7e557da3bf

data/README.md ADDED Viewed

@@ -0,0 +1,126 @@
+Surf-N-Perf
+==============
+Micro-library for gathering frontend web page performance data.
+[![Build Status](https://travis-ci.org/Comcast/Surf-N-Perf.svg?branch=master)](https://travis-ci.org/Comcast/Surf-N-Perf)
+## Usage
+### Including the code in your project
+There are 2 pieces of code that need to be included in your webpage:
+**1.** The following code must be included as high up in the source code of your base HTML document as possible, ideally right after the opening ```<head>``` tag:
+```html
+<script>
+  var SURF_N_PERF = {
+    marks: {},
+    highResMarks: {}
+  };
+  SURF_N_PERF.marks.pageStart = (new Date()).getTime();
+  if(window.performance) {
+    if(window.performance.now) {
+      SURF_N_PERF.highResMarks.pageStart = window.performance.now();
+    }
+    if(window.performance.mark) {
+      window.performance.mark('pageStart');
+    }
+  }
+  SURF_N_PERF.setPageLoad = function() {
+    SURF_N_PERF.marks.loadEventEnd = (new Date()).getTime();
+    if(window.performance && window.performance.now) {
+      SURF_N_PERF.highResMarks.loadEventEnd = window.performance.now();
+    }
+  };
+  if(window.addEventListener) {
+    window.addEventListener('load', SURF_N_PERF.setPageLoad, false);
+  } else {
+    window.attachEvent('onload', SURF_N_PERF.setPageLoad);
+  }
+</script>
+```
+That provides support for the following:
+- A "pageStart" mark for browsers that do not support [Navigation Timing](http://www.w3.org/TR/navigation-timing/) which can be used to compute durations from when the page first started loading (specifically, this mark falls between the [domLoading](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-domloading) and [domInteractive](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-dominteractive) attributes of Navigation Timing)
+- "pageStart" marks for browsers that support [High Resolution Time](http://www.w3.org/TR/hr-time/) and/or [User Timing](http://www.w3.org/TR/user-timing/) so that "pageStart" can be used as a consistent starting point for duration calculations across all browsers regardless of their supported features
+- A "loadEventEnd" mark for browsers that do not support [Navigation Timing](http://www.w3.org/TR/navigation-timing/) which can be used to compute durations from when the load event of the document is completed ([loadEventEnd](http://www.w3.org/TR/navigation-timing/#dom-performancetiming-loadend))
+- A "loadEventEnd" [DOMHighResTimeStamp](http://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp) mark for calculating high resolution durations between a Navigation Timing mark and a user mark in browsers that support [High Resolution Time](http://www.w3.org/TR/hr-time/) but don't support [User Timing](http://www.w3.org/TR/user-timing/)
+**2.** Then just drop the [surfnperf.min.js](https://github.com/Comcast/Surf-N-Perf/blob/master/surfnperf.min.js) in your codebase and reference that JavaScript file in your HTML document. If you're using [RequireJS](http://requirejs.org/) or [Browserify](http://browserify.org/), it registers itself as 'surfnperf'.
+### Storing & Retrieving Performance Data
+Details in the [JavaScript API](https://github.com/Comcast/Surf-N-Perf/wiki/JavaScript-API) page in the wiki
+## Ruby Project Integration
+### Using within a Rails project
+The [surfnperf Ruby Gem](https://rubygems.org/gems/surfnperf) allows you to quickly & easily integrate Surf-N-Perf into your Rails projects. To include the necessary files, add `surfnperf` to your `Gemfile`:
+```ruby
+gem 'surfnperf'
+```
+After a `$ bundle install`, you'll be able to include the [main JavaScript file](https://github.com/Comcast/Surf-N-Perf/blob/master/surfnperf.js) in your JavaScript manifest by simply adding:
+```
+//= require surfnperf
+```
+The necessary script for the ```<head>``` of your HTML document is also available to you via a [partial template](http://guides.rubyonrails.org/layouts_and_rendering.html#using-partials) that you can include in the appropriate layout file for your page, such as `app/views/layouts/application.html.erb` by simply adding this line:
+```erb
+<%= render "surfnperf/head" %>
+```
+Those 3 lines of code are all your need to get started using Surf-N-Perf in Rails!
+### Using within other Ruby projects that integrate with Sprockets
+[Sprockets](https://github.com/sstephenson/sprockets) is what powers the [Asset Pipeline](http://guides.rubyonrails.org/asset_pipeline.html) in Rails, as well as other Ruby website tools such as [Middleman](https://middlemanapp.com/). For these other Ruby projects that use [Sprockets](https://middlemanapp.com/advanced/asset_pipeline/), integration is similar to the Rails instructions above, with one extra step:
+Add `surfnperf` to your `Gemfile`:
+```ruby
+gem 'surfnperf'
+```
+After a `$ bundle install`, include [surfnperf.js](https://github.com/Comcast/Surf-N-Perf/blob/master/surfnperf.js) in your JavaScript manifest by adding:
+```
+//= require surfnperf
+```
+For now, you'll have to manually include the [necessary script](#including-the-code-in-your-project) for the ```<head>``` of your HTML document. If someone would like to update the Ruby Gem to work as a proper [Middleman Extension](https://middlemanapp.com/advanced/custom_extensions/), we'd happily accept a [pull request](https://github.com/Comcast/Surf-N-Perf/issues/35).
+## Running Tests & Other Development Tools
+Tests are written in [Jasmine](http://jasmine.github.io/) and run with [Karma](http://karma-runner.github.io/)
+Install the dependencies by executing this command from the root of your Surf-N-Perf project directory:
+```bash
+$ npm install
+```
+And then run the tests, JSHint, beautify your code & generate the minified file with:
+```bash
+$ grunt dev
+```
+By default, it will run the tests using [PhantomJS](http://phantomjs.org/). You can also run the tests in any browser by going to http://localhost:9876/
+If you encounter an error related to Grunt, it may not be installed, so [go install it](http://gruntjs.com/getting-started).
+## License
+Licensed under the [MIT License](https://github.com/Comcast/Surf-N-Perf/blob/master/LICENSE)

data/app/views/surfnperf/_head.html.erb ADDED Viewed

@@ -0,0 +1,31 @@
+<script>
+  var SURF_N_PERF = {
+    marks: {},
+    highResMarks: {}
+  };
+  SURF_N_PERF.marks.pageStart = (new Date()).getTime();
+  if(window.performance) {
+    if(window.performance.now) {
+      SURF_N_PERF.highResMarks.pageStart = window.performance.now();
+    }
+    if(window.performance.mark) {
+      window.performance.mark('pageStart');
+    }
+  }
+  SURF_N_PERF.setPageLoad = function() {
+    SURF_N_PERF.marks.loadEventEnd = (new Date()).getTime();
+    if(window.performance && window.performance.now) {
+      SURF_N_PERF.highResMarks.loadEventEnd = window.performance.now();
+    }
+  };
+  if(window.addEventListener) {
+    window.addEventListener('load', SURF_N_PERF.setPageLoad, false);
+  } else {
+    window.attachEvent('onload', SURF_N_PERF.setPageLoad);
+  }
+</script>

data/lib/surfnperf.rb ADDED Viewed

@@ -0,0 +1,21 @@
+module SurfNPerf
+  class << self
+    def load!
+      if rails?
+        register_rails_engine
+      end
+    end
+    def rails?
+      defined?(::Rails)
+    end
+    private
+    def register_rails_engine
+      require 'surfnperf/rails'
+    end
+  end
+end
+SurfNPerf.load!

data/lib/surfnperf/rails.rb ADDED Viewed

@@ -0,0 +1,6 @@
+module SurfNPerf
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/vendor/assets/javascripts/surfnperf.js ADDED Viewed

@@ -0,0 +1,361 @@
+/*!
+ * Copyright 2015 Comcast Cable Communications Management, LLC
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+(function(root, factory) {
+  if(typeof define === 'function' && define.amd) {
+    // For Require.js
+    define('surfnperf', factory);
+  } else if(typeof exports === 'object') {
+    // For Browserify
+    module.exports = factory(require('surfnperf'));
+  } else {
+    // Browser global if not using Require.js or Browserify
+    root.surfnperf = factory();
+  }
+}(this, function() {
+  /**
+   * Date.now() shim for older browsers
+   */
+  if(!Date.now) {
+    Date.now = function now() {
+      return new Date().getTime();
+    };
+  }
+  var defaults = function(o, d) {
+      for(var prop in d) {
+        if(!o.hasOwnProperty(prop)) {
+          o[prop] = d[prop];
+        }
+      }
+    },
+    contains = function(array, value) {
+      if(Array.prototype.indexOf) {
+        return array.indexOf(value) != -1;
+      } else {
+        var i, length = array.length;
+        for(i = 0; i < length; i++) {
+          if(array[i] === value) {
+            return true;
+          }
+        }
+        return false;
+      }
+    };
+  /**
+   * Frontend Web Performance Data Gathering
+   *
+   * @class SurfNPerf
+   */
+  var SurfNPerf = function() {
+      this._data = {
+        custom: {},
+        marks: {},
+        highResMarks: {},
+        events: {}
+      };
+      this._navigationTiming = null;
+      this._highResTime = null;
+      this._userTiming = null;
+      this._navigationTimingEvents = {
+        a: ["navigationStart", "unloadEventEnd", "unloadEventStart", "redirectStart", "redirectEnd", "fetchStart", "domainLookupStart", "domainLookupEnd", "connectStart", "secureConnectionStart", "connectEnd", "requestStart", "responseStart", "responseEnd", "domLoading"],
+        b: ["domInteractive", "domContentLoadedEventStart", "domContentLoadedEventEnd", "domComplete", "loadEventStart", "loadEventEnd"]
+      };
+      this.initialize();
+    },
+    SNPProto = SurfNPerf.prototype;
+  SNPProto._setPerformanceApis = function() {
+    if(window.performance) {
+      this._navigationTiming = !!(window.performance.timing);
+      this._highResTime = !!(window.performance.now);
+      this._userTiming = !!(window.performance.mark && window.performance.measure && window.performance.getEntriesByName);
+    } else {
+      this._navigationTiming = false;
+      this._highResTime = false;
+      this._userTiming = false;
+    }
+  };
+  SNPProto._setPerfProperties = function() {
+    if(!window.SURF_N_PERF || !window.SURF_N_PERF.marks) {
+      window.SURF_N_PERF = {
+        marks: {},
+        highResMarks: {}
+      };
+    }
+  };
+  SNPProto._setInitialUrl = function() {
+    this.setCustom('initialUrl', window.location.pathname);
+  };
+  SNPProto.initialize = function() {
+    this._setPerformanceApis();
+    this._setPerfProperties();
+    this._setInitialUrl();
+  };
+  /**
+   * Returns the timing data for a particular eventKey
+   *
+   * @arguments {String} timeType 'highRes' (to return a DOMHighResTimeStamp, if available) or 'DOM' (to return a DOMTimeStamp's value) - optional. Defaults to 'highRes'
+   * @returns {DOMHighResTimeStamp | integer} time value
+   * @memberOf SurfNPerf
+   */
+  SNPProto.now = function(timeType) {
+    timeType = timeType || 'highRes';
+    if(this._highResTime && timeType === 'highRes') {
+      return window.performance.now();
+    } else {
+      return Date.now();
+    }
+  };
+  SNPProto.performanceTiming = function() {
+    return this._navigationTiming ? window.performance.timing : {};
+  };
+  SNPProto._performanceTimingL2 = function(eventKey) {
+    var delta = this.getTimingMark('loadEventEnd', 'DOM') - this.getTimingMark(eventKey, 'DOM'),
+      value = window.SURF_N_PERF.highResMarks.loadEventEnd - delta;
+    return(value < 0) ? 0 : this._round(value, {
+      decimalPlaces: 10
+    });
+  };
+  /**
+   * Returns the timing data for a particular eventKey
+   *
+   * @arguments {String} eventKey name of the timing event
+   * @arguments {String} timeType 'highRes' (to return a DOMHighResTimeStamp, if available) or 'DOM' (to return a DOMTimeStamp's value) - optional. Defaults to 'DOM'
+   * @returns {DOMHighResTimeStamp | integer} time value
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getTimingMark = function(eventKey, timeType) {
+    timeType = timeType || 'DOM';
+    if(this._navigationTiming) {
+      if(timeType === 'DOM' || this._highResTime === false) {
+        return this.performanceTiming()[eventKey];
+      } else { // timeType === 'HighRes'
+        return this._performanceTimingL2(eventKey);
+      }
+    } else {
+      if(contains(this._navigationTimingEvents.a, eventKey)) {
+        return this.getMark('pageStart', 'DOM');
+      } else {
+        return this.getMark('loadEventEnd', 'DOM');
+      }
+    }
+  };
+  SNPProto.userTiming = function() {
+    return this._userTiming ? window.performance : {};
+  };
+  SNPProto.mark = function(eventKey) {
+    if(this._highResTime) {
+      this._data.highResMarks[eventKey] = this.now();
+    }
+    if(this._userTiming) {
+      this.userTiming().mark(eventKey);
+    }
+    this._data.marks[eventKey] = this.now('DOM');
+  };
+  SNPProto.getMark = function(eventKey, timeType) {
+    var mark;
+    timeType = timeType || 'highRes';
+    if(timeType === 'highRes' && this._highResTime === true) {
+      mark = this._data.highResMarks[eventKey] || window.SURF_N_PERF.highResMarks[eventKey];
+    }
+    return mark || this._data.marks[eventKey] || window.SURF_N_PERF.marks[eventKey];
+  };
+  SNPProto._isTimingMark = function(eventKey) {
+    return contains(this._navigationTimingEvents.a.concat(this._navigationTimingEvents.b), eventKey);
+  };
+  SNPProto._getDurationMark = function(eventKey) {
+    if(this._isTimingMark(eventKey)) {
+      return this.getTimingMark(eventKey, 'highRes');
+    } else {
+      return this.getMark(eventKey);
+    }
+  };
+  SNPProto._round = function(n, options) {
+    options = options || {};
+    var dp = options.decimalPlaces || 0;
+    n = +(n);
+    return n.toFixed ? +(n).toFixed(dp) : n;
+  };
+  SNPProto._roundedDuration = function(a, b, options) {
+    return this._round(b - a, options);
+  };
+  SNPProto._measureName = function(a, b) {
+    return '_SNP_' + a + '_TO_' + b;
+  };
+  SNPProto._setMeasure = function(a, b) {
+    try {
+      this.userTiming().measure(this._measureName(a, b), a, b);
+    } catch(e) {
+      if(window.console && window.console.error) {
+        if(e && e.message) {
+          console.error("Surf-N-Perf Exception:", e.message);
+        } else {
+          console.error("Surf-N-Perf Exception: at least one of these events/marks is not available yet", a, b);
+        }
+      }
+    }
+  };
+  SNPProto._getMeasureDuration = function(a, b) {
+    var measure = this.userTiming().getEntriesByName(this._measureName(a, b))[0] || {};
+    return measure.duration;
+  };
+  SNPProto.duration = function(a, b, options) {
+    if(this._userTiming) {
+      this._setMeasure(a, b);
+      return this._round(this._getMeasureDuration(a, b), options);
+    } else if(this._highResTime && a === 'navigationStart' && !this._isTimingMark(b)) {
+      return this._round(this.getMark(b), options);
+    } else {
+      return this._roundedDuration(this._getDurationMark(a), this._getDurationMark(b), options);
+    }
+  };
+  SNPProto.updateEvent = function(eventKey, key, value) {
+    var obj = {};
+    obj[eventKey] = {};
+    defaults(this._data.events, obj);
+    this._data.events[eventKey][key] = value;
+  };
+  SNPProto.resetEvent = function(eventKey, key, value) {
+    this._data.events[eventKey] = {};
+    this._data.events[eventKey][key] = value;
+  };
+  SNPProto.eventStart = function(eventKey) {
+    this.resetEvent(eventKey, 'start', this.now());
+  };
+  SNPProto.eventEnd = function(eventKey, options) {
+    var now = this.now(),
+      key;
+    options = options || {};
+    for(key in options) {
+      this.updateEvent(eventKey, key, options[key]);
+    }
+    this.updateEvent(eventKey, 'end', now);
+  };
+  SNPProto.getEventData = function(eventKey, key) {
+    var eventObj = this._data.events[eventKey];
+    if(eventObj) {
+      return eventObj[key];
+    }
+  };
+  SNPProto.eventDuration = function(eventKey, options) {
+    return this._roundedDuration(this.getEventData(eventKey, 'start'), this.getEventData(eventKey, 'end'), options);
+  };
+  SNPProto.setCustom = function(key, value) {
+    this._data.custom[key] = value;
+  };
+  SNPProto.getCustom = function(key) {
+    return this._data.custom[key];
+  };
+  /**
+   * Total time for App Cache, DNS & TCP
+   *
+   * @returns {integer} time in ms
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getNetworkTime = function() {
+    return this.duration('fetchStart', 'connectEnd');
+  };
+  /**
+   * Total time for Request & Response
+   *
+   * @returns {integer} time in ms
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getServerTime = function() {
+    return this.duration('requestStart', 'responseEnd');
+  };
+  /**
+   * Total time for App Cache, DNS, TCP, Request & Response
+   *
+   * @returns {integer} time in ms
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getNetworkLatency = function() {
+    return this.duration('fetchStart', 'responseEnd');
+  };
+  /**
+   * Total time to process the Response & fire the onLoad event
+   *
+   * @returns {integer} time in ms
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getProcessingLoadTime = function() {
+    return this.duration('responseEnd', 'loadEventEnd');
+  };
+  /**
+   * Total time for a page to load from the time the user initiates the access of the page to the firing of the onLoad event
+   *
+   * @returns {integer} time in ms
+   * @memberOf SurfNPerf
+   */
+  SNPProto.getFullRequestLoadTime = function() {
+    return this.duration('navigationStart', 'loadEventEnd');
+  };
+  return new SurfNPerf();
+}));

metadata ADDED Viewed

@@ -0,0 +1,77 @@
+--- !ruby/object:Gem::Specification
+name: surfnperf
+version: !ruby/object:Gem::Version
+  version: 1.0.2
+platform: ruby
+authors:
+- John Riviello
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2015-04-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.5'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Micro-library for gathering frontend web page performance data
+email:
+- john_riviello@comcast.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- app/views/surfnperf/_head.html.erb
+- lib/surfnperf.rb
+- lib/surfnperf/rails.rb
+- vendor/assets/javascripts/surfnperf.js
+homepage: https://github.com/Comcast/Surf-N-Perf
+licenses:
+- MIT
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project:
+rubygems_version: 2.4.3
+signing_key:
+specification_version: 4
+summary: Micro-library for gathering frontend web page performance data
+test_files: []