reactive programming

sunscrapers.comYour favored tech partner.

Reactive ProgrammingKuba Włodarczyk


Aplikacje webowe kiedyś


Aplikacje webowe dziś


Czym jest programowanie reaktywne?

Reactive Programming Manifesto (http://www.reactivemanifesto.org/)

Cztery główne reguły RP:

- Responsive- Scalable- Resilent- Message-driven architecuture

http://www.reactivemanifesto.org/


SPA (Single Page Application)

Aplikacja w przeglądarce • strona pobierana raz • mnóstwo logiki po stronie klienta • strona nie przeładowywuje się • dane (JSON, asynch, PUSH)


Droga do SPA: etap 1 - callback


Callback hell


Droga do SPA: etap 2 - promise


Promise hell


Observable na ratunek - Rx__

● Implementacje w wielu językach (JavaScript, Python, .Net, Java, Scala, Haskell, Closure, …)

● Duża społeczność i obszerne dokumentacje

● Używane przez dużych graczy na rynku (Netflix)


RxJS w praktyce

Wszystko w naszej aplikacji jest strumieniem

Sposób tworzenia strumienia:- Z eventów (Event)- Z NodeCallback- Z tablicy (Array)- Bezpośrednio: Observable.create


RxJS w praktycelet observable = Observable.create((observer) =>

// some async operations

observer.onNext('hello'));

// or observer.onError('Error occurs'));

// or observer.onComplete('Stream ends’));

observable.subscribe((value) => console.log(value)(err) => console.log(err));


RxJS w praktyce // event let input = $('input');

Observable.fromEvent(input, 'keyup') .subscribe(() => console.log('keyup!'));

input.trigger('keyup'); // logs "keyup!"

input.trigger('keyup'); // logs "keyup!"

// array Observable.fromArray([1, 2, 3, 4, 5]) .subscribe(x => console.log(x)); // 1, 2, 3, 4, 5


Operacje na strumieniach

● Filter● Map● Reduce● Merge● Zip● flatMap● debounce● …

---> http://rxmarbles.com/


Przykład: debouncer

var q = document.querySelector('#query');

var observable = Rx.Observable.fromEvent(q, 'keyup')

.debounce(300)

.map(function (ev) { return ev.target.value; })

.where(function (text) { return text.length >= 3; })

.distinctUntilChanged()

.map(searchFor)

.switch()

.where(function (obj) { return obj !== undefined; });


Przykład: debouncerfunction searchFor(text) {

var xhr = new XMLHttpRequest();

xhr.open('GET', apibaseUrl + '?q=' + text, true);

xhr.send();

return Rx.Observable.fromEvent(xhr, 'load').map(function (ev) {

var request = ev.currentTarget;

if (request.status === 200) {

var response = request.responseText;

return JSON.parse(response);

}

});

}


Wnioski

- Potężne narzędzie do pisania asynchronicznego kodu w różnych językach

- Rozwiązuje wiele problemów związanych z zarządzaniem zasobami i zarządzaniem błędami

- Wspiera przy tworzeniu modularnego kodu

- Nacisk na stosowanie we współczesnych i przyszłych frameworkach SPA ( np. React i Angular2)


Pytania?

Dziękuję za uwagę

reactive programming

Internet