> Markdown version of [/videos/291-observables-in-plain-terms?t=2744](https://www.wearedevelopers.com/videos/291-observables-in-plain-terms?t=2744). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Observables in Plain terms

Did you know observables can resolve synchronously in a single JavaScript tick? Uncover the true mechanics of RxJS and permanently fix the operator gotchas breaking your streams.

- **Speakers:** Georgi Parlakov
- **Event:** JavaScript Congress
- **Published:** November 24, 2021
- **Duration:** 50:18
- **URL:** https://www.wearedevelopers.com/videos/291-observables-in-plain-terms

## Summary

This talk demystifies RxJS observables by moving beyond basic map and filter comparisons to establish a clearer mental model: viewing observables as "wrappers" or nested boxes. By visualizing operators as Russian dolls, developers can better understand how subscriptions cascade downward through the chain while data values bubble upward. This foundational concept also clarifies a common misconception, demonstrating that observables are not strictly asynchronous and can actually resolve synchronously within a single JavaScript execution tick.

A significant portion of the session explores subtle operator behaviors and "gotchas" that frequently trip up developers. For instance, the legacy `toPromise()` operator does not emit the first value it receives; rather, it waits for the observable to completely finish before emitting the final value—a behavior often masked when using Angular's `HttpClient`. The speaker also unpacks the critical distinction between `first()` and `take(1)`: `first()` will explicitly throw a runtime error if the source stream completes without emitting, whereas `take(1)` safely yields nothing. Furthermore, the exact placement of `take(1)` in an observable chain (such as before or after a `switchMap`) fundamentally alters how inner and outer emissions are handled.

The discussion then delves into flattening operators and application resilience. The speaker contrasts how `switchMap` aggressively cancels previous subscriptions upon receiving new values, while `concatMap` queues them and `mergeMap` processes them concurrently. A highly practical insight for maintaining long-lived application streams (like NGRX effects) is to place a `catchError` inside a `switchMap`, which isolates inner failures and keeps the main outer observable chain alive. Finally, the presentation highlights synchronization operators like `combineLatest` and `withLatestFrom`—warning that they will silently hang until all source streams emit at least once—and recommends aggregating teardown logic into a single `Subscription` object to easily manage cleanup and prevent memory leaks.

**Keywords:** rxjs observables, rxjs operators, observable wrappers, angular httpclient, synchronous observables, topromise behavior, first vs take(1), switchmap vs concatmap, mergemap operator, observable error handling, catcherror resilience, combinelatest, withlatestfrom, subscription management, memory leak prevention, rxjs marbles diagrams

## Chapters

1. **Understanding the deceptive simplicity of observables** (00:03) — Observables often appear as basic utility functions but contain hidden execution complexities.
1. **Visualizing operators as nested wrappers around observables** (02:41) — Thinking of operators as nested boxes helps visualize the observable execution chain.
1. **Building observables manually to understand synchronous execution** (07:43) — Observables can execute synchronously within the same javascript event loop tick.
1. **Understanding how the to promise operator handles completion** (16:21) — The to promise operator only emits a value after the source observable completely finishes.
1. **Comparing the behavior of first and take operators** (20:50) — The first operator throws an error on empty sequences while the take operator silently completes.
1. **How operator placement alters the observable execution chain** (23:54) — Placing a take operator before or after a switch map fundamentally changes how emissions propagate.
1. **Managing inner subscriptions with the switch map operator** (29:13) — Switch map automatically unsubscribes from previous inner observables when receiving new source values.
1. **Comparing switch map with concat map and merge map** (37:17) — Concat map queues observables to preserve order while merge map processes multiple observables concurrently.
1. **Preventing observable chains from dying during error handling** (39:09) — Placing a catch error operator inside an inner switch map keeps the main observable alive.
1. **Combining streams with combine latest and with latest from** (43:45) — These combination operators require all source observables to emit at least once before emitting values.
1. **Grouping subscriptions for efficient memory leak prevention** (45:44) — Adding multiple subscriptions to a parent subscription object allows for simple bulk unsubscription.
1. **Recommended resources for mastering reactive programming concepts** (47:15) — Interactive marble diagrams and official documentation offer intuitive ways to learn reactive operator behaviors.

## Related Moments

- [Testing and extending custom RxJS operators in production](https://www.wearedevelopers.com/videos/683-how-to-create-new-rxjs-operators) (from "How to Create New RxJS Operators")
- [Abstracting recurring logic into custom RxJS operators](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on) (from "Angular tips/tricks you can use from tomorrow on")
- [Utilizing JavaScript primitives for reactivity and user interface synchronization](https://www.wearedevelopers.com/videos/1682-client-side-state-management-reimagined-think-outside-the-box) (from "Client-Side State Management Reimagined – Think Outside the Box")
- [Introduction of the pipe method in RxJS](https://www.wearedevelopers.com/videos/683-how-to-create-new-rxjs-operators) (from "How to Create New RxJS Operators")
- [Type definitions for handling nested observables in operators](https://www.wearedevelopers.com/videos/683-how-to-create-new-rxjs-operators) (from "How to Create New RxJS Operators")
- [Refactoring long RxJS pipelines with custom operator functions](https://www.wearedevelopers.com/videos/683-how-to-create-new-rxjs-operators) (from "How to Create New RxJS Operators")

## Related Articles

- [Using Java 17 latest features in real world projects](https://www.wearedevelopers.com/magazine/121-using-java-17-latest-features-in-real-world-projects)
- [Tips and Tricks: Working with JSON](https://www.wearedevelopers.com/magazine/493-tips-and-tricks-working-with-json)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)

## Related Jobs

- [Senior Software Engineer, Angular](https://www.wearedevelopers.com/jobs/ext/2796428-senior-software-engineer-angular) at **Bitpanda**
- [Founding Developer Advocate](https://www.wearedevelopers.com/jobs/48425-founding-developer-advocate) at **Plumber**
- [Staff Systems Engineer](https://www.wearedevelopers.com/jobs/48371-staff-systems-engineer) at **Bitdrift**
- [Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2731832-frontend-engineer) at **Almedia**
- [Founding Engineer (Front End)](https://www.wearedevelopers.com/jobs/48423-founding-engineer-front-end) at **Momentic**
- [DevOps Engineer (Observability)](https://www.wearedevelopers.com/jobs/ext/2568619-devops-engineer-observability) at **Twilio**