JavaScript Congress • Nov 24, 2021

Observables in Plain terms

Georgi Parlakov

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.

Pause
Mute Enter Fullscreen
#1 about 3 min

Understanding the deceptive simplicity of observables

Observables often appear as basic utility functions but contain hidden execution complexities.

#2 about 6 min

Visualizing operators as nested wrappers around observables

Thinking of operators as nested boxes helps visualize the observable execution chain.

#3 about 9 min

Building observables manually to understand synchronous execution

Observables can execute synchronously within the same javascript event loop tick.

#4 about 5 min

Understanding how the to promise operator handles completion

The to promise operator only emits a value after the source observable completely finishes.

#5 about 4 min

Comparing the behavior of first and take operators

The first operator throws an error on empty sequences while the take operator silently completes.

#6 about 6 min

How operator placement alters the observable execution chain

Placing a take operator before or after a switch map fundamentally changes how emissions propagate.

#7 about 9 min

Managing inner subscriptions with the switch map operator

Switch map automatically unsubscribes from previous inner observables when receiving new source values.

#8 about 2 min

Comparing switch map with concat map and merge map

Concat map queues observables to preserve order while merge map processes multiple observables concurrently.

#9 about 5 min

Preventing observable chains from dying during error handling

Placing a catch error operator inside an inner switch map keeps the main observable alive.

#10 about 2 min

Combining streams with combine latest and with latest from

These combination operators require all source observables to emit at least once before emitting values.

#11 about 2 min

Grouping subscriptions for efficient memory leak prevention

Adding multiple subscriptions to a parent subscription object allows for simple bulk unsubscription.

#12 about 4 min

Recommended resources for mastering reactive programming concepts

Interactive marble diagrams and official documentation offer intuitive ways to learn reactive operator behaviors.

Matching moments

28:17 min

Testing and extending custom RxJS operators in production

Mohammad-Ali A'râbi Mohammad-Ali A'râbi · LIVE

7:00 min

Abstracting recurring logic into custom RxJS operators

Benedikt Starzengruber · LIVE

2:36 min

Utilizing JavaScript primitives for reactivity and user interface synchronization

Michael Egger-Zikes Michael Egger-Zikes · World Congress 2025

1:44 min

Introduction of the pipe method in RxJS

Mohammad-Ali A'râbi Mohammad-Ali A'râbi · LIVE

6:22 min

Type definitions for handling nested observables in operators

Mohammad-Ali A'râbi Mohammad-Ali A'râbi · LIVE

3:37 min

Refactoring long RxJS pipelines with custom operator functions

Mohammad-Ali A'râbi Mohammad-Ali A'râbi · LIVE