Podczas prelekcji dowiesz się o co chodzi z RxJS, do czego jest ono przydatne Angularowi. Celem wystąpienia jest zaprezentowanie tworzenia oprogramowania zgodnie z paradygmatem programowania reaktywnego.

1. RxJS okiem
do wiadczonego inżyniera
Podczas prelekcji dowiesz się o co chodzi z RxJS, do czego jest ono przydatne
Angularowi. Celem wystąpienia jest zaprezentowanie tworzenia oprogramowania
zgodnie z paradygmatem programowania reaktywnego.
Piotr Kowalski
1 / 55@piecioshka

2. M wię po chachłacku
2 / 55@piecioshka

3. "Uzułem się w wygodnie"
3 / 55@piecioshka

4. "Smędzi mnie i muszę się czego napi "
4 / 55@piecioshka

5. Asynchroniczno
5 / 55@piecioshka

6. Asynchroniczno - co my tu mamy....
6 / 55@piecioshka

7. Asynchroniczno - co my tu mamy....
Callback (ES1)
7 / 55@piecioshka

8. Asynchroniczno - co my tu mamy....
Callback (ES1)
Promise (ES2015)
8 / 55@piecioshka

9. Asynchroniczno - co my tu mamy....
Callback (ES1)
Promise (ES2015)
Generators (ES2015)
9 / 55@piecioshka

10. Asynchroniczno - co my tu mamy....
Callback (ES1)
Promise (ES2015)
Generators (ES2015)
async / await (ES2017)
10 / 55@piecioshka

11. Asynchroniczno - co my tu mamy....
Callback (ES1)
Promise (ES2015)
Generators (ES2015)
async / await (ES2017)
Observable (Stage 1) ✨
11 / 55@piecioshka

12. Callback (ES1)
const callback = () => {
// ...
};
const delay = 1234;
setTimeout(callback, delay);
12 / 55@piecioshka

13. Promise (ES2015)
const URL = '//jsonplaceholder.typicode.com/posts';
function request(url) {
return fetch(url).then(res => res.json());
}
request(URL)
.then((photos) => {
console.log(photos);
});
13 / 55@piecioshka

14. Generators (ES2015)
const URL = '//jsonplaceholder.typicode.com/posts';
function request(url) {
return fetch(url).then(res => res.text())
.then(res => program.next(res)); // WTF?
}
function * main() {
let response = yield request(URL);
console.log('response', JSON.parse(response));
}
const program = main(); // WTF?
program.next(); // WTF?
14 / 55@piecioshka

15. Generators (ES2015) - wyeliminowane WTF-y
const URL1 = '//jsonplaceholder.typicode.com/posts';
const URL2 = '//jsonplaceholder.typicode.com/photos';
function request(url) {
return fetch(url).then(res => res.text())
}
function * main() {
let response1 = yield request(URL1);
console.log('posts', JSON.parse(response1));
let response2 = yield request(URL2);
console.log('photos', JSON.parse(response2));
}
function runGenerator(generatorConstructor) {
let generator = generatorConstructor();
(function next(data) {
let step = generator.next(data);
if (step.done) return;
step.value.then(next);
})(null);
}
runGenerator(main);
15 / 55@piecioshka

16. async / await (ES2017)
const URL1 = '//jsonplaceholder.typicode.com/posts';
const URL2 = '//jsonplaceholder.typicode.com/photos';
async function request(url) {
const response = await fetch(url);
return await response.json();
}
async function main() {
const posts = await request(URL1);
console.log('posts', posts);
const photos = await request(URL2);
console.log('photos', photos);
}
main();
16 / 55@piecioshka

17. Observable (Stage 1) ✨
const URL = '//jsonplaceholder.typicode.com/posts';
function request(url, observer) {
fetch(url)
.then(res => res.json())
.then(res => observer.next(res))
.catch(err => observer.error(err))
.then(() => observer.complete());
}
Rx.Observable // WARNING: vendor
.create(obs => request(URL, obs))
.subscribe(
console.log.bind(console, 'success'),
console.log.bind(console, 'error'),
console.log.bind(console, 'complete')
);
17 / 55@piecioshka

18. Wzorce projektowe
18 / 55@piecioshka

19. Wzorzec Observer
19 / 55@piecioshka

20. Wzorzec Observer
Software Design Pattern
20 / 55@piecioshka

21. Wzorzec Observer
Software Design Pattern
Podmioty: Subject, Observers
21 / 55@piecioshka

22. Wzorzec Observer : Przykład
// Observer pattern
const subject = document;
const observer = () => {
console.log('from observer');
};
subject.addEventListener('click', observer);
22 / 55@piecioshka

23. Biblioteki?
npm/backbone (Backbone.Events)
npm/event-emitter
npm/super-event-emitter
oraz następujące, kt rych nie sprawdzałem:
npm/eventemitter2
npm/eventemitter3
npm/sparkles
Dlaczego napisałem swoją wersję?
23 / 55@piecioshka

24. Wzorzec PubSub
24 / 55@piecioshka

25. Wzorzec PubSub
Messaging Pattern
25 / 55@piecioshka

26. Wzorzec PubSub
Messaging Pattern
Podmioty: Publisher, Subscribers
26 / 55@piecioshka

27. Wzorzec PubSub : Przykład
// Publish-subscribe pattern
class DOMPublisher {
constructor($element, eventName = 'mousemove') {
this.subscribers = [];
$element.addEventListener(eventName, (evt) => this.publish(evt));
}
publish(data) {
this.subscribers.forEach(item => item(data));
}
subscribe(fn) {
this.subscribers.push(fn);
}
}
const publisher = new DOMPublisher(document, 'click');
const subscriber = () => {
console.log('from subscriber');
};
publisher.subscribe(subscriber);
27 / 55@piecioshka

28. R żnice?
28 / 55@piecioshka

29. RxJS
29 / 55@piecioshka

30. Observable vs Subject
30 / 55@piecioshka

31. 31 / 55@piecioshka

32. 32 / 55@piecioshka

33. 33 / 55@piecioshka

34. 34 / 55@piecioshka

35. 35 / 55@piecioshka

36. 36 / 55@piecioshka

37. 37 / 55@piecioshka

38. https://www.meetup.com/Angular-
Warsaw/events/242530230/
38 / 55@piecioshka

39. Pytania z Meetup.com
1. ⛔ Dlaczego zesp ł Angulara zdecydował się na wprowadzenie RxJS, jako jednego z gł wnych graczy tego
frameworka?
2. ✅ Czy można dobrze korzysta z Angulara bez znajomo ci RxJS?
3. ✅ Top 10 funkcji RxJS niezbędnych do poznania na start.
4. ⛔ Jakie są przypadki użycia tej biblioteki?
5. ✅ Czy w przypadku pojedynczego wywołania REST-owego API serwera (w odniesieniu do Angulara)
zwracającego prostego JSON-a, lepiej skorzysta z obiektu Observable czy zamieni to na
Promise , jaką korzy daje nam Observable w tym przypadku?
6. ⛔ Ile czasu zajęło Ci / Twojemu zespołowi opanowanie RxJS na poziomie niezbędnym do swobodnej
pracy?
7. ⛔ W jakich przypadkach polecasz używanie RxJS - czy w każdym projekcie ma to sens?
8. ⛔ Jak poprawnie testowa logikę aplikacji opartej na RxJS?
39 / 55@piecioshka

40. Pytanie 1
Czy można dobrze
korzysta z Angulara bez
znajomo ci RxJS?
40 / 55@piecioshka

41. Pytanie 1 Czy można dobrze korzysta z
Angulara bez znajomo ci RxJS?
41 / 55@piecioshka

42. Pytanie 1 Czy można dobrze korzysta z
Angulara bez znajomo ci RxJS?
Router, Forms, Komunikacja z serwerem.
42 / 55@piecioshka

43. Pytanie 1 Czy można dobrze korzysta z
Angulara bez znajomo ci RxJS?
Router, Forms, Komunikacja z serwerem.
Łatwe?
43 / 55@piecioshka

44. Pytanie 1 Czy można dobrze korzysta z
Angulara bez znajomo ci RxJS?
Router, Forms, Komunikacja z serwerem.
Łatwe?
A co z Race Condition
44 / 55@piecioshka

45. Race Condition : Rozwiązanie
switchMap albo unsubscribe
Zobacz: github.com/piecioshka/angular-
rxjs-race-condition-problem
45 / 55@piecioshka

46. Pytanie 2
Top 10 funkcji RxJS
niezbędnych do poznania
na start.
46 / 55@piecioshka

47. Pytanie 2 Top 10 funkcji RxJS na start
1. rxjs/observable/from
2. rxjs/observable/fromEvent
3. rxjs/observable/create
4. rxjs/observable/combineLatest
5. rxjs/operator/do
6. rxjs/operator/concat
7. rxjs/operator/map
8. rxjs/operator/filter
9. rxjs/operator/concatMap
10. rxjs/operator/finally
47 / 55@piecioshka

48. Pytanie 3
Czy w przypadku pojedynczego wywołania REST-
owego API serwera (w odniesieniu do Angulara)
zwracającego prostego JSON-a, lepiej skorzysta
z obiektu Observable czy zamieni to na
Promise , jaką korzy daje nam
Observable w tym przypadku?
48 / 55@piecioshka

49. Pytanie 3 Czy zamieniłby Observable w
Promise dla zapyta HTTP?
Nie.
Polimorfizm
Operator retry
49 / 55@piecioshka

50. Hint 1
Obsługa błęd w HTTP?
50 / 55@piecioshka

51. Hint 1 Obsługa błęd w HTTP?
@Injectable()
export class HttpInterceptor extends Http {
constructor(
backend: XHRBackend,
options: RequestOptions,
public http: Http,
) {
super(backend, options)
}
public request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
return super.request(url, options)
.catch(this.handleError)
}
public handleError = (error: Response) => {
// Do messaging and error handling here
// - inform error collector
// - display message to user
return Observable.throw(response.message)
}
}
51 / 55@piecioshka

52. Hint 2
Debugging
52 / 55@piecioshka

53. Hint 2 Debugging z użyciem rxjs-spy
import { spy } from 'rxjs-spy';
import 'rxjs-spy/add/operator/tag';
// ...
fetchSomething() {
return this.http.get(url)
.tag('downloading completed')
}
// ...
// in DevTools type:
rxSpy.show();
53 / 55@piecioshka

54. Thanks
54 / 55@piecioshka

55. Thanks
20 min
55 / 55@piecioshka