Georgi Parlakov

Observables in Plain terms

A single error can terminate your entire observable chain. Learn how placing `catchError` inside `switchMap` contains the blast and saves your stream.

Observables in Plain terms
#1about 8 minutes

Understanding the core concept of operators as wrappers

Observables can be visualized as a chain of wrapping operators, similar to Russian dolls, where each operator adds functionality to the one before it.

#2about 9 minutes

Live demo of the operator wrapper model

A code demonstration reveals how subscriptions propagate down the chain and values emit up, showing that observables can emit both synchronously and asynchronously.

#3about 4 minutes

The `toPromise` operator waits for observable completion

The `toPromise` operator doesn't resolve with the first emitted value but instead waits for the source observable to complete and resolves with the last value.

#4about 8 minutes

Comparing the `first` and `take(1)` operators

While `take(1)` safely completes on an empty stream, the `first` operator will throw an error if the source observable completes without emitting any values.

#5about 10 minutes

Choosing between `switchMap`, `concatMap`, and `mergeMap`

`switchMap` cancels previous inner observables, `concatMap` waits for them to complete sequentially, and `mergeMap` runs them all concurrently.

#6about 4 minutes

Keeping observable chains alive with `catchError`

Placing a `catchError` operator inside a higher-order mapping operator like `switchMap` prevents an inner observable's error from terminating the entire outer chain.

#7about 2 minutes

Combining streams with `combineLatest` and `withLatestFrom`

Both `combineLatest` and `withLatestFrom` require all source observables to emit at least once before they produce any output.

#8about 2 minutes

Managing subscriptions to prevent memory leaks

Use a parent `Subscription` object to group multiple child subscriptions, allowing you to unsubscribe from all of them at once to avoid memory leaks.

#9about 3 minutes

Recommended resources for learning RxJS

Key learning resources include the official RxJS documentation, interactive marble diagrams for visualizing operators, and content from core team members like Ben Lesh.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Solving date and time issues with the Temporal API
06:47 MIN

Solving date and time issues with the Temporal API

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Understanding browser APIs that rely on company services
04:30 MIN

Understanding browser APIs that rely on company services

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Featured Partners

Related Videos

See all videos
How to Create New RxJS Operators58:15

How to Create New RxJS Operators

Mohammad-Ali A'râbi

Practice makes perfect - when it comes to RxJS33:25

Practice makes perfect - when it comes to RxJS

Jan-Niklas Wortmann

NgRx Tips for Future-Proof Angular Apps26:58

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

Angular tips/tricks you can use from tomorrow on50:28

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

The Eventloop in JavaScript - How does it work?30:36

The Eventloop in JavaScript - How does it work?

Christian Woerz

10 must-know design patterns for JS Devs28:13

10 must-know design patterns for JS Devs

Erick Wendel

Angular Signals: what's all the fuss about?58:03

Angular Signals: what's all the fuss about?

Daniela Bonvini

JavaScript the Grumpy Parts46:08

JavaScript the Grumpy Parts

Rob Richardson

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos

From learning to earning

Jobs that call for the skills explored in this talk.