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 data   callback(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();
});

Knockout.js



bacon.js

Copy of Functional Reactive Programming

By Denis Stoyanov

Copy of Functional Reactive Programming

  • 1,146