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
05:32 MIN
Exploring the core principles of reactive programming
Rethinking Reactive Architectures with GraphQL
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?
14:04 MIN
Implementing the event-driven NgRx Signal Store API
Client-Side State Management Reimagined – Think Outside the Box
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
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
30:36The Eventloop in JavaScript - How does it work?
Christian Woerz
25:41Side-by-Side: Reactive vs non-reactive Java
Jan Weinschenker
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Frontend Web Developer (JavaScript, React)
Die Socialisten
Vienna, Austria
Senior
Jest
React
Redux
JavaScript
Senior Frontend Developer - Typescript / Svelte - (f/m/x)
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Software Engineering Coach: Flexible (Domain-Driven Design, React Native More)
Skiller Whale
London, United Kingdom
Remote
€208K
Kotlin
Docker
PostgreSQL
+1