Public
Edited
Mar 8, 2023
1 fork
3 stars
{
const button = createButton()
let count = 0; //ooops... a global variable
button.addEventListener('click', () => button.innerHTML = `Clicked ${++count} times`)
return button
}
{
const {fromEvent} = rx
const {scan} = rx.operators
const button = createButton()
fromEvent(button, 'click')
.pipe(scan(count => count + 1, 0))
.subscribe(count => button.innerHTML = `Clicked ${count} times`)
return button
}
{
const button = createButton()
let count = 0;
let rate = 1000;
let lastClick = Date.now() - rate;
button.addEventListener('click', () => {
if (Date.now() - lastClick >= rate) {
button.innerHTML = `Clicked ${++count} times`;
lastClick = Date.now();
}
});
return button
}
{
const {fromEvent} = rx
const {scan, throttleTime} = rx.operators
const button = createButton()
fromEvent(button, 'click')
.pipe(
throttleTime(1000),
scan(count => count + 1, 0)
)
.subscribe(count => button.innerHTML = `Clicked ${count} times`)
return button
}
{
const {from} = rx
const {take, delay} = rx.operators
const mydiv = html`</div>`
//Promise
const promiseSource = from(new Promise(resolve => resolve('😀')))
.subscribe(
x => log(x, mydiv),
err => console.log(err),
() => log('Promise Completed 👍', mydiv)
);
//Set
const s = new Set(['😊', '😍']);
rx.from(s).subscribe(
x => log(x, mydiv),
err => console.log(err),
() => log('Completed 👍', mydiv)
);
// => 😊
// => 😍
// => Completed 👍
// Map
const m = new Map([['key1', '🙈'], ['key2', '🙉'], ['key3', '🙊']]);
from(m).subscribe(
x => log(x, mydiv),
err => console.log(err),
() => log('Completed 👍', mydiv)
);
// => key1,🙈
// => key2,🙉
// => key3,🙊
// => Completed 👍
// String
from('foo').subscribe(
x => log(x, mydiv),
err => console.log(err),
() => log('Completed 👍', mydiv)
);
// => Next: f
// => Next: o
// => Next: o
// => Completed 👍
function* generateSequence() {
let num = 0;
while (true) {
yield num++;
}
}
//Generator
from(generateSequence()).pipe(take(3)).subscribe(
x => log(x, mydiv),
err => console.log(err),
() => log('Completed 👍', mydiv)
);
// => 0
// => 1
// => 2
// => Completed 👍
return mydiv
}
{
const {of, concat} = rx
const {delay} = rx.operators
const div = html`</div>`
concat(
of(1, 2, 3),
of(4, 5, 6),
of(7, 8, 9)
)
// log: 1, 2, 3, 4, 5, 6, 7, 8, 9
.subscribe(val => log(val, div));
return div
}
{
const {of} = rx
const {delay, concat} = rx.operators
const div = html`</div>`
const first = of(1, 2, 3)
const second = of(4, 5, 6)
first.pipe(
delay(1000),
concat(second)
).subscribe(val => log(val, div));
return div
}
{
// RxJS v6+
const {of} = rx
const {flatMap, map} = rx.operators
const div = html`</div>`
//emit 'Hello'
const source = of('Hello');
//map to inner observable and flatten
const example = source.pipe(flatMap(val => of(`${val} World!`)));
//output: 'Hello World!'
const subscribe = example.subscribe(val => log(val, div));
return div
}
{
// RxJS v6+
const {of} = rx
const {flatMap, map} = rx.operators
const div = html`</div>`
//emit 'Hello'
const source = of('Hello');
const myPromise = val =>
new Promise(resolve => resolve(`${val} World From Promise!`));
//flatmap the promise and emit result
const example = source.pipe(flatMap(val => myPromise(val)));
//output: 'Hello World From Promise'
const subscribe = example.subscribe(val => log(val, div));
return div
}
{
const {from} = rx
const {filter, map, tap} = rx.operators
const div = html`</div>`
const valuesVanilla = [0, 1, 2, 3, 4, 5, 6]
const resultVanilla = valuesVanilla
.map(val => val * 2)
.filter(val => val % 3 === 0)
log(resultVanilla, div)
const valuesRx = from(valuesVanilla)
const result = valuesRx.pipe(
map(val => val * 2),
filter(val => val % 3 === 0)
).subscribe(val => log(val, div));
return div
}
md`# Main takeways from the project
- don't mix learning with making money (select one)
- reactive functional programming has a big potential
- but also a steep learning curve`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
