RxJS Challenge #19: FPS meter

When I first started using RxJS I was rather scared to write new Observable. Probably most developers start by combining and manipulating streams and underlying mechanisms of creating new Observables might be obscure to them. Let’s try to dive into Observable constructor to create our own frames-per-second meter!

Breaking down the task

To get our FPS meter we need to go through several steps:

1. Turn native requestAnimationFrame function to Observable
2. Get duration of each frame
3. Average out the value over some period of time

RxJS has several way to get intervals emitted based on requestAnimationFrame but we want to write our own because we are here to learn 🙂

We also don’t want to rely on magically available global methods. Let’s pass them as input to the factory function.

Observable constructor receives a function that is called on subscription. It must return a TeardownLogic which could be a function to be called on subscription termination…