- Simplifies asynchronous flows
- "alternative" to Promises (cancellable, less code, multiple values, ...)
- Big hype some years ago
- used in Angular (HTTP, NGXS, NgRX, ...) (https://angular.io/guide/rx-library)
- Proposal for ECMAScript (https://github.com/tc39/proposal-observable)
- RX = Reactive Extensions (http://reactivex.io/)
- mixture of
- Observer (EventListener, Push-Principle)
- Iterator (Traversion, next() & hasNext(), Pull-principle)
- fills gap (https://rxjs-dev.firebaseapp.com/guide/observable)
- "lazy Push collections of multiple values"
- events over time
- Use JS Library https://github.com/ReactiveX/rxjs
- convention: observable$, append a $ sign to observables)
- (https://angular.io/guide/rx-library#naming-conventions-for-observables
- like we did with jquery ($element) or angular.js ($scope) but the other way around ;)
- Observable ≈ Stream, DataSource, Source (~ DE: Quelle)
- Observers listen to Observables
- Observers got 3 "methods" (https://stackblitz.com/edit/rxjs-u1ducc)
- next
- error?
- complete?
- Observer can of course be created manually (https://stackblitz.com/edit/rxjs-ywgpig)
- Subscription (~ "Turn on faucet", DE: ~"Wasserhahn aufdrehen")
- subscribe() / unsubscribe() = cancelling
- Observable Temperature (cold/warm/hot observables)
- Pipe (~ DE: Rohr, Leitung)
- Tap (~ DE: Anzapfen)
- Marble Diagrams (https://rxmarbles.com/)
- Operators
- Transformation
- map()
- filter()
- Combination
- Transformation
- Multi/unicast
-
Angular
- https://stackblitz.com/edit/angular-ivy-xs4oa9
- General tips:
- use https://angular.io/api/common/AsyncPipe
- unsubscribe on ngDestroy
-
Pipe / Filter / Map / Tap
-
Combination
-
Type Ahead
-
Multi/unicast (share)