Reactive programming

sunscrapers.comYour favored tech partner.
Reactive Programming
Kuba 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

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 praktyce
let 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: debouncer
function 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

More Related Content

Viewers also liked (20)

Similar to Reactive programming (6)

Reactive programming

Editor's Notes