Will tweet a link to slides and code
RxJS and Observables
By Duncan Hunter
Join the Conversation #angularhackday @DuncHunter
Duncan
Hunter
Architect at SSW
@DuncHunter
Agenda
Where does RxJS fit into Angular
What is RxJS
RxJS and Angular's HTTP module
Join the Conversation #angularhackday @DuncHunter
Who has used RxJS?
Where does RxJS fit into Angular
What is RxJS
RxJS and Angular's HTTP module
Join the Conversation #angularhackday @DuncHunter
An API for asynchronous programming
with observable streams
Observable�[1]
Observer 1
[1]
Observable�[1,4]
Observer 1
[1]
Observable�[1,4]
Observer 1
[1,4]
Observable�[1,4,7]
Observer 1
[1,4]
Observable�[1,4,7]
Observer 1
[1,4,7]
.map(x => x + 1)
Observable�[1]
Observer 1
[2]
.map(x => x + 1)
Observable�[1,4]
Observer 1
[2]
.map(x => x + 1)
Observable�[1,4]
Observer 1
[2,5]
.map(x => x + 1)
Observable�[1,4,7]
Observer 1
[2,5]
.map(x => x + 1)
Observable�[1,4,7]
Observer 1
[2,5,8]
.map(x => x + 1)
.filter(x => x > 2)
Observable�[1,4,7]
Observer 1
[2,5,8]
Observer 2
[4,7]
.map(x => x + 1)
.filter(x => x > 2)
.reduce((x,y) => x + y)
Observable�[1,4,7]
Observer 1
[2,5,8]
Observer 2
[4,7]
.map(x => x + 1)
.filter(x => x > 2)
.reduce((x,y) => x + y)
Observable�[1,4,7]
Observer 1
[2,5,8]
Observer 2
[13]
.map(x => x + 1)
.filter(x => x > 2)
.reduce((x,y) => x + y)
Observable�[1,4,7]
Observer 1
[2,5,8]
Observer 2
[13]
There are a lot of operators!
buffer
bufferCount
bufferTime
bufferToggle
bufferWhen
combineAll
combineLatest
concat
concatAll
concatMap
concatMapTo
count
debounce
debounceTime
defaultIfEmpty
delay
delayWhen
dematerialize
distinctUntilChanged
do
every
expand
filter
first
groupBy
ignoreElements
last
let
map
mapTo
merge
mergeMap
partition
pluck
publish
race
repeat
retry
retryWhen
sample
scan
share
single
skip
skipUntil
skipWhile
startWith
switchMap
window
windowCount
windowTime
windowToggle
windowWhen
withLatestFrom
zip
Code Demo
Observers and Observables
Subscribe to a stream
Apply operators
What is RxJS
Where does RxJS fit into Angular
What is RxJS
RxJS and Angular's HTTP module
Join the Conversation #angularhackday @DuncHunter
Observables are baked into Angular
getUsers() {
this.http.get(`http://swapi.co/api/people/`)
.subscribe(people => console.log(people));
}
@Component()�export class SearchComponent implements OnInit {� searchControl = new FormControl();� ngOnInit() {� this.searchControl.valueChanges.subscribe(value => {� // do something with value here� });� }�}
ngOnInit() {� this.route.params
.subscribe(params => this.id = params['id'])
}
ngOnInit() {� this.route.params
.map(params => params['id'])
.switchMap(id => this.contactsService.getContact(id))
.subscribe(contact => this.contact = contact);
}
Where does RxJS fit into Angular
Where does RxJS fit into Angular
What is RxJS
RxJS and Angular's HTTP module
Join the Conversation #angularhackday @DuncHunter
HTTP is not the best example of why to use observables over promises
@Injectable()�export class PeopleService {
constructor(private http: Http) { }
getPeople() {
return this.http.get(`http://swapi.co/api/people/`)
.map(response => response.json());
.subscribe(people => console.log(people));
}
}
Code Demo
HTTP request
Call remote server
Summary - Observables and Angular's HTTP module
Where do Observables fit into Angular 2
What is RxJS
Observables and Angular's HTTP module
Common Angular RxJS operators
Join the Conversation #angularhackday @DuncHunter
RxJS is a Journey
Summary
Where does RxJS fit into Angular
What is RxJS
RxJS and Angular's HTTP module
Join the Conversation #angularhackday @DuncHunter
@dunchunter
Thank you!
bit.ly/angularhackday-seattle2017-rxjs
bit.ly/bit.ly/angularhackday-seattle2017-rxjs-code