Functional Reactive
Programming
@noppanit
History
Reactive Manifesto
How long do you think people will wait for a page to load?
2 seconds
Wait?
Really?
250 milliseconds
A bit more of the fundamental
asynchronous
function fetchData(callback) {// get me datacallback(data);}fetchData(function(data) {// do something with the data});
event driven programming
React to events
<input type="button" id="submitButton" value="Submit" />jQuery('#submitButton').click(function() {// do some funky stuff});
Many ways to implement
IEnumerable
interface IEnumerable<T> {IEnumerator<T> GetEnumerator();}interface IEnumerator<T> {bool MoveNext();T GetCurrent();}
What's wrong with this?
It's pull based
function fetchData() {var products = getProducts();for(var index = 0; index < products.size(); index++) {// populate data// data 1// data 2// data 3// stuck}}
IObservable
interface IObservable<T> {void Subscribe(IObserver<T> observer);}
interface IObserver<T> {void OnNext(T value);void OnError();void OnCompleted();}
Not interested?
Let's look at some code
The need to Go reactive
simplest example
reactive programming
A = X + Y
> X = 10;10> Y = 10;10> A = X + Y;20> X = 20;> A20
Event Streams
Example
X = 22
Y = 33
A = X+Y =
function setA(){ // A=X+Y as integers
var A = parseInt($('#X').text()) + parseInt($('#Y').text());
$('#A').text( A );
}
setA();
$('#X,#Y').css('cursor','pointer').click(function(){
// by reaction to a click: updates A and X or Y
var obj = $(this);
obj.text(parseInt(obj.text())+1);
setA();
});