RxJS: Observables, Observers, Subjects …

Leider ist der Eintrag nur auf English verfügbar.

When developing web applications – or in fact any kind of application that involves interaction via a user interface – we inevitably have to deal with asynchronous events, perhaps even streams of such events, e.g.:

• mouse clicks
• asynchronous HTTP calls and subsequent display of data
• push notifications

Because events are such an essential part of both the feature set and the user experience of many, if not even most, user-facing applications frameworks such as Angular treat them as first-class citizens and provide developers with tools and design pattern implementations that facilitate both consumption and creation of events.

For this purpose, Angular heavily draws upon RxJS – a reactive programming library for JavaScript – and makes extensive use of the patterns and APIs it provides.

In case you wonder what reactive programming actually is there’s an excellent, in-depth introduction on the subject (pardon the pun …) in this gist by André Staltz.

In a nutshell, he defines reactive programming as “[…] programming with asynchronous data streams”.

Now, there are plenty of articles, tutorials, books and, last not least, manuals on both reactive programming itself and concrete implementations thereof, more often than not by people who’re far more knowledgeable in the subject matter than I am. Hence, I won’t even try to surpass their efforts.

What I will try to do instead is to compile some useful articles as well as answers to StackOverflow questions that shed light on various aspects of reactive programming. In part I do this out of selfish reasons because this way I have an easily accessible list of useful resources for future reference.

So, without further ado, here goes:

• A Wikipedia article covering the Observer design pattern. This design pattern is the underpinning of most of what you can do with RxJS. Understanding what Observers and what Subjects are is vital to understanding reactive programming.
• On The Subject Of Subjects (in RxJS) by Ben Lesh: How this pattern is implemented in RxJS and explanations of common pitfalls and misunderstandings.
• RxJS Marbles:
  Interactive diagrams of Rx Observables. Visualise the control flow of the various RxJS operators.
• Hot vs Cold Observables, also by Ben Lesh. There are many explanations on the web about what hot and cold Observables are. His in my opinion is the most concise and easiest to grasp I’ve come across so far.
• Pipeable operators (what used to be – and still is in the article- called lettable operators) by Nicholas Jamieson: How they allow for operator chaining, reuse of custom operators and tree-shaking (for keeping your packaged app small).
• Difference between Rxjs Subject and Observable by Ryan Sukale: Sometimes there can be some confusion around the terminology involved in RxJS. This article outlines the differences between Subject and Observable and what each of those is used for.
• Promise vs Observable: Sometimes you don’t need everything Observables supply you with and the complexity that comes with that. In some cases, that is when you don’t actually have a continuous stream of asynchronous events but a single one of those, for instance when waiting for a single server response, a plain, old Promise might be all you need and the additional overhead (both in terms of simplicity and resource usage) of an Observable therefore isn’t required.
• Subject vs BehaviorSubject vs ReplaySubject in Angular: Subjects in RxJS come in various flavours. The answer to this StackOverflow question does a great a job at explaining what they differ in. The crucial difference is how and to what extent each of them stores previous states.
• RxJS TSLint: TSLint rules for RxJS.
• rxjs-spy: A library that allows you to log RxJS behaviour in a consistent manner rather than haphazardly sprinkling do operators and log statements throughout your code.