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 = 2A = B + C//A = 3B = 2//A = 3
With FRP
B = 1C = 2A = B + C//A = 3B = 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
Functional Reactive Programming
By Mateus Chagas Sousa
