![Page 1: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/1.jpg)
Functional Reactive Programming
in Javascript
![Page 3: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/3.jpg)
what’s FRP?
![Page 4: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/4.jpg)
let’s begin with
![Page 5: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/5.jpg)
http://www.reactivemanifesto.org/
Responsive Message Driven
ResilientElastic
![Page 6: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/6.jpg)
sweet dreams
![Page 7: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/7.jpg)
so better start with
![Page 8: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/8.jpg)
reactive paradigmvar b = 1, c = 1;
var a = b + c; // a == 2
b = 10;
● // a == ?● // imperative paradigm => a == 2● // reactive paradigm => a == 11
![Page 9: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/9.jpg)
front end developmentis it synchronous or asynchronous?
![Page 10: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/10.jpg)
● User Input● AJAX● Web Sockets / SSE● Web Workers● Animations● Cross origin frame communication● Updating the DOM
we deal with
![Page 11: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/11.jpg)
● User Input● AJAX● Web Sockets / SSE● Web Workers● Animations● Cross origin frame communication● Updating the DOM
most are async!
![Page 12: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/12.jpg)
tools we use
![Page 13: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/13.jpg)
callbacks
var el = document.getElementById("my-button");
el.addEventListener("click", function () {
console.log(‘my button was clicked’);
});
![Page 14: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/14.jpg)
promises$http(endpoint1)
.get({q: ‘frp’})
.then(function (data) {
console.log(‘We got data back from ajax %s’, data);
})
.then(function (data) {
return $http(endpoint2).get({id: data.id});
})
![Page 15: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/15.jpg)
generators in ES7
async(function main() {
var result1 = await request( "http://endpoint.1" );
var data = JSON.parse( result1 );
var result2 = await request( "http://endpoint.2?id=" + data.id );
var resp = JSON.parse( result2 );
console.log( "Value: " + resp.value );
})
![Page 16: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/16.jpg)
problems● callback hell● try / catch (except for generators)● memory leaks● reduced composability
![Page 17: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/17.jpg)
event driven programmingwe react to events
![Page 18: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/18.jpg)
is reason about event streams
what we’re really trying to do
![Page 19: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/19.jpg)
any number of valuesArray
over any amount of timef(time) / async
an event stream would be
![Page 20: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/20.jpg)
first class citizen of FRP
observable
![Page 21: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/21.jpg)
ObserverIterator
Gang of Four - Design Patterns
ES6 EventEmitter
![Page 22: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/22.jpg)
array VS event
![Page 23: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/23.jpg)
array === collection
![Page 24: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/24.jpg)
events === collection
![Page 25: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/25.jpg)
collections are iterable
![Page 26: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/26.jpg)
observable === collection + time
![Page 27: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/27.jpg)
observable API
var subscription = myObservable.subscribe(function (val) {
console.log(‘Next: %s’, val);
});
![Page 28: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/28.jpg)
from the EventEmitter?
so… how is that different
![Page 29: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/29.jpg)
we know when it’s donevar subscription = myObservable.subscribe(
onNext,
onError,
onCompleted
);
like promises
![Page 30: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/30.jpg)
we got set operators● map● flatMap● reduce● merge● concat● zip
![Page 31: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/31.jpg)
more operators● debounce● buffer● skipUntil● flatMapLatest● combineLatest● switch● retry
![Page 32: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/32.jpg)
observables can model● mouse clicks● key presses● scrolling● animations● AJAX Polling, Web Sockets● timers● even… constants
![Page 33: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/33.jpg)
operatorshttp://rxmarbles.com/
![Page 34: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/34.jpg)
filter
![Page 35: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/35.jpg)
debounce
![Page 36: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/36.jpg)
distinctUntilChanged
![Page 37: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/37.jpg)
takeUntil
![Page 38: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/38.jpg)
exampleplease!
![Page 39: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/39.jpg)
mousedown.flatMap((md) => {
var startX = md.offsetX, startY = md.offsetY;
return mousemove.map((mm) => {
return {
left: mm.clientX - startX,
top: mm.clientY - startY
};
}).takeUntil(mouseup);
}).subscribe((pos) => {
dragTarget.style.top = pos.top + 'px';
dragTarget.style.left = pos.left + 'px';
});
drag & drop
![Page 40: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/40.jpg)
Autocompleteyes I know, the classic example
![Page 41: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/41.jpg)
requirements● filter queries● throttle requests● retry (overcome network glitches)● avoid duplicate requests● match results to latest query● abort no longer valid requests
![Page 42: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/42.jpg)
keyup => resultsvar keyPress = $('#search').keyupAsObservable();
.keyPress.map((ev) => { return ev.target.value; })
.filter((text) => { return text.length > 3; })
.debounce(500)
.distinctUntilChanged()
.flatMapLatest(search.retry(3).takeUntil(keyPress))
.map((d) => { return d.response[1]; })
.subscribe(showResults, showError);
throttling
no duplicate requests
filtering
match/abort
response/results
![Page 43: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/43.jpg)
gets even better
![Page 44: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/44.jpg)
things we can do
● cancel (can’t do with Promises)● be lazy until a subscriber subscribes (cold)● setup datasource on first subscription● teardown datasource on disposal
![Page 45: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/45.jpg)
not convinced yet?
![Page 46: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/46.jpg)
observable future● TC39 proposal to add to ES7
○ https://github.com/zenparsing/es-observable
● Angular 2 first class support● ReactJS first class support
![Page 47: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/47.jpg)
http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in
![Page 48: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/48.jpg)
Rx in production
![Page 49: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/49.jpg)
still...● steep learning curve● old habits die hard● tricky to work with classic MV*● poor/difficult documentation (is getting better)
![Page 50: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/50.jpg)
libraries
![Page 51: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/51.jpg)
● Rx.js (port of Reactive Extensions to JS)● Bacon.js● Kefir (faster bacon :)
![Page 52: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/52.jpg)
origins
![Page 53: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/53.jpg)
Microsoft Research
● A Brief Introduction to ActiveVRML - Conan Elliott● Functional Reactive Animations - Conan Elliott & Paul
Hudak
![Page 54: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/54.jpg)
resources● Fran Tutorial - http://conal.net/fran/tutorial.htm● Simply Reactive - http://conal.net/papers/simply-reactive/● Reactive Extensions - https://github.com/Reactive-Extensions/RxJS● BaconJS - https://baconjs.github.io/● Async JavaScript with Reactive Extensions (Jafar Husain)
○ https://www.youtube.com/watch?v=XRYN2xt11Ek● RxJS at Modern Web UI (Ben Lesh)
○ https://www.youtube.com/watch?v=yk_6eU3Hcwo● http://www.slideshare.net/stefanmayer13/functional-reactive-programming-with-rxjs● https://gist.github.com/staltz/868e7e9bc2a7b8c1f754● RxJSKoans - https://rxkoans.codeplex.com/● RxMarbles - http://rxmarbles.com/● Reactive programming and MVC (Aaron Stacy)
○ http://aaronstacy.com/writings/reactive-programming-and-mvc/
![Page 55: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/55.jpg)
![Page 56: in Javascript - Meetup · 2015-06-25 · User Input AJAX Web Sockets / SSE Web Workers Animations Cross origin frame communication Updating the DOM most are async!](https://reader034.vdocument.in/reader034/viewer/2022042316/5f04fedc7e708231d410bd07/html5/thumbnails/56.jpg)
Questions?