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.

Matching moments

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Recreating React components using AI and dev tools
04:56 MIN

Recreating React components using AI and dev tools

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

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

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Using AI to overcome challenges in systems programming
02:49 MIN

Using AI to overcome challenges in systems programming

AI in the Open and in Browsers - Tarek Ziadé

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.

Senior iOS Developer

Senior iOS Developer

Rxswift
Municipality of Las Rozas de Madrid, Spain

Remote
€40-60K
iOS
Core Data
Objective-C
+3