Introduction to FRP

Introduction to FRP

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

39faa5e8e938d2fbd92acc2e8ebdf65b?s=128

Stratos Pavlakis

July 21, 2015
Tweet

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/
  55. None
  56. Questions?