rp with rxjs (PDF)

GETTING STARTED WITH
REACTIVE PROGRAMMING
& RxJS
ZACK FANTAUZZI

LEAD FRONT-END ENGINEER with RAILROAD19 (RAILROAD19.COM)
FANTAUZZI@RAILROAD19.COM
GIVEN ON OCTOBER 18TH, 2016 TO THE GDG CAPITAL REGION
http://www.meetup.com/google-developer-group-of-the-capital-region/

REACTIVE PROGRAMMING
In computing, reactive programming is a programming paradigm
oriented around data flows and the propagation of change.
— Wikipedia, https://en.wikipedia.org/wiki/Reactive_programming

Reactive Programming > Concepts

CONCEPTS
• Everything is a stream of data
•
•
•
•

Click, Drag, Focus, Blur, etc (events)
Collections (arrays)
Network Requests and Responses
Variables

• Compose chains of operators to react to streams
• Pushing changes vs polling for changes
•
•

New values/changes are published
Subscribers (1 or more) receive the changes and act accordingly

• An application is a collection of aysnc events and state changes

3

Reactive Programming > Patterns

PATTERNS
• Reactive programming combines two fundamental patterns:
•
•

The Observer Pattern
The Iterator Pattern

• The Observer Pattern:

Listeners register themselves to a Producer and the Listeners
are notified by the Producer of state changes

• The Iterator Pattern:

Consumers of an Iterator can progress and return values (next()) and
check if the Iterator has more values remaining (hasNext())

• The Reactive Pattern:

A Producer (Observable) emits it’s updates in sequence to
it’s Subscribers (Observer) and the Subscribers react to those updates

4

Reactive Programming > The Case for Reactive Programming

THE CASE FOR REACTIVE PROGRAMMING
• Reduce the time spent implementing the management of:
•
•
•
•

User behavior (clicks, saving, typing, focusing, deleting, etc)
CRUD — interacting with local state and server state
Business logic
etc

• Allows for more time implementing business logic
• Additional power comes from the ability to:
•
•

Combine streams (synchronous and asynchronous)
Apply ‘operators’ to the streams (map, reduce, flatMap, filter, etc)

• Makes your code more declarative and composable
• Fits nicely with modern web applications (PWAs, Real-time, etc)

5

VISUALIZING REACTIVE SEQUENCES
If you can’t draw it, you don’t understand it.

Visualizing Reactive Sequences > Marble Diagrams

MARBLE DIAGRAMS
• Just like traditional UML diagrams
(Swim-lane, Sequence, Interaction, etc)
• Marble diagrams offer a great way to illustrate the concept of:
value over time
• Here is the ‘academic’ marble diagram created by the Rx team:

7

Visualizing Reactive Sequences > Marble Diagrams: map()

8

MARBLE DIAGRAMS
Example 1: map()
1

2

3

map(x => 1.5 * x)

1.5

3

4.5

Visualizing Reactive Sequences > Marble Diagrams: debounce()

9

MARBLE DIAGRAMS
Example 2: debounce(time) OR debounceTime(time)   via  RxJS5
1

2

3

4

5

6

7

debounce(10)

1

5

7