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.

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
TypeScript
Angular
+1

Matching moments

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

Developing resilience by expanding your capacity for failure
04:57 MIN

Developing resilience by expanding your capacity for failure

What 2025 Taught Us: A Year-End Special with Hung Lee

Balancing the trade-off between efficiency and resilience
03:38 MIN

Balancing the trade-off between efficiency and resilience

What 2025 Taught Us: A Year-End Special with Hung Lee

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
How to Create New RxJS Operators58:15

How to Create New RxJS Operators

Mohammad-Ali A'râbi

NgRx Tips for Future-Proof Angular Apps26:58

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

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

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

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

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

Angular Signals: what's all the fuss about?

Daniela Bonvini

Side-by-Side: Reactive vs non-reactive Java25:41

Side-by-Side: Reactive vs non-reactive Java

Jan Weinschenker

Multiple Ships to the Island - Micro Frontends & Island Architectures59:03

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

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.