Angular 2 observables

Angular 2 is now in Beta. Reactive Programming techniques are used to write the Angular 2 framework. The same APIs and techniques are exposed to Angular 2 developers for application development.


This talk, by Geoff Filippi, will start with a brief overview of Reactive Programming. We will define and discuss the Observer Design Pattern. Observables are implemented in RxJS and are under consideration for standardization in ES2016. We will compare Observables, Promises, Events and callbacks. We will also discuss how Promises, Events and callbacks can be bridged into Observables.


Finally we will discuss how RxJS is used to implement Angular 2. We will explore how Observables are used in change detection and ngZone, Http, Async Facade and Forms. We will also discuss how to make use of RxJS and Observables in our Angular 2 applications.

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?