Conquering Time with FRP - GOTO...
Transcript of Conquering Time with FRP - GOTO...
![Page 1: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/1.jpg)
Conquering Time with FRP
A practical introduction to Functional Reactive Programming
by sergi mansilla | @sergimansilla
![Page 2: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/2.jpg)
@sergimansilla
![Page 4: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/4.jpg)
Alumni
![Page 5: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/5.jpg)
![Page 6: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/6.jpg)
Shameless linkbaiting
![Page 7: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/7.jpg)
Conquering Time with FRP
A practical introduction to Functional Reactive Programming
by sergi mansilla | @sergimansilla
![Page 8: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/8.jpg)
Tame your async code with this one weird trick!
A practical introduction to Functional Reactive Programming
by sergi mansilla | @sergimansilla
![Page 9: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/9.jpg)
- Linkbaiting - Time
![Page 10: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/10.jpg)
Human beings have hard-wired time in their brain
![Page 11: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/11.jpg)
JS developers have hard-wired async in their brain
![Page 12: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/12.jpg)
Callbacks Promises Generators Events
![Page 13: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/13.jpg)
We use events to deal with asynchronous tasks
![Page 14: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/14.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } });
![Page 15: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/15.jpg)
Why are we still micromanaging code?
![Page 16: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/16.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } });
![Page 17: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/17.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } });
![Page 18: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/18.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } });
![Page 19: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/19.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } });
![Page 20: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/20.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2 && isAPressed) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } }); !var isAPressed = false; document.addEventListener('keydown', e => { isAPressed = e.keyCode === 65; }, false); !document.addEventListener('keyup', e => { isAPressed = false; }, false);
![Page 21: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/21.jpg)
We still code the how instead of the what
![Page 22: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/22.jpg)
Programming should be more about the what
![Page 23: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/23.jpg)
![Page 24: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/24.jpg)
State is dangerous
![Page 25: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/25.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2 && isAPressed) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } }); !var isAPressed = false; document.addEventListener('keydown', e => { isAPressed = e.keyCode === 65; }, false); !document.addEventListener('keyup', e => { isAPressed = false; }, false);
![Page 26: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/26.jpg)
Event limbo
![Page 27: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/27.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } });
![Page 28: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/28.jpg)
Isn’t that the problem promises try to solve?
![Page 29: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/29.jpg)
var y = f(x); var z = g(y);
fAsync(x).then(...); gAsync(x).then(...);
res = stocks .filter(q => q.symbol == 'FB') .map(q => q.quote) !res.forEach(x => ...
res = stocks //async retrieval .filter(q => q.symbol == 'FB') .map(q => q.quote) !res.subscribe(x => ...
Sync
Sync
Promises
RxJS
![Page 30: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/30.jpg)
Click! … …Click! Click!
![Page 31: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/31.jpg)
Click! , ,Click! Click![ ]
![Page 32: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/32.jpg)
![Page 33: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/33.jpg)
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] .filter(n => n % 2) .map(n => 'item ' + n) .forEach(n => console.log(n)) !// "item 1" // "item 3" // "item 5" // "item 7" // "item 9"
![Page 34: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/34.jpg)
F R P
![Page 35: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/35.jpg)
Final Resting Place
![Page 36: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/36.jpg)
Fantasy Role Playing
![Page 37: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/37.jpg)
Functional Reactive Programming
![Page 38: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/38.jpg)
![Page 39: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/39.jpg)
![Page 40: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/40.jpg)
Deal with values that change over time
![Page 41: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/41.jpg)
![Page 42: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/42.jpg)
RxJS helps us compose asynchronous and event-based programs
![Page 43: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/43.jpg)
var clicks = 0; document.addEventListener('click', function register(e) { if (clicks < 10) { if (e.clientX > innerWidth / 2) { console.log(e.clientX, e.clientY); clicks += 1; } } else { document.removeEventListener('click', register); } });
FilterLimit to 10
Print the coordinates
![Page 44: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/44.jpg)
fromEvent(document, 'click') .filter(c => c.clientX > innerWidth / 2 }) .take(10) .subscribe(c => console.log(c.clientX, c.clientY) })
![Page 45: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/45.jpg)
fromEvent(document, 'click') .filter(c => c.clientX > innerWidth / 2 }) .take(10) .subscribe(c => console.log(c.clientX, c.clientY) })
Create Observable
![Page 46: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/46.jpg)
fromEvent(document, 'click') .filter(c => c.clientX > innerWidth / 2 }) .take(10) .subscribe(c => console.log(c.clientX, c.clientY) })
Create filtered Observablefrom the first one
![Page 47: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/47.jpg)
fromEvent(document, 'click') .filter(c => c.clientX > innerWidth / 2 }) .take(10) .subscribe(c => console.log(c.clientX, c.clientY) })
Create final Observabletaking only first 10 results
![Page 48: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/48.jpg)
fromEvent(document, 'click') .filter(c => c.clientX > innerWidth / 2 }) .take(10) .subscribe(c => console.log(c.clientX, c.clientY) })
Actually kick off computation
![Page 49: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/49.jpg)
Rx.Observable Rx.Observer
![Page 50: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/50.jpg)
Rx.Observer - OnNext() - OnError() - OnComplete()
![Page 51: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/51.jpg)
Obs
erva
ble
Observer pattern
Iterator pattern
![Page 52: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/52.jpg)
// Creates an observable sequence of 5 integers var source = Rx.Observable.range(1, 5) !// Prints out each item var subscription = source.subscribe( x => { console.log('onNext: ' + x) }, e => { console.log('onError: ' + e.message) }, () => { console.log('onCompleted') }) !// => onNext: 1 // => onNext: 2 // => onNext: 3 // => onNext: 4 // => onNext: 5 // => onCompleted
![Page 53: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/53.jpg)
var mousemove = fromEvent(document, 'mousemove'); !var mouseCoords = mousemove.map(e => ({ left: e.clientX, top: e.clientY })) !var mouseSide = mousemove.map(e => (e.clientX > window.innerWidth / 2 ? 'right' : 'left')) !mouseCoords.subscribe(pos => coords.innerHTML = pos.top + 'px ' + pos.left + 'px') mouseSide.subscribe(s => side.innerHTML = s);
![Page 54: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/54.jpg)
// Search Wikipedia for a given term function searchWikipedia(term) { var cleanTerm = global.encodeURIComponent(term); var url = ‘http://en.wikipedia.org/w/api.php...' + cleanTerm + '&callback=JSONPCallback'; return Rx.Observable.getJSONPRequest(url); } !var input = document.querySelector('#searchtext'), results = document.querySelector('#results'); !// Get all distinct key up events from the input and var keyup = fromEvent(input, 'keyup') .map(e => e.target.value) .where(text => text.length > 2) // Longer than 2 chars .throttle(200) // Pause for 200ms .distinctUntilChanged(); // Only if the value has changed
![Page 55: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/55.jpg)
var searcher = keyup .map(text => searchWikipedia(text)) // Search wikipedia .switchLatest() // Ensure no out of order results .where(data => (data.length === 2)); // Where we have data !searcher.subscribe(data => { // Append the results (data[1]) }, error => { // Handle any errors });
![Page 56: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/56.jpg)
![Page 57: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/57.jpg)
// Search Wikipedia for a given term function searchWikipedia(term) { var cleanTerm = global.encodeURIComponent(term); var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=' + cleanTerm + '&callback=JSONPCallback'; return Rx.Observable.getJSONPRequest(url); } !var input = document.querySelector('#searchtext'), results = document.querySelector('#results'); !// Get all distinct key up events from the input and var keyup = fromEvent(input, 'keyup') .map(e => e.target.value) .where(text => text.length > 2) // Longer than 2 chars .throttle(200) // Pause for 200ms .distinctUntilChanged(); // Only if the value has changed
![Page 58: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/58.jpg)
// Search Wikipedia for a given term function searchWikipedia(term) { return fromArray(['JavaScript', 'JavaServer Pages', 'JavaSoft', 'JavaScript library', 'JavaScript Object Notation', 'JavaScript engine', 'JavaScriptCore']); } !var input = document.querySelector('#searchtext'), results = document.querySelector('#results'); !// Get all distinct key up events from the input and var keyup = fromEvent(input, 'keyup') .map(e => e.target.value) .where(text => text.length > 2) // Longer than 2 chars .throttle(200) // Pause for 200ms .distinctUntilChanged(); // Only if the value has changed
![Page 59: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/59.jpg)
fromArray fromCallback fromEvent fromEventPattern fromIterable fromNodeCallback fromPromise
![Page 60: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/60.jpg)
var mouseup = fromEvent(dragTarget, 'mouseup'); var mousemove = fromEvent(document, 'mousemove'); var mousedown = fromEvent(dragTarget, 'mousedown'); !var mousedrag = mousedown.selectMany(md => { var startX = md.clientX + window.scrollX, startY = md.clientY + window.scrollY, startLeft = parseInt(md.target.style.left, 10) || 0, startTop = parseInt(md.target.style.top, 10) || 0; ! // Calculate delta with mousemove until mouseup return mousemove.map(mm => { mm.preventDefault(); ! return { left: startLeft + mm.clientX - startX, top: startTop + mm.clientY - startY }; }).takeUntil(mouseup); }); !subscription = mousedrag.subscribe(pos => { dragTarget.style.top = pos.top + 'px'; dragTarget.style.left = pos.left + 'px'; });
![Page 61: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/61.jpg)
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] .filter(n => n % 2) .map(n => 'item ' + n) .forEach(n => console.log(n)) !// "item 1" // "item 3" // "item 5" // "item 7" // "item 9"
![Page 62: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/62.jpg)
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] .filter(n => n % 2) .map(n => 'item ' + n) .forEach(n => console.log(n)) !// "item 1" // "item 3" // "item 5" // "item 7" // "item 9"
looploop
loop
![Page 63: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/63.jpg)
![Page 64: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/64.jpg)
fromArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) .filter(n => n % 2) .map(n => n * 100) .map(n => 'item ' + n) .subscribe(n => console.log(n))
![Page 65: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/65.jpg)
First Class events Composability Encapsulation
![Page 66: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/66.jpg)
![Page 68: Conquering Time with FRP - GOTO Conferencegotocon.com/dl/...ConqueringTimeWithFunctionalReactiveProgrammi… · Functional Reactive Programming by sergi mansilla ... Shameless linkbaiting.](https://reader036.fdocuments.us/reader036/viewer/2022062602/5ee119cdad6a402d666c1ad3/html5/thumbnails/68.jpg)