instrument_js.md

Frontend Performance

It is quite possible to instrument and collect timings from our front end code. Suddenly we've got just as much insight into our frontend code as our backend and optimize accordingly.

We want to use the native browser performance api where possible and fall back to Date.now() when it's not. Luckily a polyfill library exists already - User Timing

The first step is to instrument the actual JavaScript.

toggleAllComplete: function () {
  var elapsedTime,
  startTime = performance.now(),
  completed = this.allCheckbox.checked;
  app.todos.each(function (todo) {
  	todo.save({'completed': completed});
    });
  elapsedTime = performance.now() - startTime;
  app.performanceLog("toggleAllComplete", (elapsedTime));
}

Not shown is app.performanceLog which takes two arguments and posts the time to a server along with some agent info.

Here is how the reporting might look in Ruby with New Relic as the reporting service.

class NewRelicService
  def self.performance(param)
    metric_name = "bb_agent: render delay for #{param['name']}"
    ::NewRelic::Agent.record_metric('Custom/Backbone/performance', param['elapsed'].to_i)
  end
end