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

Functional Reactive Programming in Bacon.js

Functional Reactive Programming in Bacon.js

Lightning talk on Functional Reactive Programming in Bacon.js: a short overview of some FRP concepts with some bacon.js code samples.

Tom Kruijsen

January 14, 2016
Tweet

More Decks by Tom Kruijsen

Other Decks in Programming

Transcript

  1. Functional reactive
    programming with
    Bacon.js
    Tom Kruijsen – UtrechtJS
    Lightning Talk 2016-01-14

    View Slide

  2. Tom
    @tomkr
    Ruby/JS/Swift

    View Slide

  3. Brightin

    View Slide

  4. View Slide

  5. View Slide

  6. Functional Reactive
    Programming

    View Slide

  7. Event Streams as first
    class citizens

    View Slide

  8. Time

    View Slide

  9. User input

    View Slide

  10. AJAX

    View Slide

  11. Websockets

    View Slide

  12. 1 2 3 4
    Event stream

    View Slide

  13. 1 2 3 4
    map()
    3 6 9 12
    stream.map(x => x * 3)

    View Slide

  14. 1 3
    merge()
    stream1.merge(stream2)
    2 4
    1 2 3 4

    View Slide

  15. 1 3
    concat()
    stream1.concat(stream2)
    2 4
    1 3 4

    View Slide

  16. var up = $('#up').asEventStream('click');
    var down = $('#down').asEventStream('click');
    var counter =
    // map up to 1, down to -1
    up.map(1).merge(down.map(-1))
    // accumulate sum
    .scan(0, function(x,y) { return x + y });

    View Slide

  17. $('#once').asEventStream('click')
    .map('Clicked once.’).first().log();
    $('#twice').asEventStream('click')
    .map('Clicked.').take(2).log();
    var first = $(‘#first’).asEventStream('click')
    .map('First.').first();
    var second = $(‘#second’).asEventStream('click')
    .map('Second.').first();
    first.concat(second).log();

    View Slide

  18. Properties

    View Slide

  19. Side effects

    View Slide

  20. var firstname = $("#firstname").asEventStream("keyup")
    .map(function(event) {
    return $(event.target).val();
    }).toProperty("");
    var lastname = $("#lastname").asEventStream("keyup")
    .map(function(event) {
    return $(event.target).val();
    }).toProperty("");
    function nonEmpty(x) { return x.length > 0 };
    var valid = firstname.map(nonEmpty).and(lastname.map(nonEmpty));
    valid.onValue(function(enabled) {
    $("#submit").attr("disabled", !enabled);
    });

    View Slide

  21. AJAX

    View Slide

  22. res
    AJAX

    View Slide

  23. 1 2 3
    map() AJAX?
    res
    res
    res

    View Slide

  24. 1 3
    flatMap() AJAX
    res
    res
    res
    2
    res
    res
    res

    View Slide

  25. 1 2 3
    flatMap() AJAX!!!
    res
    res
    res
    res
    res
    res

    View Slide

  26. 1 2 3
    flatMapLatest()
    res
    res
    res
    res
    res

    View Slide

  27. baconjs.github.io

    View Slide

  28. npm install baconjs
    bower install bacon

    View Slide

  29. Functional reactive
    programming with
    Bacon.js
    Tom Kruijsen – UtrechtJS
    Lightning Talk 2016-01-14

    View Slide