Introduction to RxJS and Reactive Programming
In this article, we’ll talk about the basics of reactive programming. We’ll also try creating some Observable data streams and an Observer which can react to the incoming stream of data. We’ll see all this in action in a few moments.
The keywords here are:
- Observable Stream of Data (Observable)
- Observers to Observe.
We will talk about them in detail in the article below.
In reactive programming, the software is more concerned about reacting to the events that are continuously occurring or may occur in the future. An event may contain some associated data which can then be captured, and the system can react to the incoming data.
For example, every time we move our mouse from one point to another, a series of events are emitted. Each event consists of information such as the current mouse location. These events, along with data, are constantly emitted and can be expressed in the form of a data stream. If the user of the system is interested in the event, they can start observing them.
In conventional programming, there would be a listener attached to the event which would be invoked each time the
div is clicked. When the
div is clicked, an event is raised and it triggers a callback function taking the event data as input.
However, when we work with reactive programming, the event data can be made available as a stream of continuous observable data, with a single Observer which subscribes to the continuous stream of data rather than the event. The Observer waits for data to be available in the stream, and once it is, it reacts to the incoming data.
That continuous source of an event and its data is the Observable, which can be observed by someone who is interested in that event. A further definition of these concepts:
- Observable: Observables are data streams which are emitted on the basis of certain events. They act as supplies of data about the specific events that occur. In simple terms, we can say that an Observable is that which can be observed for its data.
- Observer: Observers are the consumers of the data stream emitted by the Observable. Whenever an Observable emits data, it is received by the Observers. The Observers can further act on the data stream provided by the Observable.
Creating a basic observable
Let’s try to create a simple Observable which raises an event when the user clicks on the document or element with the ID
articleDiv. Each time the element is clicked, a continues stream of data containing event details are emitted. The event data emitted can be captured by some Observer who is interested in the event and event Data.
The code below will try to create an Observable which can be subscribed by an Observer to react to the incoming event data stream.
In the code above, we are creating an Observable stream using
fromEvent. Every time there’s a
click event on the document, an event will be raised. The event data will be available as an Observable stream, which can be further observed and the event data processed by the system. The event data contains information related to element clicked, such as the coordinates where the click was made, and a lot of other relevant information.
Creating a basic observer
clickInDocument is an observable stream created using
fromEventand can be made available to the subscriber. In the code below, we’re creating a callback function which acts as an Observer. As soon as a click event is emitted, the callback function is called, and the event object is passed to the function for further action. The callback function can take this event object as input and further process it.
So, as mentioned earlier, every time an event occurs it can produce an observable stream of data which can be then subscribed to by some callback function for further processing.
I hope this article was able to give you a basic overview of reactive programming. In the next article, we’ll learn about creating custom Observables and subscribing for data. Links: