Understand Observables and Subscribers with examples (For Angular Developers and everyone else)
Introduction
If you are learning Angular, then you definitely must have heard about RxJs. If you are struggling to come to terms with it after watching many videos and reading lots of articles, know that you are not alone. In this story, I try to explain the fundamentals of RxJs (Observables and Observers) with an intuitive example.
Observables and Subscribers
Imagine you are attending a panel with very strict rules on how speakers and attendees ought to behave for a more fluid and better experience. (A) The speaker is the source of the information, (B) she does not hold a record of her audience or any meaningful information about them. Her only job is to make the presentation.
©The protocol of the conference instructs speakers to say something along the lines “ah, I think we won’t be able to continue here” whenever there is a technical problem that makes her unable to end the presentation, this serves as a signals to the support team and most importantly to inform the audience that there has been an issue and the speaker won’t continue. (D) When the speaker ends her presentation, she is expected to say “thanks for listening” or a similar version of that as a way of formally informing the audience that she is ending the presentation.
Similar to what might happen at a U.N panel where those in the audience might speak a different language than the one being spoken, attendees are asked to wear headphones and dial a button when they intend to start listening to the presentation (If an attendee wanted to, he could never start listening to what is being said).
Now, let's start mapping RxJs concepts with the identities in the example. In RxJs, the entity acting as the source of the information is the observable. Like the speaker, the observable is not required to know those consuming the information.
Like the speaker in the example, an Observable is expected to notify its audience or subscribers about an error or the end of data transmission (both making sure the subscribers will no longer receive data). The audience in the example represents the subscribers on RxJs. Like their conference counterparts they are passive consumers of data (Assuming the conference has no Q&A session).
A Subscriber (The Attendee) is the one who initiates the process of consuming information coming from the Observable by subscribing to it.
Building the Observable (The speaker)
Line 1 ensures we’re importing the Observable constructor. Line 4 initiates the construction of the Observable (the speaker) and every line of code below that is the encoding of the rules the speaker is supposed to abide by when delivering his presentation. Line 5 ensures that our code does not break if an error occurs (we don’t want any particular presentation to bring down the whole conference), line 6 represents the data subscribers are consuming if they have already “turned their headphones on”.
Subscribers are only notified of data coming from the source if they have subscribed to the observable.
Building the Subscribers (The Attendee)
Luckily for us, coding subscribers is the easy part. The process consists of basically invoking the method subscribe on the observable. We pass one object containing three callbacks, one for the three types of data we could receive from the source (data from the presentation, data signaling an error ending the presentation and the end of the presentation).
The callbacks on the object argument for the subscribe method are optional. On Most code examples, you will usually just see the next callback with a different face: speaker.subscribe({data => console.log(data)})
Conclusion
RxJs has extensive use in Angular, mastering the basics is essential to pick up advanced materials such as operators and multicast observables such as subjects. When using Angular, you will notice that one cannot build professional applications without having a strong understanding of the nuts and bolts of RxJs. For a more in depth coverage of RxJs read the documentation.
