Jan-Niklas Wortmann
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
01:18 MIN
The history and evolution of ReactiveX and RxJS
How to Create New RxJS Operators
47:15 MIN
Recommended resources for learning RxJS
Observables in Plain terms
51:51 MIN
Audience Q&A on signals and Angular development
Angular Signals: what's all the fuss about?
48:31 MIN
Summary of benefits and the future of reactivity
Angular Signals: what's all the fuss about?
11:08 MIN
Exploring reactive Java frameworks and adoption challenges
Side-by-Side: Reactive vs non-reactive Java
09:34 MIN
Addressing the challenge of long, unreadable pipelines
How to Create New RxJS Operators
03:03 MIN
Building with familiar React APIs and real CSS
Lynx: Native for More
14:45 MIN
Refactoring live queries with RxJS and the async pipe
Meet Your New BFF: Backend to Frontend without the Duct Tape
Featured Partners
Related Videos
58:15How to Create New RxJS Operators
Mohammad-Ali A'râbi
26:58NgRx Tips for Future-Proof Angular Apps
Marko Stanimirović
50:28Angular tips/tricks you can use from tomorrow on
Benedikt Starzengruber
50:18Observables in Plain terms
Georgi Parlakov
43:20The Art and Craft of Type Development
Michael Hladky & Stefan Baumgartner
58:03Angular Signals: what's all the fuss about?
Daniela Bonvini
25:41Side-by-Side: Reactive vs non-reactive Java
Jan Weinschenker
30:36The Eventloop in JavaScript - How does it work?
Christian Woerz
From learning to earning
Jobs that call for the skills explored in this talk.
Senior Fullstack Engineer – Angular/.Net (f/m/d)
Apaleo
München, Germany
Remote
€65-85K
Senior
.NET
Angular
JavaScript
+1
![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
Software Engineer
tree-IT GmbH
Bad Neustadt an der Saale, Germany
Remote
€54-80K
Intermediate
Senior
Java
TypeScript
Spring Boot
