This a simple demonstration of what is an observable –– just an object with a subscribe(forEach) method

Homemade-Observable.js

function Observable(forEach) {
  this._forEach = forEach;
}

Observable.prototype = {
  forEach: function(onNext, onError, onCompleted) {
    if (typeof onNext === "function") {
      this._forEach({
        onNext: onNext,
        onError: onError || function() {},
        onCompleted: onCompleted || function() {}
      });
    } else {
      // onNext is {onNext: () => {}, onError: (), ...}
      return this._forEach(onNext);
    }
  },
  map: function(projectionFunction) {
    var self = this;
    return new Observable(function forEach(observer) {
      return self.forEach({
        onNext: x => {
          observer.onNext(projectionFunction(x));
        },
        onError: e => observer.onError(e),
        onCompleted: () => observer.onCompleted()
      });
    });
  },
  filter: function(testFunction) {
    var self = this;
    return new Observable(function forEach(observer) {
      return self.forEach({
        onNext: x => {
          if (testFunction(x)) {
            return observer.onNext(x);
          }
        },
        onError: e => observer.onError(e),
        onCompleted: () => observer.onCompleted()
      });
    });
  },
  take: function(num) {
    var self = this;
    var counter = 0;
    return new Observable(function forEach(observer) {
      var subscription = self.forEach({
        onNext: x => {
          observer.onNext(x);
          counter++;
          if (counter > num) {
            subscription.dispose();
            observer.onCompleted();
          }
        },
        onError: e => observer.onError(e),
        onCompleted: () => observer.onCompleted()
      });

      return subscription;
    });
  }
};

Observable.fromEvent = function(dom, eventName) {
  return new Observable(function forEach(observer) {
    var handler = e => observer.onNext(e);

    dom.addEventListener(eventName, handler);

    return {
      dispose: () => {
        dom.removeEventListener(eventName, handler);
      }
    };
  });
};


const button = document.getElementById("button");

Observable.fromEvent(button, "click")
  .filter(e => e.pageX > 20)
  .map(e => e.pageX + "px")
  .forEach({
    onNext: e => console.log(e)
  });

Play on codesandbox