RxJS hello world with plain javascript and html Edit

Murugan Andezuthu Dharmaratnam | 23 January 2021 | 81

In this article, we will write a hello world RxJSHTML application. The application will have only a single file rxjs-helloworld.html . The idea is to learn basics of RxJS. I have used RxJS in an angular application and I always thought it would be a great idea to create a hello world RxJSapplication to learn the basics of rxjs and obserable.

What is RxJS?

The Reactive Extensions for JavaScript (RxJS) is a javascript library that brings the concept of reactive programming to the web. It is part of ReactiveX, which is a collection of open source projects. reactive programming is a style of programming that allows us to manipulate a stream of data using functions. It is mainly concerned with asynchronous data streams. Observable, Observer, and Subscriber are the concepts of Reactive Programming. The main idea is that the system is able to receive streams of data and is able to react to them in some way.

RxJS helps you to build highly responsive applications web applications. RxJS brings the best concepts from the Observer pattern and functional programming together. RxJS makes it easier to write asynchronous or callback-based code.

Difference Between Subject Observable ReplaySubject & BehaviorSubject

You can picture them all as streams.

  • Observable: Subscribe to it to get the values
  • Subject: Same but you also have control of the values that you want to emit into it (can subscribe to it but also emit)
  • ReplaySubject: Same as subject but will keep track of the N latest emitted values and every time you subscribe to it, it'll emit those N values
  • BehaviorSubject: Subject where you have to set a default value, if you subscribe to it before anything has been emitted you'll get the default value

Observable and Subject: If you emit a value and subscribe to one of them after that, you'll not get the latest value emitted, you'll have to wait for a new value to be emitted before you're notified

ReplaySubject and BehaviorSubject: Even if you emit a value and then subscribe to one of them, you'll directly get the latest emitted value as soon as you subscribe.