Observable implementation

Very very very naive implementation

by Julien Roche

HTML

<h1>Please enter your search terms</h1>
<p>
  <input type="text" name="terms" />
</p>
<br />
<hr />
<br />
<fieldset>
  <legend>Results</legend>
  <section></section>
</fieldset>

JavaScript 1.7

const inputElement = document.querySelector('input');
const resultsElement = document.querySelector('section');

function mapStringToArray(termsString) {
	return [...termsString];
}

function reverseTerms(terms) {
	return terms.reverse().join('');
}


class Observable {
	constructor() {
  	this._pipeline = [];
    this._success;
    this._error;
  }
  
  next(value) {
  	if (this._success) {
    	try {
      	let data = value;
        for (const step of this._pipeline) {
					data = step(data);
        }
        
        this._success(data);
      
      } catch (e) {
      	if (this._error) {
        	this._error(e);
        }
      }
    }
  }
  
  pipe(...steps) {
  	Array.prototype.push.apply(this._pipeline, steps);
    return this;
  }
  
  subscribe(success, error) {
  	this._success = success;
    this._error = error;
  }

	static fromEvent(element, eventName) {
  	const observable = new Observable();

    element.addEventListener(
    	eventName,
      (event) => observable.next(element.value),
      false
    );

    return observable;
  }
}

Observable
	.fromEvent(inputElement, 'input')
  .pipe(
  	mapStringToArray,
    reverseTerms
  )
  .subscribe(
  	(results) => resultsElement.textContent = results,
    console.error
  );