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.

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