Data Flow Patterns in Angular 2 - Sebastian Müller

Data Flow Patterns  
in Angular 2
Sebastian Müller - adesso AG
EnterJS - 15.06.2016

Sebastian Müller
@Sebamueller

Component Tree
Application
MainNavigation UsersList
UsersListEntry UsersListEntry

Die erste App
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
@Component({
selector: 'my-app', // css selector
template: `
<h1>
{{title}}
</h1>
`
})
export class AppComponent {
title: string = 'my-app works!';
}
bootstrap(AppComponent);

Die erste App
<html>
<head>
…
</head>
<body>
<my-app>Loading...</my-app>
…
</body>
</html>

User App
UserApp
UserCard
user = {
username: 'admin',
email: 'admin@abc.de'
};
user

UserApp Component
UserApp
UserCard
import { UserCard } from './user-card.component';
@Component({
selector: 'my-app',
directives: [UserCard],
template: `
<user-card [cardDetails]="user"></user>
`
})
export class UserApp {
user = {
username: 'admin',
};
}
bootstrap(UserApp);

UserCard Component
UserApp
UserCard
import { Component, Input } from '@angular/core';
@Component({
selector: 'user-card',
template: `
<div>
<h2>Username: {{ cardDetails.username }}</h2>
<h3>E-Mail: {{ cardDetails.email }}</h2>
</div>
`
})
export class UserCard {
@Input() cardDetails;
}

Was ist RxJS?
• Library für reaktive Programmierung im  
JavaScript Bereich
• Open Source - Version 5 aktuell im Beta Status
• Wird führend von Netﬂix entwickelt 
(Ben Lesh - @BenLesh)
• Observable als wichtigster Baustein für
Reaktive Programmierung

Synchron / Pull Asynchron / Push
EinValueMehrereValuesFunctions
Iterators
Promises
Observables

Observable
import { Observable } from 'rxjs/Observable';
var observable = Observable.create(function subscribe(observer) {
var i = 0;
setInterval(() => {
observer.next(i++);
}, 1000);
}); Lazy
var subscription = observable.subscribe(function next(value) {
console.log(value);
});
1
2
3

Observable Subscription
var observable = Observable.create(function subscribe(observer) {
var i = 0;
var id = setInterval(() => {
observer.next(i++);
}, 1000);
return function unsubscribe() { 
console.log('unsubscribe');
clearInterval(id);
};
});
var subscription = observable.subscribe(function next(value) {
console.log(value);
});
setTimeout(() => {
subscription.unsubscribe();
}, 2500);
1
2
unsubscribe

subscribe()
myPromise.then(function(value) {
console.log('success', value);
}, function(err) {
console.log('error', err);
});
myObservable.subscribe(function(value) {
}, function(err) {
});
Promise
Observable

subscribe()
}, function(err) {
}, function() {
console.log('completed');
});
var myObservable = Observable.create((observer) => {
observer.next(1);
setTimeout(() => {
observer.next(2);
observer.complete();
}, 1000);
});
success 1
success 2
completed

map Operator
});
success 0
success 2
import 'rxjs/add/operator/map';
var myObservable = Observable.create((observer) => {
var i = 0;
setInterval(() => {
observer.next(i++);
}, 1000);
}).map((value) => value * 2);
success 4

Weitere Operators
• ﬁlter
• pluck
• groupBy
• scan (reduce)
• zip
• throttle
• …

Observables vs Promises
Promise Observable / RxJS
Liefert nur einen Wert zurück Liefert 0-n Werte
Kann nicht abgebrochen
werden*
Kann abgebrochen werden -
unsubscribe()
Keine Operators
Bietet Operators für
Datentransformationen/
Filterung/etc.
*Aktuell in Diskussion

User App
UserApp
UserCard
user = {
username: 'admin',
};
user
<user-card [cardDetails|="user"> 
</user-card>
sendEmail
<user-card [cardDetails]="user" 
(sendEmail)="showMailForm($event)"> 
</user-card>

UserCard Component
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'user-card',
template: `
<div>
<h2>Username: {{ cardDetails.username }}</h2>
<h3 (click)="emailClicked()">E-Mail: {{ cardDetails.email }}</h2>
</div>
`
})
export class UserCard {
@Input() cardDetails;
@Output() sendEmail: EventEmitter<string> = new EventEmitter<string>();
emailClicked() {
this.sendEmail.emit(this.cardDetails.email); // Observable
}
}

Async Pipe
@Component({
selector: 'my-app',
template: `
<h1>
{{ counter | async }}
</h1>
`
})
counter: Observable<number> = Observable.create((observer) => {
var i = 0;
var id = setInterval(() => {
observer.next(i++);
}, 1000);
return () => {
clearInterval(id);
};
});
}

valueChanges
@Component({
selector: 'my-app',
template: `
<form>
<input [ngFormControl]="myInput">
</form>
{{ result | async }}
`
})
myInput: Control = new Control();
result: Observable<any>;
ngOnInit() {
this.result = this.myInput.valueChanges
.map((value) => value * 2);
}
}

@angular/http
• XHR Client
• API basiert auf Observables
• Eigenständiges Package
• Mocking Features

@angular/http
import {Component} from '@angular/core';
import {Http, Response} from '@angular/http';
@Component({
selector: 'my-comp',
template: `
{{ data | async }}
`
})
class MyComponent {
data: string;

constructor(private http: Http) {}

ngOnInit() {
this.data = this.http.get('/my/api')
.map((r: Response) => r.json());
}
}

Observables als Input
import { Component, Input } from '@angular/core';
@Component({
selector: 'stock-info',
template: `
Preis: <b>{{ stockPrice | async }}</b>
`
})
export class StockComponent {
@Input() stockPrice: Observable<number>;
}
<stock-info [stockPrice]="myObservable"></stock-info>

Change Detection in Angular 2
ist sehr schnell

Change Detection
Application
UserProﬁle Main Navigation
NavEntry NavEntry
user = {
username: 'admin',
};
navEntries = [
{name: 'a'},
{name: 'a'}
]
navEntries
user
admin@abc.denew@abc.de
user = {
username: 'admin',
email: 'new@abc.de'
};

ChangeDetectionStrategy.OnPush

Change Detection
Application
UserProﬁle 
(OnPush)
Main Navigation 
(OnPush)
NavEntry NavEntry
user = {
username: 'admin',
};
navEntries = [
{name: 'a'},
{name: 'a'}
]
navEntries
user
admin@abc.de
user = {
username: 'admin',
email: 'new@abc.de'
};
👎

Immutable.js
• Library für Immutable Data Structures
• Open Source Projekt von Facebook
• Im React Bereich weit verbreitet
• TypeScript Type Deﬁnitions vorhanden
• Unterstützt:
• Maps
• Sets
• Lists (Arrays)
• u.v.m.

ö
var book = Immutable.Map({
title: 'My book title'
});
var book2 = book.set('title', 'new title');
console.log(book === book2); // false
console.log(book2.toObject()); // {title: 'new title’}
console.log(book.toObject()); // {title: 'My book title'}

Change Detection
Application
UserProﬁle 
(OnPush)
Main Navigation 
(OnPush)
NavEntry NavEntry
user = {
username: 'admin',
};
navEntries = [
{name: 'a'},
{name: 'a'}
]
navEntries
user
admin@abc.denew@abc.de
user = user.set( 
'email', 
'new@abc.de' 
)
"

Talk: 
Angular 2 Change Detection erklärt 
Pascal Precht

Fazit
• Angular 2 bietet viele nützliche Wege zur
Kommunikation
• Einarbeitung in RxJS kostet viel Zeit
• Aber es lohnt sich!
• Angular 2 Change Detection ist sehr schnell
• ChangeDetectionStrategy.OnPush wenn
möglich einsetzen

Danke!
EnterJS - 15.06.2016 @Sebamueller

Data Flow Patterns in Angular 2 - Sebastian Müller

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Data Flow Patterns in Angular 2 - Sebastian Müller

Similar to Data Flow Patterns in Angular 2 - Sebastian Müller (20)

Recently uploaded

Recently uploaded (20)

Data Flow Patterns in Angular 2 - Sebastian Müller