RxJS vs RxJS-Compat: Modern Reactive Streams vs Legacy Migration

Both rxjs and rxjs-compat deal with reactive programming using Observables, but they serve different purposes in the lifecycle of the library. rxjs is the main package used for building applications today. rxjs-compat was a temporary tool designed to help developers move from version 5 to version 6. Let's compare how they handle imports, operators, and long-term support.

📦 Import Paths: Modular vs Legacy

rxjs uses modular import paths introduced in version 6.

• You import creators and operators from specific sub-paths.
• This allows bundlers to remove unused code (tree-shaking).

// rxjs: Modern modular imports
import { Observable } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const source = new Observable(subscriber => {
  subscriber.next(1);
});

source.pipe(
  map(x => x * 2),
  filter(x => x > 2)
);

rxjs-compat allowed old version 5 import paths to work in version 6.

• You could import directly from deep paths like rxjs/Observable.
• This prevented immediate breakage but blocked tree-shaking benefits.

// rxjs-compat: Legacy import paths (v5 style)
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

const source = new Observable(subscriber => {
  subscriber.next(1);
});

source
  .map(x => x * 2)
  .filter(x => x > 2);

🛠️ Operator Usage: Pipeable vs Prototype

rxjs relies on pipeable operators used inside the .pipe() method.

• Operators are pure functions passed as arguments.
• This makes testing easier and reduces side effects.

// rxjs: Pipeable operators
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

of(1, 2, 3).pipe(
  map(value => value * 10)
).subscribe(console.log);

rxjs-compat supported prototype methods chained directly on Observables.

• Operators were added to the Observable prototype globally.
• This pattern is no longer supported in RxJS version 7.

// rxjs-compat: Prototype chaining (v5 style)
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

Observable.of(1, 2, 3)
  .map(value => value * 10)
  .subscribe(console.log);

📅 Maintenance and Version Support

rxjs is actively maintained and receives regular updates.

• Current versions (7+) require the standard import style.
• Using this package ensures compatibility with the wider ecosystem.

// rxjs: Current standard (v7+)
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';

interval(1000).pipe(take(5)).subscribe();

rxjs-compat is deprecated and should not be used in new projects.

• It was removed entirely in RxJS version 7.
• Relying on it prevents you from upgrading to newer versions.

// rxjs-compat: Deprecated pattern
// This will fail if you upgrade to RxJS v7
import { Observable } from 'rxjs/Observable'; 

🤝 Similarities: Shared Core Concepts

Despite the differences in syntax, both packages share the same underlying logic for handling streams. Here are key overlaps:

1. 🔄 Observable Streams

• Both use the Observable type to represent data over time.
• Support subscription and unsubscription patterns.

// Shared concept: Creating a stream
// Works in both (with different imports)
const stream = new Observable(observer => {
  observer.next('data');
  observer.complete();
});

2. 👀 Subscription Management

• Both require subscribing to start execution.
• Both return a Subscription object to cancel work.

// Shared concept: Subscribing
const sub = stream.subscribe({
  next: value => console.log(value),
  complete: () => console.log('done')
});

sub.unsubscribe();

3. ⚡ Async Handling

• Both handle async events like clicks, timers, or HTTP requests.
• Provide tools to manage concurrency and ordering.

// Shared concept: Handling async events
// rxjs
import { fromEvent } from 'rxjs';
fromEvent(document, 'click').subscribe();

// rxjs-compat (v5 style)
import { Observable } from 'rxjs/Observable';
Observable.fromEvent(document, 'click').subscribe();

📊 Summary: Key Similarities

🆚 Summary: Key Differences

💡 The Big Picture

rxjs is the foundation for modern reactive development 🏗️. It offers a clean, modular API that works well with modern bundlers and TypeScript. Use this for any new work or when updating existing apps to current standards.

rxjs-compat was a temporary bridge 🌉 for teams stuck on version 5. It allowed them to upgrade the core library without rewriting every file at once. However, it is now obsolete. Keeping it in your project blocks future upgrades and adds unnecessary weight.

Final Thought: If you see rxjs-compat in your dependencies, treat it as technical debt. Plan a sprint to refactor imports to the standard rxjs paths so you can remove the compat package and move to the latest version.