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
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
08:27 MIN
Exploring the core principles of reactive programming
Rethinking Reactive Architectures with GraphQL
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
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
42:16Hello generics, goodbye boilerplate!
Miroslav Jonaš
40:19React and the power of visualisation
Daisy Muyldermans
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Nia Health GmbH
Berlin, Germany
Intermediate
Senior
CSS
GIT
React
TypeScript
Schulz.codes GmbH
Darmstadt, Germany
Intermediate
Senior
React
JavaScript
TypeScript
Cap3 GmbH
Kiel, Germany
Intermediate
Senior
React
Angular
JavaScript
TypeScript
BSB Bremer Software & Beratungs GmbH
Bremen, Germany
Intermediate
Senior
CSS
Java
HTML
React
JavaScript
+1
Haufe-Lexware GmbH & Co. KG
Freiburg im Breisgau, Germany
Senior
Java
React
TypeScript
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
JO Media Software Solutions GmBh
Brunn am Gebirge, Austria
Senior
CSS
Angular
JavaScript
TypeScript