Jan-Niklas Wortmann

Practice makes perfect - when it comes to RxJS

Stop memorizing RxJS operators. Start building a reactive mindset to master complex async logic and build UIs from scratch.

Practice makes perfect - when it comes to RxJS
#1about 5 minutes

Developing a reactive mindset for RxJS

Learning RxJS is like learning a new language, where practicing to develop a reactive mindset is more crucial than memorizing every operator.

#2about 6 minutes

Building a swipe gesture for a carousel

Implement a swipe gesture by merging mouse and touch events, using `switchMap` to track movement, and `takeUntil` to detect the end of the gesture.

#3about 3 minutes

Adding keyboard navigation to the carousel

Use `fromEvent` on the document to listen for keydown events, then filter for specific keys and map them to navigation actions.

#4about 4 minutes

Creating an auto-play timer with reset logic

Implement an auto-advancing carousel timer using `interval`, which resets on user interaction with `takeUntil` and restarts with `repeatWhen`.

#5about 6 minutes

Recapping the reactive carousel implementation

A step-by-step review of how observables for swipe, keyboard, and timer events were composed and merged to create a fully functional carousel.

#6about 5 minutes

Exploring improved typings in RxJS 7

RxJS 7 introduces better type inference for union types in conditional logic, `concat`, `reduce`, and when filtering with the `Boolean` constructor.

#7about 3 minutes

New animation and composition operators in RxJS 7

Discover the new `animationFrame` observable for creating smooth animations and the `concatWith` pipeable operator for improved code readability.

#8about 2 minutes

Practice examples for mastering RxJS

To solidify your reactive mindset, try building common UI features like drag-and-drop, typeahead search, or long polling with RxJS.

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

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Videos

See all videos
Observables in Plain terms50:18

Observables in Plain terms

Georgi Parlakov

The Art and Craft of Type Development43:20

The Art and Craft of Type Development

Michael Hladky & Stefan Baumgartner

How to Create New RxJS Operators58:15

How to Create New RxJS Operators

Mohammad-Ali A'râbi

Rethinking Reactive Architectures with GraphQL 41:06

Rethinking Reactive Architectures with GraphQL

David Leitner

React and the power of visualisation40:19

React and the power of visualisation

Daisy Muyldermans

Hands-on React Native: From Zero to Hero39:42

Hands-on React Native: From Zero to Hero

Dmitry Vinnik

NgRx Tips for Future-Proof Angular Apps26:58

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

From learning to earning

Jobs that call for the skills explored in this talk.