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.
ROSEN Technology and Research Center GmbH
Osnabrück, Germany
Senior
TypeScript
React
+3
Matching moments
04:30 MIN
The history and evolution of ReactiveX and RxJS
How to Create New RxJS Operators
03:03 MIN
Recommended resources for learning RxJS
Observables in Plain terms
06:12 MIN
Audience Q&A on signals and Angular development
Angular Signals: what's all the fuss about?
03:20 MIN
Summary of benefits and the future of reactivity
Angular Signals: what's all the fuss about?
05:09 MIN
Implementing the event-driven NgRx Signal Store API
Client-Side State Management Reimagined – Think Outside the Box
02:13 MIN
Exploring reactive Java frameworks and adoption challenges
Side-by-Side: Reactive vs non-reactive Java
04:39 MIN
Addressing the challenge of long, unreadable pipelines
How to Create New RxJS Operators
01:58 MIN
Building with familiar React APIs and real CSS
Lynx: Native for More
Featured Partners
Related Videos
50:18Observables in Plain terms
Georgi Parlakov
43:20The Art and Craft of Type Development
Michael Hladky & Stefan Baumgartner
58:15How to Create New RxJS Operators
Mohammad-Ali A'râbi
41:06Rethinking Reactive Architectures with GraphQL
David Leitner
40:19React and the power of visualisation
Daisy Muyldermans
39:42Hands-on React Native: From Zero to Hero
Dmitry Vinnik
26:58NgRx Tips for Future-Proof Angular Apps
Marko Stanimirović
21:35Build UIs that learn - Discover the powerful combination of UI and AI
Eliran Natan
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
&why GmbH
Berlin, Germany
€50-70K
Junior
Intermediate
Senior
React
Next.js
TypeScript
PiNCAMP GmbH
Berlin, Germany
Senior
React
GraphQL
Next.js
Code Healers LLC
Hinesville, United States of America
Remote
€40-50K
Intermediate
Senior
PHP
.NET
React
+2
KA RESOURCES
Mannheim, Germany
€65K
GIT
React
WebPack
JavaScript
+1
Projectsimprove
Senior
API
GIT
React
Node.js
GraphQL
+4