To measure is to know, said Lord Kelvin and we couldn't stress enough the importance of monitoring from the simplest website to very sophisticated applications. It helps us know how a system performs and how our customers are using it, so we can keep improving.
Many developers won't implement monitoring or opt for outsourcing it because they believe it is too hard to build or maintain. Let's debunk this myth and help them in their journey to becoming better full-stack engineers by owning and understanding a critical piece of their systems.
In this talk, we will demonstrate how developers can easily build a homegrown monitoring solution by leveraging the some of the new W3C APIs: Navigation Timing, Performance Timeline, Resource Timing and Beacon. We will check the latest browser support and polyfill when needed. Then, we will learn how to stream all that data down to a time series database, where it should be ready to be queried and analyzed.
13. var Circle = function (radius) {!
if (radius <= 0) {!
throw new RangeError('Radius must be greater than zero!');!
}!
this.radius = radius;!
};!
!
Circle.prototype.perimeter = function () {!
return 2 * Math.PI * this.radius;!
};!
!
Circle.prototype.area = function () {!
return Math.PI * Math.pow(this.radius, 2);!
};
14. var start = Date.now();!
!
var circle = new Circle(1);!
circle.perimeter();!
circle.area();!
!
Date.now() - start;
15. var start = Date.now();!
!
var circle = new Circle(1);!
circle.perimeter();!
circle.area();!
!
Date.now() - start; // 0
16. var start = performance.now();!
!
var circle = new Circle(1);!
circle.perimeter();!
circle.area();!
!
performance.now() - start;
17. var start = performance.now();!
!
var circle = new Circle(1);!
circle.perimeter();!
circle.area();!
!
performance.now() - start; // 0.1449999999999818
42. var Circle = function (radius) {!
if (radius <= 0) {!
throw new RangeError('Radius must be greater than zero!');!
}!
this.radius = radius;!
};!
!
Circle.prototype.perimeter = function () {!
return 2 * Math.PI * this.radius;!
};!
!
Circle.prototype.area = function () {!
return Math.PI * Math.pow(this.radius, 2);!
};
43. meld.before(Circle.prototype, 'perimeter', function () {!
performance.mark('Circle.perimeter:before');!
});!
!
meld.after(Circle.prototype, 'perimeter', function () {!
performance.mark('Circle.perimeter:after');!
performance.measure('Circle.perimeter', 'Circle.perimeter:before',!
'Circle.perimeter:after');!
});
44. var c1 = new Circle(1);!
c1.perimeter();!
!
var c2 = new Circle(2);!
c2.perimeter();!
47. let duration = function (target, name, descriptor) {!
let {value} = descriptor;!
let tag = `${target.constructor.name}.${name}`;!
let before = `${tag}:before`;!
let after = `${tag}:after`;!
!
descriptor.value = function(){!
performance.mark(before);!
let result = value.call(this, ...arguments);!
performance.mark(after);!
performance.measure(tag, before, after);!
return result;!
};!
};!
48. class Circle {!
constructor(radius) {!
if (radius <= 0) {!
throw new RangeError('Radius must be greater than zero!');!
}!
this.radius = radius;!
}!
!
@duration!
perimeter() {!
return 2 * Math.PI * this.radius;!
}!
!
@duration!
area() {!
return Math.PI * Math.pow(this.radius, 2);!
}!
}!
49. let c1 = new Circle(1);!
let p1 = c1.perimeter();!
let a1 = c1.area();!
!
!
let c2 = new Circle(2);!
let p2 = c2.perimeter();!
let a2 = c2.area();!
!
!
performance.getEntriesByType('measure');!
Uptime?
Resources consumed on servers and the browser?
Error rate?
How heathy is the code we ship?
Developers are a mixture of scientists, engineers and craftsman.
What devices and browsers they use?
How long they have to wait to see and interact with the content?
How they use our site or application?
Web Performance Working Group: to provide methods to measure aspects of application performance of user agent features and API