Hullo 👋 browser
Hullo 👋 DOM
Hullo 👋 Node
What is an Observable?
Short introduction to the concept.
If you're already familiar with the concept as how it is realised in RxJS, go read next section about it.
Observables allow you to push messages from your publishers to your subscribers in a way where publishers do not have to care for what subscriber they post messages to and subscribers don't have to know where and what the publisher is. That's because publishers, subscribers and connection between them are three different things. Let's see the example of it:
1
import { Observable } from '@hullo/core';
2
3
// first - create a subject with some publisher
4
const answersToAll = new Observable(
5
observer => {
6
// observer represents future subscriber
7
// let's send it a simple message
8
observer.next(42);
9
}
10
);
11
12
// second - there is a subscriber
13
const subscriber = {
14
next: message => {
15
// do sth with the received message
16
},
17
complete: () => {
18
// do sth when publisher decided
19
// to not push any more messages
20
}
21
};
22
23
// third - connect subscriber to the subject
24
const subscription = answersToAll.subscribe(subscriber);
25
// (bonus) you can stop receiving messages
26
// externally to both publisher and subscriber
27
// through subscription object
28
subscription.cancel();
Copied!
You'll find yourself writing second step and the third next to themselves, usually as one step. So there will be two steps, but those are still three separate concepts. First step might be even more than often in a completely separate file and for a reason!
The separation is a key to understand usefulness of this pattern. Due to a standard interface of
Observer there is no need for the publisher to know where and why the subscription starts as the only responsibility of that is to emit specific to it messages. You can find similar concepts made with EventEmitter both on web and in Node.In Node you can have
ReadableStream that is a specific emitter which by itself doesn't know about what is reading the stream other than that it has to provide functions that'll be run on specific events.
In the browsers JS, any DOM node can be an emitter of events and then it just awaits for the developer to submit a function that should express a reaction to a click, a keystroke etc. Event emission can be done with Observables as well and in respective Hullo packages, there are helper function to get around in these environments.Last modified 3yr ago
Copy link