Slide 1

Slide 1 text

Client-side reactive programming (using RxJS)

Slide 2

Slide 2 text

Current state of UIs • Extremely complex • Full of async events, client/server communication • UIs are always composed based on a state • State is hard to reason about

Slide 3

Slide 3 text

Imperative programming

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

User action UI Responds User action ….. Uses imperative programming Uses imperative programming UI Responds time (s)

Slide 6

Slide 6 text

Caveats of IP • Isolates state from time • You don’t see the bigger picture • Mutable values

Slide 7

Slide 7 text

Is there a way … ?

Slide 8

Slide 8 text

Reactive programming

Slide 9

Slide 9 text

– Andre Staltz “Reactive programming is programming with asynchronous data streams.”

Slide 10

Slide 10 text

Streams • Sequence of ongoing events ordered in time • Cheap, ubiquitous • Allow you to react to new data • Think event busses, typical click events, etc.

Slide 11

Slide 11 text

But in RP …

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Demo time with RxJS

Slide 14

Slide 14 text

When to use RxJS • Orchestrate event-based computations • Deal with async data • Complex UIs with lots of user interaction

Slide 15

Slide 15 text

Thank you! @r31gN_ https://github.com/r31gN/rxjs-demo-presentation