1 y 2 de Marzo#t3chfest2018

Entendamos de una vez qué es eso de la reactividad…

Sema García@semagarcia

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

“Cordobéh”

JavaScript Architect

Trainer & speaker

Who am I?

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

§Rx introduction§Atypical examples§This seems to be an observable§Observables and its friends§More examples

Agenda

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

A brief survey

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

ReactiveeXtensions

Far time ago…

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

JS S

kills

Time

Rx

Event loop

Promises

Clousures

Learning curve cliff?

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Rx = FP + Observer + Iterator

Mixture of concepts:• Functional programming• Observer pattern• Iterator pattern

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

The reactive programming is a paradigm withasynchronous data streams.

to operate

What’s reactive programming

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

paradigm

What’s reactive programming

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Reactive eXtensions

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Typical first example: values over the time

Please, pay attention to that complex and huge equation:

c = a + b;

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Typical first example: values over the time

All variables in our system change over the time, and therefore, they

are “observables”

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

a = 1; b = 3;c = a + b; // 4

a = 3;c = ? // 4!!!

Typical first example: values over the time

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

c = 4??

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

A good example of “reactive model"

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Excel: reactive datasheet

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Reactive step-by-step sum

Step by step sum with async (future) values

1 3 add 4

a b c

7 8

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Over the time

JS-ASYNCHRONY

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Example 01

Example 01

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Standardizing methods

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Kind of callbacks identified

I’d need…• A callback for each event / data• A callback for error handling• A callback for completion

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Example 02

Example 02

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

An event is coming!

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

An event is coming!

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Money, money…

VALUE

DATA STREAM

ASYNC TONS OF OBSERVERS

OBSERVABLE

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Rx in the nature

OBSERVABLE

OBSERVERS

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

¡¡GRRRRRRR!!!

Ohh! He says “GRRRRRRR”!!

Rx in the nature

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Example 02

Lion example

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Streams everywhere…

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Observables…

Observables are functions, so, functions don’t do anything until

they are called

Observables

are

lazy

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

How to create an Observable?

Many forms:• .create(function);• .of(value);• .from(AnArray);• .fromEvent(element, event);• .fromPromise(p);• .range(min, max);• .interval(period);

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Subscription

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Subscription

A “subscription” represents the execution of an Observable, useful

for cancelling it

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Subscription

A subscription to an observable ends if one of the following occurs:

1. The consumer explicitely unsubscribes2. The observable invokes the complete()

method on the observer3. The observable invokes the error() method

on the observer

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Subscription

Its most important method:

.unsuscribe()

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Pay attention to this advice…

TO UNSUSCRIBE!!

DON’T FORGET

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

A new friend in Rx world: Subject

WTF is a Subject?

A subject represents an object that is both an observable as well as an

observer. Each notification is broadcasted to all subscribed

observers.

“Data producer – data consumer…”

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

A new friend in Rx world: Subject

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

A new friend in Rx world: Subject

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Type of Subjects

There are four types:• PublishSubject: emits all the subsequent items of the

source Observable at the time of subscription.• ReplaySubject: emits all the items of the source

Observable, regardless of when the subscriber subscribes.

• BehaviourSubject: emits the most recently emitted item and all the subsequent items of the source Observable when an observer subscribes to it.

• AsyncSubject: only emits the last value of the source Observable(and only the last value) only after that source Observable completes.

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Operators…

• Creationals• Filters• Maths• Transforms• Combinations• Error handling

… for all use cases:

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Operators…

An “operator” is just a function that takes an observable and

returns a new observable

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Marble (formal) diagram

Events/DataStreams’ end

Error occurred

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

RxMarbles

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

RxJS & Angular

Angular Auth Example

Comp. 1 Comp. 2 Comp. 3

Header (+ AuthService)

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

RxJS & Angular

- Http requests- Forms- Async inputs- Components inter-communication- Router / Navigating- Change Detection- Animations- And much more…

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

RxJS & Redux (in Angular)

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

This is just the beginning

Further topics in RxJS:- Error (catch, retry) and parallel

observables- Operators (even more) in depth- Schedulers- More subject use cases- .pipe() and lettable operators- RxJS 6/7…

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Conclusions

Conclusions…

RxJS is so cute!

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Examples in the repo!

https://github.com/semagarcia/rxjs-t3chfest-reactividad

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Make your questions!

#T3chFest2018@semagarcia – Entiende eso de la reactividad de una vez por todas

Make your questions!