Introduction au concept des Observables pour manipuler les flux d’événements asynchrones, simplement. Quickie présenté à Devoxx 2017.

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

2. #DevoxxFR @nicoespeon
Pour ceux qui n’en ont jamais manipulé
Pour apprendre ce que c’est
Pour comprendre à quoi ça sert
1 2 3

3. #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énements
http://reactivex.io/
Microsoft
Java, JS, Scala,
Python, Swift…
Opérateurs
Marble Diagrams
Dans le code
http://rxmarbles.com/
Intérêts ?
Code déclaratif
Simple et composable
Manipuler flux
événements asynchrones
temps
// -1----2-4---X--|->

4. #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

5. #DevoxxFR @nicoespeon
let numberOfClicks = 0
let handleClicksTimeout
document.addEventListener('click', () => {
clear(handleClicksTimeout)
numberOfClicks++
handleClicksTimeout = setTimeout(() => {
if (numberOfClicks >= 2) {
console.log(`${numberOfClicks} clicks`)
}
numberOfClicks = 0
}, 250)
})
Exemple : clics multiples

6. #DevoxxFR @nicoespeon
click$
multiClick$
buffer(click$.debounce(250))
map(x => x.length)
1 5 11 2 1
filter(x => x >= 2)
5 2

7. #DevoxxFR @nicoespeon
Exemple : clics multiples
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`)
)
1 2 1 3 1
2 3

8. #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`)
)

9. #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)

10. #DevoxxFR @nicoespeon
Rx.Observable.of('Thanks')