Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to FRP

Introduction to FRP

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

Stratos Pavlakis

July 21, 2015
Tweet

More Decks by Stratos Pavlakis

Other Decks in Programming

Transcript

  1. Functional Reactive Programming
    in Javascript

    View full-size slide

  2. whoami
    Stratos Pavlakis
    Workable UI Tech Lead
    [email protected]
    th3hunt
    FRP newbie!

    View full-size slide

  3. what’s FRP?

    View full-size slide

  4. let’s begin with

    View full-size slide

  5. http://www.reactivemanifesto.org/
    Responsive Message Driven
    Resilient
    Elastic

    View full-size slide

  6. sweet dreams

    View full-size slide

  7. so better start with

    View full-size slide

  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

    View full-size slide

  9. front end development
    is it synchronous or asynchronous?

    View full-size slide

  10. ● User Input
    ● AJAX
    ● Web Sockets / SSE
    ● Web Workers
    ● Animations
    ● Cross origin frame communication
    ● Updating the DOM
    we deal with

    View full-size slide

  11. ● User Input
    ● AJAX
    ● Web Sockets / SSE
    ● Web Workers
    ● Animations
    ● Cross origin frame communication
    ● Updating the DOM
    most are async!

    View full-size slide

  12. tools we use

    View full-size slide

  13. callbacks
    var el = document.getElementById("my-button");
    el.addEventListener("click", function () {
    console.log(‘my button was clicked’);
    });

    View full-size slide

  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});
    })

    View full-size slide

  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 );
    })

    View full-size slide

  16. problems
    ● callback hell
    ● try / catch (except for generators)
    ● memory leaks
    ● reduced composability

    View full-size slide

  17. event driven programming
    we react to events

    View full-size slide

  18. is reason about event streams
    what we’re really trying to do

    View full-size slide

  19. any number of values
    Array
    over any amount of time
    f(time) / async
    an event stream would be

    View full-size slide

  20. first class citizen of FRP
    observable

    View full-size slide

  21. Observer
    Iterator
    Gang of Four - Design Patterns
    ES6 EventEmitter

    View full-size slide

  22. array VS event

    View full-size slide

  23. array === collection

    View full-size slide

  24. events === collection

    View full-size slide

  25. collections are iterable

    View full-size slide

  26. observable === collection + time

    View full-size slide

  27. observable API
    var subscription = myObservable.subscribe(function (val) {
    console.log(‘Next: %s’, val);
    });

    View full-size slide

  28. from the EventEmitter?
    so… how is that different

    View full-size slide

  29. we know when it’s done
    var subscription = myObservable.subscribe(
    onNext,
    onError,
    onCompleted
    );
    like
    promises

    View full-size slide

  30. we got set operators
    ● map
    ● flatMap
    ● reduce
    ● merge
    ● concat
    ● zip

    View full-size slide

  31. more operators
    ● debounce
    ● buffer
    ● skipUntil
    ● flatMapLatest
    ● combineLatest
    ● switch
    ● retry

    View full-size slide

  32. observables can model
    ● mouse clicks
    ● key presses
    ● scrolling
    ● animations
    ● AJAX Polling, Web Sockets
    ● timers
    ● even… constants

    View full-size slide

  33. operators
    http://rxmarbles.com/

    View full-size slide

  34. distinctUntilChanged

    View full-size slide

  35. example
    please!

    View full-size slide

  36. 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

    View full-size slide

  37. Autocomplete
    yes I know, the classic example

    View full-size slide

  38. requirements
    ● filter queries
    ● throttle requests
    ● retry (overcome network glitches)
    ● avoid duplicate requests
    ● match results to latest query
    ● abort no longer valid requests

    View full-size slide

  39. 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

    View full-size slide

  40. gets even better

    View full-size slide

  41. 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

    View full-size slide

  42. not convinced yet?

    View full-size slide

  43. observable future
    ● TC39 proposal to add to ES7
    ○ https://github.com/zenparsing/es-observable
    ● Angular 2 first class support
    ● ReactJS first class support

    View full-size slide

  44. http://victorsavkin.com/post/108837493941/better-support-for-functional-programming-in

    View full-size slide

  45. Rx in production

    View full-size slide

  46. still...
    ● steep learning curve
    ● old habits die hard
    ● tricky to work with classic MV*
    ● poor/difficult documentation (is getting better)

    View full-size slide

  47. ● Rx.js (port of Reactive Extensions to JS)
    ● Bacon.js
    ● Kefir (faster bacon :)

    View full-size slide

  48. Microsoft Research
    ● A Brief Introduction to ActiveVRML - Conan Elliott
    ● Functional Reactive Animations - Conan Elliott & Paul
    Hudak

    View full-size slide

  49. 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/

    View full-size slide