Tyson Thomas
tysonthomas.90@gmail.com
[{x: 10, y:15}, {x:12, y:18}, {x: 14, y:20}]
....{x: 10, y:15}...{x:12, y:18}...{x: 14, y:20}....
map
reduce
filter
and so on..
- Andre Staltz
import {Observable} from './rx'
//Observable constructor
let myObservable = new Observable(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
myObservable.subscribe(
val => console.log(val),
err => console.log(err),
_ => console.log('done')
);
function* values(){
yield 1;
yield 2;
yield 3;
}
let i = values();
i.next() //{value: 1, done: false}
i.next() //{value: 2, done: false}
i.next() //{value: 3, done: false}
i.next() //{done: true}
let myObservable = new Observable(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
observer.complete();
});
myObservable.subscribe(
val => console.log(val),
err => console.log(err),
_ => console.log('done')
);
Pull
Push
var numbers = [1, 2, 3];
//.values() returns an iterator
var numIterator = numbers.values();
numIterator.next() //{value: 1, done: false }
numIterator.next() //{value: 2, done: false }
numIterator.next() //{value: 3, done: false }
numIterator.next() //{done: true}
Pull
import {Observable} from './rx'
const myButton = document.getElementById('myButton');
let clicks$ = new Observable(observer => {
let onClick = ev => observer.next(ev);
myButton.addEventListener('click', onClick);
return () => {
myButton.removeEventListener('click', onClick);
}
});
let clickListener = clicks$.subscribe(ev => console.log(ev));
const myInput = document.getElementById('myInput');
//stream of keyup Events
let keyups$ = Observable.fromEvent(myInput, 'keyup');
//map to the values
let inputs$ = keyups$.map(ev => ev.target.value);
inputs$.subscribe(text => console.log(text));
//h
//he
//hel
//hell
//hello
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');
const counterOutput = document.getElementById('output');
const getValue = ev => parseInt(ev.target.value,10);
let increments$ = Observable.fromEvent(incrementButton, 'click');
let decrements$ = Observable.fromEvent(decrementButton, 'click');
//merge into a single stream, map to int values
let changes$ = Observable.merge(increments$, decrements$).map(getValue);
//scan (reduce) to track the state
let total$ = changes$.scan((total, value) => total + value, 0);
//set count
total$.subscribe(count => {
counterOutput.innerText = count;
console.log(count);
});
const myInput = document.getElementById('myInput');
// Get all distinct key up events from the input and only fire if long enough and distinct
var keyup = Rx.Observable.fromEvent(myInput, 'keyup')
.map(function (ev) {
return ev.target.value; //get the input value
})
.filter(function (text) {
return text.length > 2; // Only if the text is longer than 2 characters
})
.debounce(750) //Pause for 750ms
.distinctUntilChanged(); // Only if the value has changed
var searcher = keyup.flatMapLatest(searchWikipedia);
// Search Wikipedia for a given term
function searchWikipedia (term) {
return $.ajax({
url: 'http://en.wikipedia.org/w/api.php',
dataType: 'jsonp',
data: {
action: 'opensearch',
format: 'json',
search: term
}
}).promise();
}