Introduction to FRP

An introduction to Functional Reactive Programming - presented at 9th GreeceJS meetup

Transcript

1. Functional Reactive Programming in Javascript
2. whoami Stratos Pavlakis Workable UI Tech Lead pavlakis@workable.com th3hunt FRP newbie!
3. what’s FRP?
4. let’s begin with
5. http://www.reactivemanifesto.org/ Responsive Message Driven Resilient Elastic
6. sweet dreams
7. so better start with
8. reactive paradigm var b = 1, c = 1; var a = b + c; // a == 2 b = 10; • // a == ? • // imperative paradigm => a == 2 • // reactive paradigm => a == 11
9. front end development is it synchronous or asynchronous?
10. • User Input • AJAX • Web Sockets / SSE • Web Workers • Animations • Cross origin frame communication • Updating the DOM we deal with
11. • User Input • AJAX • Web Sockets / SSE • Web Workers • Animations • Cross origin frame communication • Updating the DOM most are async!
12. tools we use
13. callbacks var el = document.getElementById("my-button"); el.addEventListener("click", function () { console.log(‘my button was clicked’); });
14. 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}); })
15. 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 ); })
16. problems • callback hell • try / catch (except for generators) • memory leaks • reduced composability
17. event driven programming we react to events
18. is reason about event streams what we’re really trying to do
19. any number of values Array over any amount of time f(time) / async an event stream would be
20. first class citizen of FRP observable
21. Observer Iterator Gang of Four - Design Patterns ES6 EventEmitter
22. array VS event
23. array === collection
24. events === collection
25. collections are iterable
26. observable === collection + time
27. observable API var subscription = myObservable.subscribe(function (val) { console.log(‘Next: %s’, val); });
28. from the EventEmitter? so… how is that different
29. we know when it’s done var subscription = myObservable.subscribe( onNext, onError, onCompleted ); like promises
30. we got set operators • map • flatMap • reduce • merge • concat • zip
31. more operators • debounce • buffer • skipUntil • flatMapLatest • combineLatest • switch • retry
32. observables can model • mouse clicks • key presses • scrolling • animations • AJAX Polling, Web Sockets • timers • even… constants
33. operators http://rxmarbles.com/
34. filter
35. debounce
36. distinctUntilChanged
37. takeUntil
38. example please!
39. 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
40. Autocomplete yes I know, the classic example
41. requirements • filter queries • throttle requests • retry (overcome network glitches) • avoid duplicate requests • match results to latest query • abort no longer valid requests
42. keyup => results var 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
43. gets even better
44. 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
45. not convinced yet?
46. observable future • TC39 proposal to add to ES7 ◦ https://github.com/zenparsing/es-observable • Angular 2 first class support • ReactJS first class support
47. http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in
48. Rx in production
49. still... • steep learning curve • old habits die hard • tricky to work with classic MV* • poor/difficult documentation (is getting better)
50. libraries
51. • Rx.js (port of Reactive Extensions to JS) • Bacon.js • Kefir (faster bacon :)
52. origins
53. Microsoft Research • A Brief Introduction to ActiveVRML - Conan Elliott • Functional Reactive Animations - Conan Elliott & Paul Hudak
54. 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/
56. Questions?