La Programmation Réactive Et CycleJS

RxJS CycleJS

Benoit Averty — @Kaidjin

zenika

Quelques rappels théoriques

Promis, pas trop

	Singulier	Pluriel
Pull / Spatial :	Fonction	Itérateur
Push / Temporel :	Promise	Observable


myObservable.subscribe(
	data => {
		if (data >= 42) {
			const modifiedData = data / 2
			doSomethingWith(modifiedData)
		}
	}
)

// Ou dans un style plus fonctionnel :
myObservable
	.filter(data => data >= 42)
	.map(data => data / 2)
	.subscribe(doSomethingWith)

RxJS

Des Observables :


const observable1 = Rx.Observable.from([1, 2, 3, 4]);
const observable2 = Rx.Observable.interval(1000);

const observable3 = Rx.Observable.create(observer => {
	fetch("https://jsonplaceholder.typicode.org/posts/1")
		.then(resp => resp.json())
		.then(body => {
			observer.next(body)
			observer.complete()
		)
		.catch(err => observer.error(err))
});

Des Observateurs


const observable = ...
observable.subscribe({
	next: x => console.log(`Observable sent a value: ${x}`),
	error: err => console.error(`Observable sent an error: ${err}`),
	complete: () => console.log('Observable is complete')
});


const modifiedObservable = myObservable
	.filter(x => x > 10)


const modifiedObservable = myObservable
	.map(x => x * 10)


const modifiedObservable = Rx.Observable.merge(
	observable1,
	observable2
)


const modifiedObservable = myObservable
	.delay(1000)


const modifiedObservable = myObservable
	.debounce(1000)

La Programmation Réactive Et CycleJS Benoit Averty — @Kaidjin Benoit Averty Développeur chez Zenika Aime explorer les nouveaux paradigmes, en particulier programmation fonctionnelle et plus récemment réactive.

La Programmation Réactive Et CycleJS

Quelques rappels théoriques

Programmation Réactive Fonctionelle =
Design pattern Observer en tant que paradigme

RxJS

Des Observables :

Des Observateurs

Des Opérateurs

Un lot de prise de tête !

Revenons à la base !

Cycle.js

Drivers

Merci !