Reactive Programming

Alexandra Vargas
@axelav

January 5 2016
Relay42

A Taste

DotJS 2015 talk: 

var a = 5;

var b = a * 10;

console.log(b) //50

b = a * 10;

console.log(b) //60


var updateB = function updateB(a) {
    b = a * 10;
    return b;
}
a = 6;
console.log(b) //50
a = 8;

b = a * 10;

a

5          6            8

                50          60         80

b

 50          60         80

State

updateB(5)

updateB(6)

updateB(8)

time

Events

                50      60      80

b

State

updateB(5)

updateB(6)

updateB(8)

time

   50       60      80

Events

b$

Undefined

5          6         8

a$

time

 50       60      80

Events

b$

.map(a => return 10 * a)
var a$ = Observable.of(5, 6, 8);

//$a.map(function (a) { a * 10 })

var b$ = $a.map(a => { a * 10 }); 

$b.subscribe( b => {
    console.log(b)
});

//50
//60
//80

All future variables specified in the declaration

a$.set(9)
var a$ = Observable.of(5, 6, 8, 9);


var click$ = Observable.fromEvent(document, click);
var a$ = click$.scan(function (acc, ev) { return acc * 10; }, 1);
var b$ = a$.map(a => 10 *a);

A little example

function alexaSpeak(){

    slide1();
    slide2();
    slide3();
    slide4();
    //....
    lastSlide();

    for(var i = 0; i < audience.lenght; i== ){
        audience[i].goGetABeer();
    }
}
var attendand = {
    alcoholLevel : 0,
    gotGetABeer = function () {
        //......
    }
} 

Separation of Concerns

var alexaSpeak = {
    slide$: Observable.concat(
        slide1, slide2, slide3
    )    
} 
var participant = {
    alcoholLevel$: alexaSpeaker$.lastSlide()
    .flatMap(function () {})
    .scan(Accumulate, 0) 
}; 

Example

Goal: small module to get the github account suggestions

 

https://jsbin.com/pirifa/7/edit

Reactive Programming

By Maria Alexandra Vargas Ortega

Reactive Programming

  • 1,609