FUNCTIONAL REACTIVE PROGRAMMING

with Javascript

Mateus Chagas

@matchs

The Callback Hell

Lack of good event processing abstraction

Events are not composable

Event handling is error prone

FRP

"Functional reactive programming (FRP) supports elegant programming of dynamic and reactive systems by providing first-class, composable abstractions for behaviors (time-varying values) and events (stream of time values)"

Bacon.js

RxJS
Flapjax
Shafty
Javelin

Time-varying Values

Behaviors/Properties/Signals

As Usual

B = 1C = 2
A = B + C
//A = 3B = 2//A = 3

With FRP

B = 1C = 2A = B + C//A = 3
B = 2//A = 4

Event Streams

With jQuery

$('#some-input').bind('keydown', function(e){
    if(e.keyCode == 13 && $(this).value().length > 3){//The ENTER key        $.ajax({            url:'/search',            method:'get'            data:{                query:$(this).value()            },            success: function(data){                //Do something with the response            }        });    }
});

What if the search could also be performed clicking on a button?

function doSearch(){
    if($("#search-input").value() > 3){
        //The search ajax
    }}
$("#search-button").bind('click', function(e){
    doSearch();
});
$("#search-input").bind('keyup', function(e){
    if(e.keyCode == 13){
        doSearch();    }
});

Merge

Filter

Map

Other Methods

send

hold

constant

skip-first

once

lift

delay

snapshot

...

What does that help me with?

User Input

Asyncronous operations

JusBrasil?

Components

Example

Questions???

References

http://conal.net/papers/icfp97/

http://conal.net/papers/simply-reactive/old-tech-report-superceded.pdf

http://sean.voisen.org/blog/2013/09/intro-to-functional-reactive-programming/
http://www.youtube.com/watch?v=nket0K1RXU4
http://www.haskell.org/haskellwiki/Functional_Reactive_Programming
https://github.com/Reactive-Extensions/RxJS
https://github.com/baconjs/bacon.js
http://stackoverflow.com/questions/1028250/what-is-functional-reactive-programming/1030631#1030631
https://github.com/Cicayda/yolk-examples/tree/master/src/yolk_examples/client