Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2304

Abstract

iv> </div> </figure></iframe></div></div></figure><p id="9505">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.</p><h1 id="83f0">Observable and Observers in RxJs</h1><p id="00e8"><b>That continuous source of an event and its data is the <i>Observable</i></b><i>,</i><b> </b>which can be observed by someone who is interested in that event. A further definition of these concepts:</p><ol><li><b>Observable: </b>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.</li><li><b>Observer: </b>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.</li></ol><h2 id="08b8">Creating a basic observable</h2><p id="f8d1">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.</p><p id="c1c7">The code below will try to create an Observable which can be subscribed by an Observer to react to the incoming event data stream.</p> <figure id="ff94"> <div> <div>

            <iframe class="gist-iframe" src="/gist/Mayankgupta688/9b8e1c44d63cdd9fad868b87a74e9760.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="46a2">In the code above, we are creating an Observable stream using <b>fromEvent</b>. Every time there’s a “click” event on the document, an event will be raised. The event data will be available as

Options

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.</p><h2 id="567c">Creating a basic observer</h2><p id="d407">“clickInDocument” is an observable stream created using <b>fromEvent</b> and 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.</p> <figure id="ffb7"> <div> <div>

            <iframe class="gist-iframe" src="/gist/Mayankgupta688/2c5b4c46d032053f59e4095ad07ef61b.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><h2 id="0abd">Final note</h2><p id="2495">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.</p><p id="f7d3">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:</p><div id="0ebd" class="link-block">
      <a href="https://medium.com/@mayank.gupta.6.88/creating-custom-observable-with-rxjs-379692f08f76">
        <div>
          <div>
            <h2>Creating Custom Observable with Rxjs</h2>
            <div><h3>In my previous article, we talked about basics of RxJS. The library gives number of ways to create Observable. In this…</h3></div>
            <div><p>medium.com</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*bdS3-PC79gOkLaypZdn4Dg.png)"></div>
          </div>
        </div>
      </a>
    </div><p id="dc91"><i>More content at <a href="http://plainenglish.io/">plainenglish.io</a></i></p></article></body>

Reactive Programming with RxJs

Reactive Programming is definitely need of the hour

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 the data

We will talk about them in detail in the article below.

What is RxJs in JavaScript?

RxJS introduces the concept of reactive programming to JavaScript. Data streams are the core of reactive programming.
In reactive programming, you continuously observe the stream of data and react when the value is available.
The program 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.

Observable and Observers in RxJs

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 fromEvent and 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.

Final note

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:

Creating Custom Observable with Rxjs

In my previous article, we talked about basics of RxJS. The library gives number of ways to create Observable. In this…

medium.com

More content at plainenglish.io