Transcript
#DevoxxFR @nicoespeon
À la découverte des Observables
Nicolas Carlo @nicoespeon
1 2 3 4
#DevoxxFR @nicoespeon
Pour ceux qui n’en ont jamais manipulé
Pour apprendre ce que c’est
Pour comprendre à quoi ça sert
1 2 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é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--|->
#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
#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
#DevoxxFR @nicoespeon
click$
multiClick$
buffer(click$.debounce(250))
map(x => x.length)
1 5 11 2 1
filter(x => x >= 2)
5 2
#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
#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`))
#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)
#DevoxxFR @nicoespeon
Rx.Observable.of('Thanks')
top related