Outline
RxJS is a javascript library that brings the concept of "reactive programming" to the web.
Reactive programming is just a different way of building software applications. Essentially, your software is built to "react" to changes that happen (like click events, data being fetched, etc) instead of the typical way of writing software where we explicitly write code (aka "imperative" programming) to handle those changes.
For those familiar, you can kind of think of RxJS as lodash for asynchronous data operations.
If you're still confused, don't worry, this normally doesn't make much sense at this point. Lets use an analogy to better explain this:
RxJS is to Javascript as Henry Ford's assembly line was to cars.
I know this sounds nuts, but hear me out.
Back in the early 1900's, products were manufactured entirely by hand. So any product that was produced — lets take a chair for example — was built by one person. To make the chair, this person would cut the wood into the proper dimensions. They would then bolt those pieces together and sand down the rough edges. Then they would paint it, finish it, and finally sell it. Then they would repeat the process from step 1.
That might not sound all that bad, but consider this: how much would a chair of a custom color cost? You would think it wouldn't be much, right? Quite the opposite actually — not only would you pay for the custom color, but you would have to pay for that person to sit around all day and create an entirely new chair just for you. So the chair you bought at IKEA for $20 would probably have cost over $200+.
Why? Because this is the cost of systems that are not broken into modular & asynchronous processes.
When it came time for Henry Ford to mass produce the first ever combustion vehicle he had a brilliant idea: what if you broke down the assembly process into modular pieces that were each manned by a single person? That way every part of the assembly was interchangeable and also eliminated the massive inefficiencies of having one person be responsible for creating the entire car. In fact, what took a single man 12 hours to build a full car, his assembly line cut down to 2 and a half hours.
This also opened up a level of customization and configuration that normally was cost prohibitive. For example, if the customer wanted a different color interior of their car, they could simply redirect the completed chasis to a different worker.
Assembly lines provided two major benefits: workers were able to work asynchronously (which resulted in a drastic reduction in total work hours required for completion) and it was now incredibly cheap to reconfigure/customize what the final product would be.
In this sense, RxJS (and reactive programming in general) can be thought of as writing assembly lines in your software applications. It allows you to write software that is reusable, configurable, and asynchronous.
I think the key word here is asynchronous. Most libraries/frameworks already allow you to write reusable and configurable code, but can it be easily invoked from asynchronous actions? For example, if we're waiting for chat messages to come back from a web socket, how does a new chat message coming in update the state of the running application? If you've ever built a meaningfully large real-time application, you know how painful writing this sort of logic can be.
While websockets and other real-time events are where RxJS really shines, RxJS also provides more robust functionality for performing even standard AJAX requests. Unlike promises (the normal method of resolving AJAX requests), RxJS's Observable sequences are cancellable. They can also be easily chained, manipulated, and configured.
The possibilities are endless. You can create assembly lines (i.e. RxJS Observables) that can be chained together, split apart, configured slightly differently, or just used without any modification at all. It's really up to you.
And with that said, now lets explore some real examples of RxJS and Observables!