Three Main Components in Reactive Programming

This article is about fundamental knowledge for components in reactive programming.

1. Producers
2. Consumers
3. Data pipeline

The graph below demonstrates how reactive programming works in the big picture.

generic model from upstream observable to downstream observer in reactive programming

Producers

Producers are the sources of your data.

A stream must always have a producer of data, which will be the starting point for any logic that you’ll perform in RxJS.
A stream is nothing more than a sequence of events over time

The observer pattern defines producers as the subject. We call them observables, as in something that’s able to be observed.

Observables are in charge of pushing notifications, so we refer to this behavior as fire-and-forget. This means that we’ll never expect the producer to be involved in the processing of events, only the emission of them.

Consumers

Consumers are the components that accept events from the producer and process them in some way. When the consumer begins listening to the producer for events, you now have a stream. It is at this point that the stream begins to push events; we’ll refer to a consumer as an observer.

Streams travel only from the producer to the consumer.

consumer sample in rxjs

From the example above, whenever the user clicks on the submit button, it will produce an event that flows down to consumers.

In nature, a stream will flow from upstream to downstream; this same thing happens in reactive programming. The streams will always flow from the upstream observable to the downstream observer.

The click action from the user would be the upstream observable because it would only produce events, not consume them. And the code that executes logic based on the click action would be the downstream observer.

Data pipeline

The biggest benefit of reactive programming is you can edit the data as it passes from producer to consumer.

From one of my recent article is Reactive Programming in a Modern Web Application, I mentioned:

It combines the Observer pattern with the Iterator pattern and functional programming with collections to fill the need as an ideal way of managing sequences of events.

Functional programming? Yes, that is why we can find many functional programming syntax implementations inside libraries like RxJS.

To create a data pipeline, we use the pipable operator and operators that are provided by the RxJS library to transform data from producer to consumer by using functional programming.

data pipeline sample in rxjs

The producer will emit an array of users with name and age information via the data pipeline and the **pipe** operator, use map to transform data from the producer, and return to the consumer with the name of the user only.

Summary

This article provided basic knowledge on components in reactive programming. We have 3 parts which are the producer, data pipeline, and consumer.

#angular #rxjs #javascript