Fundamentals of Reactive Programming

• The Observer Pattern
  • Observer Pattern: Real-Life Analogy
  • Naming the things we already know
  • A naive use case for the Observer pattern in JavaScript
  • Observable as a first-class citizen
• Reactive Programming
  • Core Properties of Observables
  • Stream
  • Operators
  • Hot Observable VS Cold Observable
  • Brief History of Reactive Programming
  • Quotes

Let’s continue our journey on Reactive Programming. This part will highlight some of this paradigm’s key concepts for quick learning.

The Observer Pattern

You might have encountered several diagrams and explanations of the Observer pattern. For those of you that might not yet be familiar with it, allow me to explain it with an example-based approach, a very different one than what I had at school.

“Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.” by sourcemaking.com

I didn’t get it for the first time with this definition and set me away instead of fascinating me. I thought this would be a super tricky thing to get. But not if you’ve had explained it to me with something we all know like youtube.

Observer Pattern: Real-Life Analogy

Let’s look at youtube.com for a second. I’ll use it as an example to explain this pattern’s two core participants: Observer and Observable.

Your browsing on youtube and you find a new channel. You want to receive notifications anytime some new content is published into that youtube channel, but for that, you’ll need to hit the subscribe button first. You are the Observer, consuming the content posted (published) by that youtube channel. This makes the youtube channel the Observable. Another vital aspect to see is the multiplicity of this relationship. There’s one youtube channel to many youtube users (subscribers).

Naming the things we already know

Keeping this analogy in mind, let’s clarify a couple more concepts that complement the relationship between an Observable and its Observables.

• Producer or creator - something that generates/publishes content. Back to our analogy, the content creator is the youtube channel owner. An Observable produces data.
• Consumer or client - something that subscribes to new content (data) published by the producers; our user is the consumer in our analogy. He or she gets notified when new content is out.
• Subscription - think of it as an object that holds the information about you subscribing to that youtube channel. One crucial thing that the subscription must own is a way for you to unsubscribe from that youtube channel when you no longer want to be notified of new content.
• Pull - we talk about a pull protocol when a consumer/client explicitly decides when to get data from the producer/creator. For instance, when we create a simple function and call it to do some work for us.
• Push - in these systems, the consumer/client doesn’t know exactly when new content is published. Our youtube analogy describes such a system where the channel subscribers have no clue when a new video will be posted.

These concepts are more comfortable to follow when backing them up with some real-life example, but most importantly, it is good that you possess a grasp of the jargon. It’s crucial to clearly express yourself with your peers. Last but not least, this becomes super relevant when you’re trying to Google your away around some issue.

#programming #reactive #web-development #developer