à la découverte des observables

10
#DevoxxFR @nicoespeon À la découverte des Observables Nicolas Carlo @nicoespeon 1 2 3 4

Upload: nicolas-carlo

Post on 17-Mar-2018

320 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: À la découverte des observables

#DevoxxFR @nicoespeon

À la découverte des Observables

Nicolas Carlo @nicoespeon

1 2 3 4

Page 2: À la découverte des observables

#DevoxxFR @nicoespeon

Pour ceux qui n’en ont jamais manipulé

Pour apprendre ce que c’est

Pour comprendre à quoi ça sert

1 2 3

Page 3: À la découverte des observables

#DevoxxFR @nicoespeon

Kézako, Observables ?

Un événement

Une erreur

Flux terminé

« Think of it as an asynchronous immutable array » - 2 minute introduction to Rx by Andre Staltz

Lazy

Tout type d’événementshttp://reactivex.io/

Microsoft

Java, JS, Scala, Python, Swift…

Opérateurs

Marble DiagramsDans le code

http://rxmarbles.com/Intérêts ?

Code déclaratif

Simple et composableManipuler flux

événements asynchrones

temps

// -1----2-4---X--|->

Page 4: À la découverte des observables

#DevoxxFR @nicoespeon

« Si l’utilisateur s’excite sur la souris, lance une vidéo de chatons pour le calmer »

« Si l’utilisateur s’excite sur la souris, lance une vidéo de chatons pour le calmer »

Exemple : clics multiples

Page 5: À la découverte des observables

#DevoxxFR @nicoespeon

let numberOfClicks = 0let handleClicksTimeout

document.addEventListener('click', () => { clear(handleClicksTimeout) numberOfClicks++

handleClicksTimeout = setTimeout(() => { if (numberOfClicks >= 2) { console.log(`${numberOfClicks} clicks`) } numberOfClicks = 0 }, 250)})

Exemple : clics multiples

Page 6: À la découverte des observables

#DevoxxFR @nicoespeon

click$

multiClick$

buffer(click$.debounce(250))

map(x => x.length)

1 5 11 2 1

filter(x => x >= 2)

5 2

Page 7: À la découverte des observables

#DevoxxFR @nicoespeon

Exemple : clics multiplesconst click$ = Rx.Observable.fromEvent(document, 'click')

const multiClick$ = click$ .buffer(click$.debounce(250))

.map((buffer) => buffer.length)

.filter((length) => length >= 2)

multiClick$.subscribe( (numberOfClicks) => console.log(`${numberOfClicks} clicks`))

1 2 1 3 1

2 3

Page 8: À la découverte des observables

#DevoxxFR @nicoespeon

Take Away

‣ Pas de compteur, pas de timeout, pas de micro-gestion

‣ Code déclaratif, plus simple à raisonner / tester / faire évoluer

‣ Side-effects dans subscribe = Separation of Concerns

‣ Flux ré-utilisables = ajout de features sans peur !

const click$ = Rx.Observable.fromEvent(document, 'click')

const multiClick$ = click$ .buffer(click$.debounce(250)) .map((buffer) => buffer.length) .filter((length) => length >= 2)

multiClick$.subscribe( (numberOfClicks) => console.log(`${numberOfClicks} clicks`))

Page 9: À la découverte des observables

#DevoxxFR @nicoespeon

Pour aller plus loin

‣ The introduction to Reactive Programming you've been missing

‣ RxJS Functions with Examples

‣ Using Observables in real life

‣ Testing reactive code

‣ Reactive Programming - What is RxJS? (lessons)

‣ The whole future declared in a var (video)

‣ Dynamics of Change - Why Reactivity matters (PDF)

‣ Reactive Extensions (Rx.js) Workshop (kata)

Page 10: À la découverte des observables

#DevoxxFR @nicoespeon

Rx.Observable.of('Thanks')