> Markdown version of [/videos/1-practice-makes-perfect-when-it-comes-to-rxjs?t=0](https://www.wearedevelopers.com/videos/1-practice-makes-perfect-when-it-comes-to-rxjs?t=0). 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).

---

# Practice makes perfect - when it comes to RxJS

Struggling with RxJS memory leaks and messy state? Stop memorizing obscure operators and master complex reactive streams through hands-on practice.

- **Speakers:** Jan-Niklas Wortmann
- **Event:** WeAreDevelopers LIVE
- **Published:** June 12, 2020
- **Duration:** 33:25
- **URL:** https://www.wearedevelopers.com/videos/1-practice-makes-perfect-when-it-comes-to-rxjs

## Summary

Learning RxJS is often compared to riding a bicycle or learning a foreign language: initially intimidating, but highly intuitive once a 'reactive mindset' is properly established. Rather than memorizing every obscure operator, developers should focus on understanding reactive concepts through continuous hands-on practice, noting that 'observables don't cause problems, establishing a reactive mindset does.' Translating imperative mechanics to reactive streams requires recognizing architectural flows, such as treating a swipe gesture as simply a sequence starting with a mousedown, capturing movement, and completing on a mouseup event.

Applying these concepts to build complex UI features, such as an interactive image carousel, highlights the raw composability of RxJS. By utilizing the `merge` operator, developers can combine isolated mouse and touch actions into a single unified stream, simplifying downstream logic. Utilizing `switchMap` dictates event initiation, while binding `takeUntil` to a component's lifecycle acts as a critical guardrail to prevent dangerous memory leaks. Visual updates can be meticulously coordinated with the browser's natural rendering cycle by passing the `animationFrameScheduler` to the `observeOn` operator, ensuring smooth transitions. Constructing auto-advancing timers that cleanly reset entirely via declarative event orchestration further minimizes messy manual state management.

Looking ahead to RxJS 7, developers will benefit from significant quality-of-life enhancements. Improved TypeScript integrations provide strict type inference across conditional logic, complex observable unions, and standard operators like `reduce`, `scan`, and `filter` when using Boolean constructors. The introduction of the `animationFrames` observable natively supports high-performance, reactive UI animations strictly aligned with browser repaints. Finally, appending a 'with' suffix to conventional pipable operators—such as `concatWith`—drastically improves developer ergonomics, allowing specific operators to manipulate a single initial stream before cleanly concatenating with subsequent observables.

**Keywords:** rxjs reactive mindset, swipe gesture implementation, touch and mouse event merging, switchmap event modeling, takeuntil memory leak prevention, animationframescheduler optimization, rxjs 7 typescript improvements, concatwith pipable operator, reactive state management, interval and timer observables, boolean constructor type inference, reactive ui animations, event stream composability, long polling patterns

## Chapters

1. **Navigating the learning curve of reactive programming** (00:00) — Understanding the initial intimidation developers face when adopting reactive architectures.
1. **Comparing imperative and reactive programming paradigms** (01:58) — Transitioning from imperative to reactive code requires consistent practice and conceptual mapping.
1. **Implementing touch and swipe gestures in a carousel** (05:34) — Building a carousel by merging and handling touch and mouse events sequentially.
1. **Adding keyboard navigation to the carousel component** (11:33) — Binding specific keydown events to application actions using fromEvent and filter operators.
1. **Integrating an automated timer with reset logic** (14:20) — Utilizing the interval operator to build a slide timer that pauses during user interactions.
1. **Review of reactive patterns and structural composition** (18:07) — Consolidating the sequence of mapping, merging, and safely subscribing to complex event streams.
1. **Improved TypeScript type inference features in RxJS 7** (23:51) — Discovering upgrades to type safety that automatically resolve union types for conditionals and reducers.
1. **Creating smooth component animations with animationFrames observable** (28:28) — Synchronizing state changes with browser rendering cycles for performant UI updates.
1. **Structuring pipelines with new pipeable creation operators** (30:03) — Simplifying observable concatenation within chains by replacing static operators with pipeable alternatives.
1. **Recommended practice projects to master reactive data flows** (31:21) — Practical software challenges like drag-and-drop and long polling reinforce proper reactive data flow.

## Related Moments

- [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")
- [Testing and extending custom RxJS operators in production](https://www.wearedevelopers.com/videos/683-how-to-create-new-rxjs-operators) (from "How to Create New RxJS Operators")
- [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")
- [Building scalable applications with reactive programming](https://www.wearedevelopers.com/videos/383-kubernetes-native-java) (from "Kubernetes Native Java")
- [Summarizing modern patterns for robust interactive components](https://www.wearedevelopers.com/videos/1589-building-interactive-async-ui-with-react-19-and-ariakit) (from "Building Interactive Async UI with React 19 and Ariakit")
- [The growing demand for reactive programming in modern projects](https://www.wearedevelopers.com/videos/751-is-reactive-the-new-black-imperative-vs-reactive-programming-with-quarkus) (from "Is reactive the new black? Imperative vs. reactive programming with Quarkus")

## Related Articles

- [Create Videos Programmatically with React and Remotion](https://www.wearedevelopers.com/magazine/742-create-videos-programmatically-with-react-and-remotion)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS](https://www.wearedevelopers.com/magazine/632-view-transition-api-adding-single-page-transitions-with-just-html-css-and-js)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)

## Related Jobs

- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Software Engineer, React (Bitpanda Broker)](https://www.wearedevelopers.com/jobs/ext/1444421-software-engineer-react-bitpanda-broker) at **Bitpanda**