> Markdown version of [/videos/683-how-to-create-new-rxjs-operators](https://www.wearedevelopers.com/videos/683-how-to-create-new-rxjs-operators). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# How to Create New RxJS Operators

Tame massive backend RxJS pipelines by building your own custom operators. Learn how advanced TypeScript features encapsulate messy data plumbing into highly testable, declarative code.

- **Speakers:** [Mohammad-Ali A'râbi](https://www.wearedevelopers.com/@mohammad-ali-a-rabi)
- **Event:** WeAreDevelopers LIVE
- **Published:** September 21, 2023
- **Duration:** 58:15
- **URL:** https://www.wearedevelopers.com/videos/683-how-to-create-new-rxjs-operators

## Summary

Reactive programming's evolution to address concurrent code complexity culminated in the widespread adoption of RxJS for both frontend architectures and Node.js backend environments. However, utilizing RxJS in stateless backend streams frequently results in enormous, ten-operator-long pipelines that severely harm code readability. Unlike highly stateful Angular frontends, backend engineers often lose access to crucial upstream values during deeply nested stream transformations, abandoning clean design patterns to execute messy data plumbing instead of writing maintainable features.

The structural shift in RxJS 5.5—extracting operators into standalone functions and introducing the scalable pipe method—unlocked the ability to apply the DRY (Don't Repeat Yourself) principle directly to reactive pipelines. By designing custom observable operators, developers can neatly encapsulate repetitive, low-level manipulation into highly readable, declarative functions. Building these operators inherently relies on advanced TypeScript features, particularly tuple typing, to safely carry preserved state. This enables operators like flatZipMap to continuously pass original inputs alongside newly mapped outputs without ever relying on unpredictable variables or memory-heavy global states.

Encapsulating low-level stream logic into custom bounded operators yields immensely reusable and strictly testable code segments. When crafting custom pipeline extensions, engineers must define strict TypeScript constraints upfront, ensuring input and output types enforce the proper functional integration. Rigorous stream error handling poses the most significant implementation challenge, as developers must guarantee custom operators never unintentionally swallow failed pipeline states. Standardizing and distributing these reactive patterns through open source projects like the rxjsx npm library allows organizations to rapidly streamline stateless data flow handling.

**Keywords:** rxjs custom operators, nodejs backend streams, typescript tuple typings, dry principle pipelines, stateless reactive programming, flatzipmap implementation, rxjs pipe method, stream error handling, rxjsx npm package, pipeline state preservation, declarative observable streams, reactive pipeline refactoring, open source package contributions

## Chapters

1. **Origin and history of the ReactiveX ecosystem** (00:00) — The origin of ReactiveX addresses the complexity of concurrent programming using observable extensions across languages.
1. **Implementations of reactive programming in Java ecosystems** (03:22) — Java implementations like RxJava, Reactor, and Akka Streams offer distinct approaches to reactive backend engineering.
1. **Introduction of the pipe method in RxJS** (05:48) — RxJS 5.5 refactored the observable object by moving operator functions into a unified pipe method.
1. **Challenges of adopting RxJS in Node backend architectures** (07:32) — Stateless backend pipelines become long and difficult to read without proper functional decomposition.
1. **Refactoring long RxJS pipelines with custom operator functions** (10:08) — Creating higher-level functions to encapsulate low-level RxJS operations improves code readability and maintainability.
1. **Managing local pipeline state using custom tuple operators** (13:46) — Leveraging TypeScript arrays as tuples preserves intermediate values during complex RxJS stream transformations.
1. **Implementing custom array-based generic RxJS operators** (18:05) — Developers can use TypeScript generics and project functions to create custom RxJS operators like listMap and zipMap.
1. **Type definitions for handling nested observables in operators** (21:55) — Extending observable inputs and utilizing flatMap mechanisms allows custom operators to handle functions returning observables.
1. **Applying DRY principles to complex pipelines with TypeScript** (28:17) — Relying on strict TypeScript definitions ensures correct implementations when abstracting repetitive pipeline logic into operators.
1. **Testing and extending custom RxJS operators in production** (29:55) — Practical insights cover unit testing operators, error handling, syntax choices, and open-source contribution patterns.

## Related Moments

- [Abstracting recurring logic into custom RxJS operators](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on) (from "Angular tips/tricks you can use from tomorrow on")
- [Structuring pipelines with new pipeable creation operators](https://www.wearedevelopers.com/videos/1-practice-makes-perfect-when-it-comes-to-rxjs) (from "Practice makes perfect - when it comes to RxJS")
- [Building scalable applications with reactive programming](https://www.wearedevelopers.com/videos/383-kubernetes-native-java) (from "Kubernetes Native Java")
- [Utilizing JavaScript primitives for reactivity and user interface synchronization](https://www.wearedevelopers.com/videos/1682-client-side-state-management-reimagined-think-outside-the-box) (from "Client-Side State Management Reimagined – Think Outside the Box")
- [Constructing data pipelines with stream processing architecture operators](https://www.wearedevelopers.com/videos/1085-why-and-when-should-we-consider-stream-processing-frameworks-in-our-solutions) (from "Why and when should we consider Stream Processing frameworks in our solutions")
- [Improved TypeScript type inference features in RxJS 7](https://www.wearedevelopers.com/videos/1-practice-makes-perfect-when-it-comes-to-rxjs) (from "Practice makes perfect - when it comes to RxJS")

## Related Articles

- [Dev Digest 159: AI Pipelines, 10x Faster TypeScript, How to Interview](https://www.wearedevelopers.com/magazine/563-dev-digest-159-ai-pipelines-10x-faster-typescript-how-to-interview)
- [Exploring TypeScript: Benefits for Large-Scale JavaScript Projects](https://www.wearedevelopers.com/magazine/554-exploring-typescript-benefits-for-large-scale-javascript-projects)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)
- [Using Java 17 latest features in real world projects](https://www.wearedevelopers.com/magazine/121-using-java-17-latest-features-in-real-world-projects)

## Related Jobs

- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Software Engineer, React (Bitpanda Broker)](https://www.wearedevelopers.com/jobs/ext/1444421-software-engineer-react-bitpanda-broker) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Senior Software Engineer](https://www.wearedevelopers.com/jobs/ext/15942-senior-software-engineer) at **GitHub**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**