How to Combine RxJS, Svelte, and RSocket for Reactive Front‑End Apps

In the Reactive ecosystem, two renowned engineers—Ben Christensen, author of RxJava at Netflix, and Ben Lesh, creator of RxJS—have made significant contributions. Early 2019 saw the rise of RSocket, a binary asynchronous communication protocol fully compatible with Reactive semantics, and the release of Svelte 3.0, which simplifies Reactive development by compiling away the Virtual DOM.

Svelte

Svelte’s core idea is Reactive programming, but unlike other front‑end frameworks it achieves reactivity through static compilation, reducing runtime code size and improving performance. The framework offers concise syntax, low entry barriers, and built‑in support for RxJS observables and stores such as BehaviorSubject.

RxJS interval example

<script>
  import { interval } from "rxjs";
  import { map, take, startWith } from "rxjs/operators";

  const counter = interval(1000).pipe(
    map(i => i + 1),
    startWith(0),
    take(10)
  );
</script>

<h2>Count to 10</h2>
{$counter}

RxJS BehaviorSubject

<script>
  const store1 = new BehaviorSubject(0);
  store1.set = store1.next;
</script>

<button on:click={() => { store1.next(1) }}>increment 1</button>
<button on:click={() => {$store1 = 2}}>increment 2</button>
{$store1}

RxJS fromFetch

Using fromFetch enables fully reactive HTTP interactions.

<script>
  const data = fromFetch('https://httpbin.org/ip', {
    selector: response => response.json()
  });
</script>

<h2>Your IP:</h2>
{$data.origin}

RSocket

RSocket provides several communication models that map naturally to Reactive streams:

request/response – similar to HTTP or RPC, asynchronous and Promise‑compatible.

request/stream – Pub/Sub style streaming, useful for Kafka‑like data feeds.

fireAndForget – one‑way messages for high‑throughput data collection.

channel – bidirectional communication, ideal for IM/chat scenarios.

Because RSocket is built on Reactive semantics, it integrates seamlessly with RxJS and Svelte without extra adapters. It also supports peer‑to‑peer communication, allowing Svelte stores to synchronize across pages.

JavaScript support includes RSocket Browser, RSocket Node.js, and RSocket Deno. A demo repository demonstrates Svelte‑RSocket integration:

RxJS 7

RxJS 7 adopts the latest TypeScript version, offering cleaner syntax and improved reliability. Key updates include:

toPromise replacement

Use firstValueFrom or lastValueFrom instead of the deprecated toPromise:

import { firstValueFrom, lastValueFrom } from "rxjs";
let result = await firstValueFrom(observable);

AsyncIterable‑based Observable creation

AsyncIterables can now be turned into Observables, enabling patterns like for await…of:

from(iterable).subscribe(x => console.log(x));

Enhanced fromFetch

The selector option lets you directly extract JSON or text from the response, removing the need for a separate map step:

fromFetch("http://httpbin.org/ip", { selector: response => response.json() });

RxJS on Deno

Deno’s native TypeScript support and Web API‑compatible design allow RxJS’s fromFetch and WebSocket utilities to run unchanged. Example:

import { firstValueFrom } from "https://esm.sh/[email protected]?no-check";
import { fromFetch } from "https://esm.sh/[email protected]/fetch?no-check";

const ip = await firstValueFrom(
  fromFetch("http://httpbin.org/ip", { selector: response => response.json() })
);
console.log(ip.origin);

RxJS 7 also brings memory optimizations, additional operators, and deprecations that will become removals in future major versions, but remains backward compatible for now.

Conclusion

While Reactive programming can appear complex compared to Promise‑based code, Svelte lowers the barrier for UI reactivity, RSocket abstracts communication models with a unified Reactive API, and RxJS provides the powerful glue that connects UI and backend streams. Together they enable fully reactive front‑end architectures without excessive boilerplate.

The 15th D2 Front‑End Technology Forum will feature RxJS author Ben Lesh presenting “Refactoring the RxJS Architecture: Making It Smaller and Faster,” offering deeper insights into the library’s evolution.