Reactive frontends with RxJS and Angular

Reactive Frontends with RxJS and Angular
Sergi Almar
@sergialmar
1

Unless otherwise indicated, these slides are © 2013-2016 Pivotal Software, Inc. and licensed under a Creative Commons
Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/
Reactive efforts in Spring
2
Spring
framework
Spring
Boot
Project
Reactor
Spring
Security
Spring
Data
Spring
Cloud
Spring
Integration
…

Agenda
3
• RxJS
• Obervables
• Operators
• Combining observables
• Error handling
• Angular
• Managing subscriptions
• HttpClient
• Reactive Forms
• WebSockets /SSE

Attribution-NonCommercial license: http://creativecommons.org/licenses/by-nc/3.0/ 4

Language support
5

Async in web apps
6
• DOM Event (0-N values)
• AJAX (1 value)
• WebSocket (0-N values)
• Server Sent Event (0-N values)
• Animation (0-N values)

Reactive programming
7
Pros
• Clean and understandable code
• Focus on the result
• Complex operations out of the box
• Abort processing of data when you don’t need it (cancel)
Cons
• More difficult to debug
• Learning curve

Observable.of(...)
Factory Methods
Observable.from(...)
Observable.fromEvent(...)
Observable.interval(...)
...

Creating an Observable
const welcome$ = Observable.create((subscriber) => {
subscriber.next('Welcome');
subscriber.next('to');
subscriber.next('S1P');
subscriber.next('!');
subscriber.complete();
});

Observer
subscribe
notification

Observer
11
export interface Observer<T> {
closed?: boolean;
next: (value: T) => void;
error: (err: any) => void;
complete: () => void;
}
var observer = {
next: x => console.log('Next value: ' + x),
error: err => console.error('Error: ' + err),
complete: () => console.log('Complete notification')
};

Observer
12
Observable.interval(1000) Producer
Consumer.subscribe(val => console.log(val))
.operator(...)
.operator(...)
.operator(...)
Pipeline

Unsubscribe
13
const mouseMove$ = Observable.fromEvent(document, 'mousemove');
const subscription = mouseMove$.subscribe(console.log);
…
subscription.unsubscribe();
- Release resources allocated by the observable
- No more events sent to the registered observer

Operators
14
create
fromEvent
range
…
Creation
map
scan
switchMap
…
Transformation
debounce
filter
take
…
Filtering
concat
merge
startWith
…
Combination
catch
retry
retryWhen
Error Handling
share
publish
multicast
Multicast
do / tap
delay
toPromise
…
Utility
every
defaultIfEmpty
Conditional

Lettable Operators
15
<T, R>(source: Observable<T>) => Observable<R>
Observable.interval(1000)
.pipe(
filter(x => x % 2 === 0),
map(x => x * x),
take(5)
)
.subscribe(x => console.log(x))

Combining Observables: merge
17
const spring$ =
Observable.of('spring', 'spring-boot', ‘spring-data');
const cloud$ =
Observable.of('cloud-native', 'cloudfoundry', 'bosh');
Observable.merge(spring$, cloud$).subscribe(console.log);

Spring
Spring
spring$
cloud$
Spring
Boot
Spring
Boot
Cloud
Native
Cloud
Native
Spring
Data
Spring
Data
Cloud
Foundry
Cloud
Foundry
Bosh
Bosh
merge(spring$, cloud$)

switchMap
19
Observable.of(1, 2, 3)
.pipe(
switchMap(num => Observable.of(num, num * num))
).subscribe(console.log);
1
switchMap(num => Observable.of(num, num * num)
1 1
2
2 4
3
3 9

forkJoin
20
1
const users$ = Observable.forkJoin(
findUser(1),
findUser(2),
findUser(3)
);
...
users$.subscribe(console.log);
2
3
fork
join

fork
forkJoin
21
1
findUser(1),
findUser(2),
findUser(3)
);
2 3
join

join
forkJoin
22
1
findUser(1),
findUser(2),
findUser(3)
);
fork 1 2 3
2 3

join
forkJoin
23
1
findUser(1),
findUser(2),
findUser(3)
);
fork
2 3[ ], ,

Errors
24
• When an error occurs the observable is cancelled and no data passes though
• Errors are propagated to the downstream observers
Observable.range(1, 20)
.pipe(
map(num => {
if (num === 13) {
throw new Error('I don't like 13');
}
return num;
})
)

Remember the Observer?
25
export interface Observer<T> {
closed?: boolean;
next: (value: T) => void;
error: (err: any) => void;
complete: () => void;
}

Errors
26
• When an error occurs the observable is cancelled and no data passes though
• Errors are propagated to the downstream observers
.pipe(
map(num => {
if (num === 13) {
}
return num;
})
).subscribe(
num => console.log('Got num ' + num),
err => console.log('Upssss...' + err));
map
1
1
13
X
…
…

catchError
27
.pipe(
map(num => {
if (num === 13) {
}
return num;
}),
catchError(err => Observable.range(100, 3))
)
.subscribe(console.log);
Output:
1
2
3
4
5
6
7
8
9
10
11
12
100
111
112

Angular
28
RxJS can be used with any framework
Angular has reactivity at its core, leveraging RxJS
- HttpClient
- Reactive Forms
- Router
- Component communication

Unsubscribing
29
@Component({
selector: 'app-mouse-position',
template: '<span>{{mousePosition}}</span>'
})
export class MousePositionComponent implements OnInit, OnDestroy {
ngOnInit() {
}
ngOnDestroy() {
}
}

Unsubscribing
30
@Component({
})
ngOnInit() {
}
ngOnDestroy() {
}
}
const mouseDown$ = Observable.fromEvent(document, 'mousemove')
.pipe(
map(val => `${val.offsetX} ${val.offsetY}`)
);
Define Observable

Unsubscribing
31
@Component({
})
mousePosition: String;
mouseSubscription: Subscription;
ngOnInit() {
}
ngOnDestroy() {
}
}
this.mouseSubscription = mouseDown$
.subscribe((pos: String) => this.mousePosition = pos);
.pipe(
);
Subscribe

Unsubscribing
32
@Component({
})
mousePosition: String;
mouseSubscription: Subscription;
ngOnInit() {
}
ngOnDestroy() {
}
}
this.mouseSubscription = mouseDown$
.subscribe((pos: String) => this.mousePosition = pos);
.pipe(
);
this.mouseSubscription.unsubscribe();Unsubscribe

Async pipe
33
@Component({
template: '<span>{{mousePosition$ | async}}</span>'
})
export class MousePositionComponent implements OnInit {
mousePosition$: Observable<string>;
ngOnInit() {
this.mousePosition$ = fromEvent(document, 'mousemove')
.pipe(
);
}
}
No subscription management

HttpClient
34
- Simple API
- Strong typing of request
and response objects
- Support for interceptors

HttpClient
35
get<T>(url: string, options?: {
headers?: HttpHeaders | {
[header: string]: string | string[];
};
observe?: 'body';
params?: HttpParams | {
[param: string]: string | string[];
};
reportProgress?: boolean;
responseType?: 'json';
withCredentials?: boolean;
}): Observable<T>;
httpClient.get<User>('http://localhost:8080/user/1')
.subscribe((user: User) => console.log('User: ' + user.name));

Retry
36
- Retry the failed stream
- Propagates the error downstream if not successful
.pipe(
retry(3)
)
.pipe(
retryWhen(errors => errors.pipe(delay(1000).take(3)))
)

Reactive Forms
37
• Two options to build forms
• Reactive and template-driven forms
• Monitor changes by subscribing to one of the form control properties
this.favoriteConference.valueChanges
this.favoriteConference.statusChanges
(valid / invalid)<input formControllName=“favoriteConference” ..>

Server Sent Events
38
Wrapping an EventSource in an Observable
const eventSource$ = Observable.create(observer => {
const source = new EventSource('http://localhost:8080/search-push');
source.addEventListener('message',
event => observer.next(event));
}
);
* EventSource added in typings.d.ts

WebSocket
39
Wrapping a WebSocket in an Observable
const ws$ = Observable.create(observer => {
const source = new WebSocket(‘ws://localhost:8080/search-push');
}
);

WebSocket
40
Wrapping a WebSocket in an Observable
ws$.subscribe(...)
new WebSocket(...)
ws$.subscribe(...)
new WebSocket(...)
ws$.subscribe(...)
new WebSocket(...)

Subscription sharing
41
const ws$ = Observable.create(observer => {
const source = new WebSocket(‘ws://localhost:8080/search-push');
}
)
.share();

Q&A
Thank you!
@sergialmar
43
#springone@s1p

Reactive frontends with RxJS and Angular

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Reactive frontends with RxJS and Angular

Similaire à Reactive frontends with RxJS and Angular (20)

Plus de VMware Tanzu

Plus de VMware Tanzu (20)

Dernier

Dernier (20)

Reactive frontends with RxJS and Angular