This article marks the beginning of me diving deep into the declarative style of programming using the reactive style of programming.

Reactive programming has been around for a while now. The ng community has accepted RxJS in no time and since then RxJS has gained good ground. I too have been using RxJS, but I am not a 100% clear in my mind why and when to use it. To sound more aware I’ve been throwing around sentences like

With the imperative style of programming, you are concerned with how things are to be done. But, with declarative style, you are more concerned about what.

Of course, there is an abstracted imperative layer somewhere that is doing everything for us. But, being declarative helps a developer deal with the significant details without worrying too much about the how part. This also brings in some modularity to the code where there is a continuous attempt at distinguishing between the declarative and imperative code. But, it is really OK if they go hand in hand.

However, its time to dig deeper. And answer questions like:

  • How are applications structured to allow the co-existence of declarative and imperative parts?
  • What other advantages does declarative style offer?
  • How difficult is it to start writing declarative code?
  • Is declarative style worth it? Does it provide an apt return on investment against the time spent to learn using a tool or library (RxJs, to begin with)

Where is the code?

Well, let’s keep things simple for now and just try solving a problem using RxJS. Let’s get our hands dirty and see RxJS in action.

Let’s solve the following mathematical problem with some emulation in action.

In a circular race of 1200 m length, A and B start with speeds of 18kmph and 27 kmph starting at the same time from the same point. When will they meet for the first time at the starting point when running in the same direction and opposite direction?

Just picked a random problem from reference

It is easy enough to get to the answer using a purely mathematical approach. But, to make things interesting, let’s write some code that emulates two people running with the exact speeds mentioned in the problem statement on a circular field of circumference 1200m.

I can think of the following that might have to be done.

  • conversion of kmph to mps to be able to run distance calculations in m
  • two runners who run with the mentioned speeds
  • tracking the position of each runner at every second
  • printing the exact time when the two runners meet

Here is a solution I wrote. This is an amalgamation of the declaratives and imperatives.

Feel free to fiddle with the code.

Here is an explanation:

  • Functions like convertToMetersPerSecond, getDistanceConvered, findRelativePositionOnTrack & areRunnersAtSamePosition are the imperative abstraction that I talked about. This layer will be working hard underneath the reactive voodoo.
  • createRunner method is the heart of the emulation. It creates an observable which emulates a runner running at a specific speed. The timer operator scales the real life 1 second to 10 milliseconds for the sake of faster emulation.
  • runnerObservable is the observable that emits when both runner A and B events have been fired, withLatestFrom this is similar to combineLatest
  • Finally, we create a subscription and set the two runners in action. We keep track of the runner’s positions and unsubscribe as soon as the two runners meet.

Conclusion

I don’t yet know if digging deeper into RxJS has a lot to offer. But, I think I’ve established that it can be really fun. Maybe I’ll create some animations and show the runners in action in future. For now, the goal is to get to know more about RxJS.