This document provides an overview of Angular 2 and related reactive programming concepts: - It discusses fundamentals like reactive programming, functional reactive programming (FRP), and the observer design pattern. - Related concepts like promises, Object.observe, and RxJS observables are explained. - Angular 2 uses observables for forms, HTTP requests, the async pipe for change detection, and more. Pipes and change detection are also covered. - The document compares promises and observables, and how RxJS implements observables for use in Angular 2. Bridging between different async patterns and observables is discussed. - Questions are invited at the end regarding Angular 2 and related reactive

1. Angular 2
Observables, Change Detection, AsyncPipe,
Forms, Rx.js
/Geoff Filippi @geofffilippi

2. Geoff Filippi
Application Architect

3. Oildex
A cloud service company for oil and gas
1 year

4. Formerly:
Time Warner Cable
12 years

5. Experience

Worked on streaming media (Voice over IP), 6 years
5 million phone customers

6. Experience

Worked on video and streaming video, 4 years

7. Projects
twctv.com
Video streaming website
backbone.js
Video streaming Set-Top Box (STB) web application

8. Oildex Projects
Rewrite 10+-year-old apps
Angular 1.4
New router
ES5
No Angular 2, yet
No ES6 or Typescript, yet

9. We will cover
Fundamentals
Related concepts
Angular 2

10. Fundamentals
A brief overview of reactive fundamentals
Reactive programming
Functional Reactive Programming (FRP)
Observer design pattern

11. Related concepts
Object.observe
Promises
Other Async concepts
RxJS

12. Observables in Angular 2
Forms
Http
AsyncPipe

13. Fundamentals

14. Overview of Reactive Programming
Data flows
Propagation of change

15. Reactive Manifesto
Responsive
Resilient
Elastic
Message Driven

16. (FRP) Functional Reactive
Programming
Reactive Programming
and
Functional Programming

17. Related Concepts

18. Observer Design Pattern
Subject tracks observers
Subject notifies observers of state changes

19. Terminology
Subject, Observable, Producer
Observer, Consumer

20. Object.observe
Not the same as Observables
Formerly a Stage 2 Proposal
Proxy
Proposal withdrawn

21. Criticisms of Object.observe
Big changes to Object internals
Bad performance
Not well-supported or adopted
But really,
Ecosystem moved in different direction

22. Observable
Stage 1 Current Proposal
Description
Specification

23. Differences between Observables
and Object.observe

24. Creating an Observable
The hard way
let myObservable = new Observable(observer => {
const token = doAsyncAction((err, value) => {
if (err) }
observer.error(err);
} else {
observer.next(value);
observer.complete();
}
});
return () => {
cancelAsyncAction(token);
};
{);

25. Compare
Observables
Promises
Events
callbacks

26. Promises vs. Observables
Promise is like a async variable
Observable is like a async array

27. Promises vs. Observables
Promises
Single value
Cannot be cancelled
Not lazy
Good for some AJAX calls
Unless you want to cancel them
Catch, Finally

28. Promises vs. Observables
Observables
Streams
Can be unsubscribed
Lazy, until you call .subscribe()
Better for events, WebSockets
Animations, AJAX you want to cancel
Can by retried
Catch, Finally

29. Bridging Observables
Easy way to get an observable
You can turn other async concepts into an observable using
a helper
Promises
.from()
Generator
.from()
Callbacks
.fromCallback()

30. Bridging Observables
Easy way to get an observable
Events
.fromEvent()
DOM
AJAX
WebSockets .fromWebSocket()
Other observable implementations
bacon.js
kefir.js

31. Bridging Observables
You can even turn non-async concepts into an observable
using a helper
Arrays
.of()

32. Working with Promises vs.
Observables
.then()becomes .subscribe()

33. Working with Promises vs.
Observables
Observables do not need to complete, but...
If you need to do something when an observable completes,
pass an optional complete handler

34. RxJS
v5.0.0-beta.1
Observable
Subject
Implementation used in Angular 2

35. Angular 2

36. Angular 2
Forms
Http
AsyncPipe
Change detection

37. Forms
Forms are observable
this.myForm = fb.group({
'sku': ['', Validators.required]
});
this.sku = this.myForm.controls['sku'];
this.sku.valueChanges.subscribe(
(value: string) => {
console.log('sku changed to: ', value);
}
);
this.myForm.valueChanges.subscribe(
(value: string) => {
console.log('form changed to: ', value);
}
);

38. Http
Cancel requests
Stream results
"type ahead"
Returns observable

39. Http
getRandomQuote() {
this.http.get('http://localhost:3001/api/random-quote')
.retry(3)
.map(res => res.text())
.subscribe(
data => this.randomQuote = data,
err => this.logError(err),
() => console.log('Random Quote Complete')
);
}

40. Pipes
Like Angular 1 filter

41. AsyncPipe
Can subscribe to observables
timerAsync = Observable.interval(1000).startWith(0);
<h2>Current Total (Async Pipe): {{timerAsync | async}}</h2>

42. Change Detection
New in Angular 2:
Apps are reactive
Change detection is directional
You can skip walking parts of the tree
Immutable objects
Observables

43. ngrx
Reactive Extensions for Angular 2
ngrx/store
Can be used to implement elm/redux-style applications in
Angular 2

44. Questions?