book

RxJS Cookbook for Reactive Programming

Name: RxJS Cookbook for Reactive Programming
Author: Nikola Mitrović
ISBN: 9781788624053

by Nikola Mitrović

March 2025

Intermediate to advanced

318 pages

5h 33m

English

Packt Publishing

Read now

Unlock full access

Contributors
About the reviewers
Preface
Who this book is forWhat this book coversTo get the most out of this bookGet in touchFree Benefits with Your BookHow to Unlock
Handling Errors and Side Effects in RxJS
Free Benefits with Your BookTechnical requirementsHandling DOM updatesHow to do it…Step 1 – Handling one search inputStep 2 – Handling two search inputsSee alsoHandling network requestsHow to do it…Step 1 – Handling requests in sequenceStep 2 – Handling requests in parallelStep 3 – Handling concurrent requestsSee alsoHandling network errorsHow to do it…Step 1 – Catching errorsStep 2 – Using the retry patternStep 3 – Using the exponential back off patternStep 4 – Using the circuit breaker patternThere’s more…See alsoDebugging RxJS streamsHow to do it…Step 1 – Logging successful responsesStep 2 – Logging network errorsUnderstanding HTTP pollingHow to do it…Step 1 – Standard HTTP pollingStep 2 – Long HTTP pollingSee alsoHandling WebSocket connectionsHow to do it…Step 1 – Connecting to the socketStep 2 – Implementing a WebSocket heartbeatSee also
Building User Interfaces with RxJS
Technical requirementsUnlocking a phone with precision using RxJS-powered swipe gesturesHow to do it…Step 1 – Creating number padsStep 2 – Identifying user touch eventsStep 3 – Marking selected number padsStep 4 – Creating a trailStep 5 – Checking the resultSee alsoLearning indications with the progress barHow to do it…Step 1 – Creating a progress loading streamStep 2 – Merging progress and request streamsSee alsoStreaming image loading seamlessly with Progressive ImageHow to do it…Step 1 – Defining image sourcesStep 2 – Creating a progress streamStep 3 – Subscribing to the image stream in the templateSee alsoOptimizing loading tab contentHow to do it…Step 1 – Defining a tab group and an active tabStep 2 – Loading tab contentSee alsoReacting to drag-and-drop eventsGetting readyHow to do it…Step 1 – Defining a dropzoneStep 2 – Validating filesStep 3 – Uploading files and tracking progressStep 4 – Showing file uploads in the UIStep 5 – Handling file upload errorsSee alsoCrafting your perfect audio player using flexible RxJS controlsHow to do it…Step 1 – Creating audio player eventsStep 2 – Managing song stateStep 3 – Playing/pausing a songStep 4 – Controlling the song’s volumeStep 5 – Switching songsStep 6 – Skipping to the middle of a songSee alsoStreamlining real-time updates with RxJS-powered notificationsHow to do it…Step 1 – Stacking incoming notificationsStep 2 – Reacting to a user action and displaying notificationsStep 3 – Automatic notification dismissalSee alsoFetching data with the Infinite Scroll Timeline componentHow to do it…Step 1 – Detecting the end of a listStep 2 – Controlling the next page and loading the state of the listStep 3 – Checking for new recipesSee alsoGet This Book’s PDF Version and Exclusive Extras
Understanding Reactive Animation Systems with RxJS
Technical requirementsSimulating realistic ball-bouncing physics using RxJSHow to do it…Step 1 – Animating a ball fallingStep 2 – Bouncing off the groundStep 3 – Stopping and repeating the animationSee alsoCreating mesmerizing fluid particle effects using RxJSHow to do it…Step 1 – Drawing particlesStep 2 – Detecting wall collisionStep 3 – Drawing connectionsStep 4 – Moving particles with a hover effectSee alsoAdding subtle elegance to components with RxJS transitionsHow to do it…Step 1 – Increasing the upload progressStep 2 – Animating the upload progressSee alsoGet This Book’s PDF Version and Exclusive Extras
Testing RxJS Applications
Technical requirementsMastering time-based RxJS operators with marble testingGetting readyHow to do it…Step 1 – Setting up TestSchedulerStep 2 – Testing simple RxJS streamsStep 3 – Testing complex RxJS streamsSee alsoMocking HTTP dependencies with Observables in AngularGetting readyHow to do it…Step 1 – Setting up TestBedStep 2 – Testing a simple HTTP requestStep 3 – Testing multiple requests in sequenceStep 4 – Testing multiple requests in parallelStep 5 – Testing errorsSee alsoMocking API calls with MSWGetting readyHow to do it…Step 1 – Setting up TestBedStep 2 – Testing a simple HTTP requestStep 3 – Testing multiple requests in sequenceStep 4 – Testing multiple requests in parallelStep 5 – Testing errorsSee alsoTesting complex state management with NgRxGetting readyHow to do it…Step 1 – Setting up a mock storeStep 2 – Testing store selectorsStep 3 – Setting up integration test and mock actionsStep 4 – Testing effects and dispatching actionsStep 5 – Testing effect errorsSee also
Performance Optimizations with RxJS
Technical requirementsOptimizing RxJS streams with strategic operator selectionHow to do it…Step 1 – Creating a stream of eventsStep 2 – Transforming the data stream for efficiencyStep 3 – Filtering to reduce data flowStep 4 – Canceling unnecessary requestsStep 5 – Caching the resultsStep 6 – Preventing memory leaksStep 7 – Measuring RxJS stream performanceSee alsoCreating a custom Core Web Vitals performance monitoring systemHow to do it…Step 1 – Setting up Performance ObserverStep 2 – Observing performance entriesSee alsoUsing Web Workers alongside RxJSHow to do it…Step 1 – Setting up a web worker in AngularStep 2 – Subscribing to web worker messagesStep 3 – Optimizing the worker messages streamSee alsoGet This Book’s PDF Version and Exclusive Extras
Building Reactive State Management Systems with RxJS
Technical requirementsBuilding custom client-side state managementHow to do it…Step 1 – Defining the stateStep 2 – Dispatching actionsStep 3 – Applying the reducer function for state transitionsStep 4 – Handling side effectsStep 5 – Slicing the stateStep 6 – Creating composable reducersStep 7 - Creating meta-reducersSee alsoUsing NgRx for state management in AngularHow to do it…Step 1 – Configuring a NgRx storeStep 2 – Handling side effectsStep 3 – Defining selectorsStep 4 – Extending app state with NgRx Router StateStep 5 – Creating meta-reducersSee alsoTanStack Query, meet RxJS – building your own TanStack query with Angular and RxJSHow to do it…Step 1 – Setting up declarative queriesStep 2 – Caching queries with MapStep 3 – Caching with the stale-while-revalidate mechanismStep 4 – Background updatesStep 5 – Automatic garbage collectionSee alsoGet This Book’s PDF Version and Exclusive Extras
Building Progressive Web Apps with RxJS
Technical requirementsDelivering real-time food order updates with RxJS push notificationsHow to do it…Step 1 – Generating VAPID keysStep 2 – Setting up a public key endpointStep 3 – Requesting push notification subscriptionStep 4 – Sending reactive push notifications from the APIStep 5 – Reacting to incoming push notificationsSee alsoImplementing reactive background data syncHow to do it…Step 1 – Intercepting the recipe requestStep 2 – Establishing background sync with APIStep 3 – Setting up Dexie.jsStep 4 – Storing sync data in IndexedDBBuilding offline-ready applications seamlessly with RxDBGetting readyHow to do it…Step 1 – Defining the recipe schemaStep 3 – Subscribing to ChangeEventStep 4 – Searching for a recipe with RxQueryThere’s more...See alsoGet This Book’s PDF Version and Exclusive Extras
Building Offline-First Applications with RxJS
Technical requirementsImplementing seamless RxJS offline-first apps using a Cache-First strategyHow to do it…Step 1 – Extracting data from the Cache APIStep 2 – Falling back to the networkStep 3 – Going offlinePrioritizing fresh data with RxJS network-first strategyHow to do it…Step 1 – Sending a network request when onlineStep 2 – Falling back to the cacheStep 3 – Going offlineOptimizing data freshness and performance with the Stale-While-Revalidate strategyHow to do it…Step 1 – Extracting data from the cacheStep 2 – Checking for the fresh data in the backgroundStep 3 – Going offlineRacing Cache and Network strategyHow to do it…Step 1 – Extracting data from the cacheStep 2 – Sending a network requestStep 3 – Network & cache raceStep 4 – Going offlineSee alsoImplementing the optimistic update patternHow to do it…Step 1 – Creating a custom operatorStep 2 – Applying the optimistic update operatorStep 3 – Going offline

Going Real-Time with RxJS
Technical requirementsImplementing real-time data visualization chartsHow to do it…Step 1 – Connecting to RxJS WebSocketStep 2 – Reconnecting to WebSocket after losing connectionStep 3 – Subscribing to socket data and visualizing dataSee also…Crafting a modern chat applicationHow to do it…Step 1 – Creating a NestJS WebSocket gatewayStep 2 – Connecting to RxJS WebSocket from the frontend appStep 3 – Handling chat topic messagesStep 4 – Handling the event when a user is typingStep 7 – Handling client disconnectionStep 8 – Handling WebSocket disconnectionStep 9 – Sending voice messagesSee also…Playing real-time multiplayer Tic-Tac-ToeHow to do it…Step 1 – Handling multiplayerStep 2 – Playing a moveStep 3 – Checking the winnerSee also…Get This Book’s PDF Version and Exclusive Extras
Building Reactive NestJS Microservices with RxJS
Technical requirementsCrafting resilient REST API microservices in NestJSGetting readyHow to do it...Step 1 – Establishing communication between servicesStep 2 – Applying an exponential backoff strategyStep 3 – Implementing the bulkhead resiliency strategySee also...Mastering reactive event streaming with KafkaGetting readyHow to do it...Step 1 – Setting up the Kafka producerStep 2 – Setting up the Kafka consumerStep 3 – Going reactive with the Kafka producerStep 4 – Reacting to producer connection eventsStep 5 – Buffering messages when the producer is disconnectedStep 6 – Handling backpressure on the producerStep 7 – Going reactive with the Kafka consumerStep 8 – Handling backpressure on the consumerStep 9 – Implementing the dead-letter queue patternSee alsoGoing real time with gRPC streaming in NestJSGetting readyHow to do it...Step 1 – Defining a .proto fileStep 2 – Configuring a gRPC microserviceStep 3 – Creating a gRPC controllerStep 4 – Streaming food order reactive updatesStep 5 – Streaming a courier’s geolocation updatesSee also...
Unlock this Book’s Free Benefits in 3 Easy Steps
Step 1Step 2Step 3Need help?
Index
Other Books You May Enjoy

Overview

RxJS Cookbook for Reactive Programming is your go-to resource for mastering reactive programming concepts in modern web development. Through the exploration of 40+ real-world-recipe solutions, you'll learn to effectively use RxJS techniques to handle asynchronous data streams, perform error management, and build cutting-edge, event-driven web applications.

What this Book will help me do

Master the use of RxJS observables, operators, and subjects to handle complex asynchronous workflows.
Develop robust and error-resilient reactive user interfaces using RxJS integrated with Angular.
Optimize RxJS streams for performance enhancements in your applications.
Apply reactive programming principles to state management and progressive web apps.
Build reactive and event-driven backend microservices with NestJS and RxJS.

Author(s)

Nikola Mitrović is a seasoned software engineer and consultant with over 10 years of industry experience. Specializing in frontend and reactive web development, Nikola applies his expertise in teaching complex RxJS concepts in an approachable and actionable format. Driven by his passion for building quality applications, Nikola facilitates learning through real-world examples and hands-on recipes.

Who is it for?

This book is best suited for intermediate to advanced JavaScript developers, particularly those looking to deepen their skills in reactive programming. If you work with frameworks like Angular or NestJS and aim to effectively manage asynchronous operations, this guide will be a valuable resource. Expand your capability with reactive programming, whether in frontend or backend development, through clear, goal-oriented recipes.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781788624053

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills