An Introduction to Reactive Programming based on RxJS

Transcript

1. An Introduction to Reactive Programming based on RxJS Joe Wang
2. “Think of RxJS as Lodash for events.” – RxJS official docs
3. “Reactive programming is programming with asynchronous data streams.” –staltz/Introrx.md
4. Pull vs Push Source Downstream Push Web socket Event Emitter …
5. Pull vs Push Source Downstream Pull Http Request Generator …
6. Data Stream
7. Data Stream
8. Observable/Observer
9. Observable/Observer chain
10. Generic Producer-Pipe-Consumer
11. Real world abstraction https://github.com/tc39/proposal-observable
12. Real world abstraction Observable - producer
13. Real world abstraction Observer = consumer
14. Real world abstraction SubscriptionObserver = pipe
15. Write You a RxJS Observable：represents the idea of an invokable collection of future values or events. Observer：a collection of callbacks that knows how to listen to values delivered by the Observable. Subscription：represents the execution of an Observable, is primarily useful for cancelling the execution. Operator: pure functions that enable a functional programming style of dealing with collections Subject: is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers. Scheduler: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others
16. Write You a RxJS / Observable
17. Write You a RxJS / Subscription
18. Write You a RxJS / Subscriber
19. Write You a RxJS / operator - map
20. Write You a RxJS / operator-take
21. Write You a RxJS / observable - fromEvent
22. Write You a RxJS / observable - interval
23. Write You a RxJS / Subject
24. FRP slide for reactive-banana
25. FRP slide for reactive-banana
26. “Think of RxJS as Lodash for Observable.” –Joe
27. tc39/proposal-observable RxJS docs Functional Reactive Animation - Conal Elliott Push-pull functional reactive programming - Conal Elliott The introduction to Reactive Programming you've been missing - @andrestaltz Learn RxJS - @btroncone RxJS Marbles Reactive.how Resources