Reactive Applications with Angular 2 and RxJS

JS Kongress 2016

Transcript

1. REACTIVE APPLICATIONS WITH ANGULAR 2 & RxJS SEBASTIAN MÜLLER TWITTER: @SEBAMUELLER
2. Software Architect @ adesso Twitter: @Sebamueller Github: SebastianM Sebastian Müller
3. RxJS Angular 2 +
4. Angular 2 Introduction Angular 2
5. What is Angular 2? • Framework for developing web apps und mobile apps • Is developed by Google • Complete rewrite in TypeScript • Rewrite took about 2.5 years • New official website: https://angular.io/
6. Component-based Architecture
7. Component Tree MainNavigation UsersList UsersListEntry UsersListEntry Application
8. A Simple Angular Component import { Component } from '@angular/core'; @Component({ selector: 'my-user-profile', template: ` <h1>User: {{ username }}</h1> ` }) export class UserProfileComponent { username: string = 'John'; } Decorator (metadata) HTML template CSS selector
 <my-user-profile></my-user-profile>
9. RxJS RxJS Introduction
10. RxJS
 =
 Lodash for async data
11. • Rx = Reactive Extensions • Library for reactive programming • Version 5 is a complete rewrite • Dependency of Angular 2 • Observable is the main building block • RxJS is an observable implementation • Many other Rx libraries for other languages
 available (reactivex.io) RxJS
12. What is an Observable?
13. Sync / Pull Async / Push Single value Multiple values Functions Iterators Promises Observables
14. import { Observable } from 'rxjs/Observable'; var observable = new Observable((observer) => {
 console.log('start'); var i = 0; setInterval(() => { observer.next(i++); }, 1000); }); Observable var subscription = observable.subscribe((value) => { console.log(value); }); Lazy Emit a new value 0 1 2 3 Stream of events Time
15. Observable.subscribe vs Promise.then Observables myObservable.subscribe(nextFn, errorFn, completeFn); Promises myPromise.then(successFn, errorFn);
 

16. Observable - unsubscribe var subscription = observable.subscribe((value) => { console.log(value); }); import { Observable } from 'rxjs/Observable'; var observable = new Observable((observer) => {
 console.log('start'); var i = 0; var id = setInterval(() => { observer.next(i++); }, 1000); return () => {
 console.log('unsubscribe'); clearInterval(id); }; }); Cleanup } setTimeout(() => { subscription.unsubscribe(); }, 2500); start 0 1 unsubscribe
17. There’s a lot to learn…
18. Advantages of RxJS/Observables in comparison to Promises • Observables… • …can emit multiple values over time • …are cancelable • …provide useful operators to transform the stream
19. RxJS Angular 2 +
20. @angular/http Module
21. HTTP Requests in Angular 2 import { Component } from '@angular/core'; 
 @Component({ selector: 'app-attendee-list', template: `
 <h1>Conference Attendees</h1> <div *ngFor="let attendee of attendees"> {{ attendee.name }} </div> ` }) export class AttendeeListComponent { attendees: Attendee[];
 } constructor(http: Http) {
 http.get('/api/attendees.json').subscribe((result) => {
 this.attendees = result;
 });
 } import { Http } from '@angular/http';
 It doesn't work :-( Response instance
22. RxJS Operators
23. RxJS Operators - map var observable = new Observable((observer) => { observer.next(4); observer.next(5); observer.next(6); }).map(value => value * 2); observable.subscribe((value) => console.log(value)); 4 5 6 Time 8 10 12 Time transforms the emitted value,
 returns a new observable
24. RxJS Operators • Over 100 operators available • Commonly used: • map • filter • pluck • mergeMap/flatMap • debounceTime Learn more: https://www.learnrxjs.io
25. HTTP Requests in Angular 2 import { Component } from '@angular/core'; import { Http } from '@angular/http';
 import 'rxjs/add/operator/map';
 @Component({ selector: 'app-attendee-list', template: `
 <h1>Conference Attendees</h1> <div *ngFor="let attendee of attendees"> {{ attendee.name }} </div> ` }) export class AttendeeListComponent { attendees: Attendee[];
 constructor(http: Http) {
 http.get('/api/attendees') .map(response => response.json()) .subscribe((result) => this.attendees = result);
 } } parse the JSON response body
26. Async Pipe
27. Pipes in Angular 2 • Pipes transform values: • Date Pipe
 <div>{{ myDate | date:'yMMMdjms' }}</div> • JSON Pipe
 <div>{{ myObj | json }}</div> • Currency Pipe
 <div>{{ myValue | currency:'USD':true:'4.2-2'}}</div> • Async Pipe
 <div>{{ myObservable | async }}</div>
28. Async Pipe import { Component } from '@angular/core'; import { Http } from '@angular/http';
 import 'rxjs/add/operator/map';
 @Component({ selector: 'app-attendee-list', template: `
 <h1>Conference Attendees</h1> <div *ngFor="let attendee of attendees"> {{ attendee.name }} </div> ` }) export class AttendeeListComponent { attendees: Attendee[];
 constructor(http: Http) {
 http.get('/api/attendees') .map(response => response.json()) .subscribe((result) => this.attendees = result);
 } } 
 
 
 of (attendees | async)"> </div> ` }) attendees: Observable<Attendee[]>;
 
 ; 
 } } this.attendees = http.get('/api/attendees') subscribe to the attendees observable
29. Retry Operator 
 @Component({ selector: 'app-attendee-list', template: `
 <h1>Conference Attendees</h1> <div *ngFor="let attendee of attendees"> {{ attendee.name }} </div> ` }) export class AttendeeListComponent { attendees: Attendee[];
 constructor(http: Http) {
 http.get('/api/attendees') .retry(2)
 .map(response => response.json())
 
 
 
 of (attendees | async)"> </div> ` }) attendees: Observable<Attendee[]>;
 
 
 
 } } this.attendees = http.get('/api/attendees') retry 2x import { Component } from '@angular/core'; import { Http } from '@angular/http';
 import 'rxjs/add/operator/map'; import 'rxjs/add/operator/retry';
30. HTTP Polling
31. HTTP Polling with timer & flatMap 
 @Component({ selector: 'app-attendee-list', template: `
 <h1>Conference Attendees</h1> <div *ngFor="let attendee of (attendees | async)"> {{ attendee.name }} </div> ` }) export class AttendeeListComponent { attendees: Attendee[];
 constructor(http: Http) {
 http.get('/api/attendees') .flatMap(() => http.get('/api/attendees'))
 .map(response => response.json())
 
 
 
 </div> ` }) attendees: Observable<Attendee[]>;
 
 
 
 } } this.attendees = Observable.timer(0, 3000) Emit the first value after
 0 milliseconds, then 
 every 3000 milliseconds import 'rxjs/add/operator/map'; import 'rxjs/add/operator/timer';
 import 'rxjs/add/operator/flatMap'; Map to inner Observable
 and emit output
32. More Reactive APIs in Angular 2 • Forms (ReactiveFormsModule) • https://angular.io/docs/ts/latest/guide/forms.html • Router • https://angular.io/docs/ts/latest/tutorial/toh-pt5.html
33. angular.io
 learnrxjs.io
34. Sebastian Müller - @Sebamueller Thanks! Thanks to Juri Strumpflohner @juristr