RxJS: Observables, observers and operators introduction

RxJS is an incredible tool for reactive programming, and today we’re going to dive a little deeper into what Observables and observers are – as well as learn how to create our own operators.
If you’ve used RxJS before and want to understand some of the inner workings and internals to “how” Observables work, as well as the operators, then this post is for you.
What is an Observable?
An Observable is just a function, with a few special characteristics. These are that it takes in an “observer” (an object with “next”, “error” and “complete” methods on it), and returns cancellation logic. In our examples we will use a simple “unsubscribe” function to handle this further on when we write our own. In RxJS it would be a Subscription object with an unsubscribe method on it.
An Observable sets up the observer (we’ll learn more about this) and connects it to the “thing” we want to get values from. This “thing” is called a producer, and is a source of values, perhaps from a click or input event in the DOM. It could even be something more complex such as communication over HTTP.
To better understand Observables, we’re going to write our own! But first, let’s take a look at an example with a subscription:
const node = document.querySelector(‘input[type=text]’);

const input$ = Rx.Observable.fromEvent(node, ‘input’);

input$.subscribe({
next: (event) => console.log(`You just typed ${event.target.value}!`),
error: (err) => console.log(`Oops… ${err}`),
complete: () => console.log(`Complete!`)
});

This example takes an

Link: https://toddmotto.com/rxjs-observables-observers-operators