Tweet
Tweet

Slide 1

Slide 1 text

An Introduction to Reactive Programming based on RxJS Joe Wang

Slide 2

Slide 2 text

“Think of RxJS as Lodash for events.” – RxJS official docs

Slide 3

Slide 3 text

“Reactive programming is programming with asynchronous data streams.” –staltz/Introrx.md

Slide 4

Slide 4 text

Pull vs Push Source Downstream Push Web socket Event Emitter …

Slide 5

Slide 5 text

Pull vs Push Source Downstream Pull Http Request Generator …

Slide 6

Slide 6 text

Data Stream

Slide 7

Slide 7 text

Data Stream

Slide 8

Slide 8 text

Observable/Observer

Slide 9

Slide 9 text

Observable/Observer chain

Slide 10

Slide 10 text

Generic Producer-Pipe-Consumer

Slide 11

Slide 11 text

Real world abstraction https://github.com/tc39/proposal-observable

Slide 12

Slide 12 text

Real world abstraction Observable - producer

Slide 13

Slide 13 text

Real world abstraction Observer = consumer

Slide 14

Slide 14 text

Real world abstraction SubscriptionObserver = pipe

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Write You a RxJS / Observable

Slide 17

Slide 17 text

Write You a RxJS / Subscription

Slide 18

Slide 18 text

Write You a RxJS / Subscriber

Slide 19

Slide 19 text

Write You a RxJS / operator - map

Slide 20

Slide 20 text

Write You a RxJS / operator-take

Slide 21

Slide 21 text

Write You a RxJS / observable - fromEvent

Slide 22

Slide 22 text

Write You a RxJS / observable - interval

Slide 23

Slide 23 text

Write You a RxJS / Subject

Slide 24

Slide 24 text

FRP slide for reactive-banana

Slide 25

Slide 25 text

FRP slide for reactive-banana

Slide 26

Slide 26 text

“Think of RxJS as Lodash for Observable.” –Joe

Slide 27

Slide 27 text

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