Reactive Programming

aj-geddes/useful-ai-prompts/skills/reactive-programming

by aj-geddes3f5182cfd739No license355 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 months ago

Implement reactive programming patterns using RxJS, streams, observables, and backpressure handling. Use when building event-driven UIs, handling async data streams, or managing complex data flows.

Instructions onlySoftware Development

AI-generated overview

Guides implementing reactive programming patterns with RxJS observables, streams, and backpressure handling.

What it does: This skill provides instructions and reference guides for building event-driven applications with RxJS. It covers observables, operators, subjects, debounced search, state management, WebSocket reconnection, combining streams, backpressure, and custom operators, plus a component template. It produces guidance and code examples rather than running scripts.
When to use it: Use it when building event-driven UIs, handling asynchronous data streams, managing complex data flows, or working with real-time updates such as WebSocket or SSE connections.
Requirements: No scripts are shipped; it is instructions and reference documents only. Working with the examples assumes a TypeScript/JavaScript project with the RxJS package available.

Overview

Build responsive applications using reactive streams and observables for handling asynchronous data flows.

When to Use

Complex async data flows
Real-time data updates
Event-driven architectures
UI state management
WebSocket/SSE handling
Combining multiple data sources

Quick Start

Minimal working example:

typescript

import {  Observable,  Subject,  BehaviorSubject,  fromEvent,  interval,} from "rxjs";import {  map,  filter,  debounceTime,  distinctUntilChanged,  switchMap,} from "rxjs/operators";
// Create observable from arrayconst numbers$ = new Observable<number>((subscriber) => {  subscriber.next(1);  subscriber.next(2);  subscriber.next(3);  subscriber.complete();});
numbers$.subscribe({  next: (value) => console.log(value),// ... (see reference guides for full implementation)

import {  Observable,  Subject,  BehaviorSubject,  fromEvent,  interval,} from "rxjs";import {  map,  filter,  debounceTime,  distinctUntilChanged,  switchMap,} from "rxjs/operators";
// Create observable from arrayconst numbers$ = new Observable<number>((subscriber) => {  subscriber.next(1);  subscriber.next(2);  subscriber.next(3);  subscriber.complete();});
numbers$.subscribe({  next: (value) => console.log(value),// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
RxJS Basics [blocked]	RxJS Basics
Search with Debounce [blocked]	Search with Debounce
State Management [blocked]	State Management
WebSocket with Reconnection [blocked]	WebSocket with Reconnection
Combining Multiple Streams [blocked]	Combining Multiple Streams
Backpressure Handling [blocked]	Backpressure Handling
Custom Operators [blocked]	Custom Operators

Best Practices

✅ DO

Unsubscribe to prevent memory leaks
Use operators to transform data
Handle errors properly
Use shareReplay for expensive operations
Combine streams when needed
Test reactive code

❌ DON'T

Subscribe multiple times to same observable
Forget to unsubscribe
Use nested subscriptions
Ignore error handling
Make observables stateful

Source and attribution

Source:aj-geddes/useful-ai-promptsinskills/reactive-programmingat commit3f5182c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Reactive Programming

Reactive Programming

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

Source and attribution

More from aj-geddes/useful-ai-prompts

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices