Welcome to Zen Observable: The Reactive Programming Library

Zen Observable is a powerful library for implementing reactive programming in JavaScript. It follows the ES Observable specification, providing a robust foundation for working with asynchronous streams of data. Whether you are building complex applications or simple real-time data streams, Zen Observable offers a wide range of features to meet your needs.

Getting Started with Zen Observable

First, install the zen-observable package:

  npm install zen-observable

Creating Simple Observables

An Observable represents a stream of data. You can create an observable using the new Observable constructor:

  
    import Observable from 'zen-observable';

    const observable = new Observable(observer => {
      observer.next('Hello, Zen Observable!');
      observer.complete();
    });

    observable.subscribe({
      next(x) { console.log(x); },
      complete() { console.log('Done'); },
    });
  

This will output:

  
    Hello, Zen Observable!
    Done
  

Using Various Zen Observable APIs

map

The map method transforms each item emitted by an observable:

  
    const observable = new Observable(observer => {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.complete();
    });

    const mapped = observable.map(x => x * 2);

    mapped.subscribe({
      next(x) { console.log(x); },
      complete() { console.log('Done'); },
    });
  

This will output:

  
    2
    4
    6
    Done
  

filter

The filter method emits only those items that meet a specified condition:

  
    const observable = new Observable(observer => {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.next(4);
      observer.complete();
    });

    const filtered = observable.filter(x => x % 2 === 0);

    filtered.subscribe({
      next(x) { console.log(x); },
      complete() { console.log('Done'); },
    });
  

This will output:

  
    2
    4
    Done
  

reduce

The reduce method applies a function to each item emitted by an observable, sequentially, reducing the items to a single value:

  
    const observable = new Observable(observer => {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      observer.complete();
    });

    const reduced = observable.reduce((acc, x) => acc + x, 0);

    reduced.subscribe({
      next(x) { console.log(x); },
      complete() { console.log('Done'); },
    });
  

This will output:

  
    6
    Done
  

Combining Observables

merge

The merge method combines multiple observables into a single one:

  
    const obs1 = new Observable(observer => {
      observer.next('A');
      observer.complete();
    });

    const obs2 = new Observable(observer => {
      observer.next('B');
      observer.complete();
    });

    const merged = Observable.merge(obs1, obs2);

    merged.subscribe({
      next(x) { console.log(x); },
      complete() { console.log('Done'); },
    });
  

This will output:

  
    A
    B
    Done
  

concat

The concat method concatenates multiple observables, subscribing to each one sequentially:

  
    const obs1 = new Observable(observer => {
      observer.next('A');
      observer.complete();
    });

    const obs2 = new Observable(observer => {
      observer.next('B');
      observer.complete();
    });

    const concatenated = Observable.concat(obs1, obs2);

    concatenated.subscribe({
      next(x) { console.log(x); },
      complete() { console.log('Done'); },
    });
  

This will output:

  
    A
    B
    Done
  

Real-World Application: Simple Chat App

Below is an example of how you might use zen-observable to create a simple chat application:

  
    import Observable from 'zen-observable';

    const messages = new Observable(observer => {
      const ws = new WebSocket('ws://example.com/socket');
      
      ws.onmessage = (event) => observer.next(event.data);
      ws.onerror = (event) => observer.error(event);
      ws.onclose = (event) => observer.complete();
      
      return () => ws.close();
    });

    messages.subscribe({
      next(message) { console.log('New message:', message); },
      error(err) { console.error('Error:', err); },
      complete() { console.log('Connection closed'); },
    });
  

This example demonstrates how to handle real-time data streams from a WebSocket using Zen Observable.

Hash: 0e4673c31a3c9a65a89fa28446195c111eee2edf8f569214b59420f68be42dfe