WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
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

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
almost 5 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

Open session

How We Cut Our API's p99 Latency from Minutes to Under a Second

  • Deepak Agrawal

    Atlassian

    Principal Software Engineer

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

We Deleted Our Observability Stack and Rebuilt It with OTEL: 12 Engineers to 4 at 20K+ clusters

  • Yash Sharma

    DigitalOcean

    Developer Advocate

Open session

What I Got Wrong Shipping an MCP Server for Live Infrastructure

  • Pritesh Kiri

    Harness

    Developer Relations Engineer

Open session

From Prompt Engineering to Harness Engineering: Building Observable and Governed GenAI Systems

  • Lakshmi Devi Prakash

    JPMorgan Chase

    VP, Applied AI/ML Lead

Related videos

Practice makes perfect - when it comes to RxJS thumbnail
33:25
LIVE • over 6 years ago

Practice makes perfect - when it comes to RxJS

Jan-Niklas Wortmann

How to Create New RxJS Operators thumbnail
58:15
LIVE • about 3 years ago

How to Create New RxJS Operators

Mohammad-Ali A'râbi

Angular tips/tricks you can use from tomorrow on thumbnail
50:28
LIVE • over 4 years ago

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Angular Signals: what's all the fuss about? thumbnail
58:03
LIVE • about 3 years ago

Angular Signals: what's all the fuss about?

Daniela Bonvini

NgRx Tips for Future-Proof Angular Apps thumbnail
26:58
LIVE • over 4 years ago

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

Rethinking Reactive Architectures with GraphQL thumbnail
41:06
LIVE • over 5 years ago

Rethinking Reactive Architectures with GraphQL

David Leitner

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.