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
21. Criticisms of Object.observe
Big changes to Object internals
Bad performance
Not well-supported or adopted
But really,
Ecosystem moved in different direction
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
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
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