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.

job ad

Saby Company
Delebio, Italy

Intermediate

test

Milly
Vienna, Austria

Intermediate

Matching moments

Live demonstrations of text manipulation APIs
24:48 MIN

Live demonstrations of text manipulation APIs

aa

Create custom RxJS operators for cleaner data streams
01:50 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
00:05 MIN

Understanding the core concept of operators as wrappers

Observables in Plain terms

Developing a reactive mindset for RxJS
00:16 MIN

Developing a reactive mindset for RxJS

Practice makes perfect - when it comes to RxJS

Exploring the core principles of reactive programming
05:32 MIN

Exploring the core principles of reactive programming

Rethinking Reactive Architectures with GraphQL

New animation and composition operators in RxJS 7
28:24 MIN

New animation and composition operators in RxJS 7

Practice makes perfect - when it comes to RxJS

Live demo of the operator wrapper model
07:43 MIN

Live demo of the operator wrapper model

Observables in Plain terms

Recommended resources for learning RxJS
47:15 MIN

Recommended resources for learning RxJS

Observables in Plain terms

Featured Partners

Related Videos

See all videos
Practice makes perfect - when it comes to RxJS33:25

Practice makes perfect - when it comes to RxJS

Jan-Niklas Wortmann

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

Hello generics, goodbye boilerplate!42:16

Hello generics, goodbye boilerplate!

Miroslav Jonaš

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

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

The Eventloop in JavaScript - How does it work?

Christian Woerz

Related Articles

View all articles
CH
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take part
Starting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
WeAreDevelopers LIVE days are changing - get ready to take part
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!

From learning to earning

Jobs that call for the skills explored in this talk.