Mohammad-Ali A'râbi

How to Create New RxJS Operators

Losing state in your RxJS streams? Learn to build custom operators that carry values through your pipeline, resulting in cleaner, more maintainable code.

How to Create New RxJS Operators
#1about 5 minutes

The history and evolution of ReactiveX and RxJS

ReactiveX originated at Microsoft to simplify concurrent programming and evolved into libraries like RxJava at Netflix and the widely used RxJS.

#2about 4 minutes

How pipeable operators changed the RxJS API

RxJS version 5.5 introduced the pipe function, decoupling operators from the observable object and enabling developers to create their own.

#3about 5 minutes

Addressing the challenge of long, unreadable pipelines

Using RxJS extensively in a Node.js backend led to long, unreadable pipelines, which were improved by extracting logic into named functions.

#4about 4 minutes

Preserving state in pipelines using tuples and zip operators

The flatZipMap operator was created to solve the problem of losing access to previous values in a stream by pairing results into a tuple.

#5about 6 minutes

Implementing custom operators with TypeScript generics

Creating a custom operator involves defining a function that returns an OperatorFunction with specific input and output types using TypeScript generics.

#6about 6 minutes

Advanced typing for complex custom operators

Complex operators like flatListFlatMap demonstrate how advanced TypeScript features like ObservableInput and ObservedValueOf are essential for correct type inference.

#7about 28 minutes

Q&A on testing, pitfalls, and contributing

The Q&A session covers unit testing custom operators, handling errors, key differences with RxJava, and how to contribute to open-source RxJS libraries.

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

Matching moments

Create custom RxJS operators for cleaner data streams
06:59 MIN

Create custom RxJS operators for cleaner data streams

Angular tips/tricks you can use from tomorrow on

Understanding the core concept of operators as wrappers
07:38 MIN

Understanding the core concept of operators as wrappers

Observables in Plain terms

Developing a reactive mindset for RxJS
05:07 MIN

Developing a reactive mindset for RxJS

Practice makes perfect - when it comes to RxJS

New animation and composition operators in RxJS 7
02:57 MIN

New animation and composition operators in RxJS 7

Practice makes perfect - when it comes to RxJS

Live demo of the operator wrapper model
08:47 MIN

Live demo of the operator wrapper model

Observables in Plain terms

Recommended resources for learning RxJS
03:03 MIN

Recommended resources for learning RxJS

Observables in Plain terms

Practice examples for mastering RxJS
02:04 MIN

Practice examples for mastering RxJS

Practice makes perfect - when it comes to RxJS

Refactoring live queries with RxJS and the async pipe
01:35 MIN

Refactoring live queries with RxJS and the async pipe

Meet Your New BFF: Backend to Frontend without the Duct Tape

Featured Partners

Related Videos

See all videos
Observables in Plain terms50:18

Observables in Plain terms

Georgi Parlakov

NgRx Tips for Future-Proof Angular Apps26:58

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

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

Angular Signals: what's all the fuss about?

Daniela Bonvini

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

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

The Art and Craft of Type Development43:20

The Art and Craft of Type Development

Michael Hladky & Stefan Baumgartner

Meet Your New BFF: Backend to Frontend without the Duct Tape51:04

Meet Your New BFF: Backend to Frontend without the Duct Tape

Noam Honig

Practice makes perfect - when it comes to RxJS33:25

Practice makes perfect - when it comes to RxJS

Jan-Niklas Wortmann

Sustainable Angular Architectures with Nx and Strategic Design50:57

Sustainable Angular Architectures with Nx and Strategic Design

Manfred Steyer

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.