Reactive programming is more than a catchy phrase nowadays. More and more complicated web applications require great tools that sustain responsiveness and scalability. Main topic of the presentation is introduction to the world of reactive programming. This presentation puts emphasis on the RxJS library, which is Javascript implementation of the reactive paradigm.

1. sunscrapers.comYour favored tech partner.
Reactive Programming
Kuba Włodarczyk

2. sunscrapers.comYour favored tech partner.
Aplikacje webowe kiedyś

3. sunscrapers.comYour favored tech partner.
Aplikacje webowe dziś

4. sunscrapers.comYour favored tech partner.
Czym jest programowanie reaktywne?
Reactive Programming Manifesto (http://www.reactivemanifesto.org/)
Cztery główne reguły RP:
- Responsive
- Scalable
- Resilent
- Message-driven architecuture

5. sunscrapers.comYour favored tech partner.
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)

6. sunscrapers.comYour favored tech partner.
Droga do SPA: etap 1 - callback

7. sunscrapers.comYour favored tech partner.
Callback hell

8. sunscrapers.comYour favored tech partner.
Droga do SPA: etap 2 - promise

9. sunscrapers.comYour favored tech partner.
Promise hell

10. sunscrapers.comYour favored tech partner.
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)

11. sunscrapers.comYour favored tech partner.
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

12. sunscrapers.comYour favored tech partner.
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)
);

13. sunscrapers.comYour favored tech partner.
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

14. sunscrapers.comYour favored tech partner.
Operacje na strumieniach
● Filter
● Map
● Reduce
● Merge
● Zip
● flatMap
● debounce
● …
---> http://rxmarbles.com/

15. sunscrapers.comYour favored tech partner.
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; });

16. sunscrapers.comYour favored tech partner.
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);
}
});
}

17. sunscrapers.comYour favored tech partner.
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)

18. sunscrapers.comYour favored tech partner.
Pytania?
Dziękuję za uwagę