ReactiveX

Rx
Florent Le Gall @flornt
Développeur Full Stack

• EBIA ALLIANCE = XEBIA + XEBIALABS + THIGA + UX REPUBLIC + AKAMIS
2
• ReactiveX : les extensions réactives
• Le principe général
• Observer / Observable
• Les opérateurs courants
• Cold vs Hot
• Les sujets
• Les schedulers
Au programme

3
• Pourquoi ?
• Besoin de scalabilité : de plus en plus de
traitements sont distribués, l’approche
synchrone ne suffit plus.
• Besoin de temps réel : répondre
immédiatement à une demande
• Besoin de faciliter les changements dans
le code: découplage / composabilité /
flexibilité
La programmation réactive ?

4
• Pour quels cas d’utilisation ?
• Backend :
• Architectures micro-services
• Temps réel
• Haute scalabilité
• Frontend :
• Temps réel : monitoring, finance
• Applications très complexes
La programmation réactive ?

5
ReactiveX
• Un projet originellement issu du “Cloud
Programmability Group at Microsoft”
• Des contributeurs de :
• Netflix, Microsoft, Google, Trello
• Des principes communs :
• Observer, Observable, Opérations,
Subject, Scheduler…

6
ReactiveX
• Des bindings pour de nombreux langages et
plateformes :
• RxJava, RxJs, Rx.Net, RxScala, RxClojure,
RxCpp, Rx.rb, RxPy, RxGroovy, RxJRuby,
RxKotlin, RxSwift, RxNetty…
• Des APIs différenciées :
• Pour des styles de programmation
différents
• Pour des contraintes différentes

7
ReactiveX
• La documentation générale :
• http://reactivex.io/
• La documentation par langage
• RxJS : https://github.com/Reactive-
Extensions/RxJS/tree/master/doc

8
Les extensions réactives
Une seule valeur Plusieurs valeurs
Synchrone / Pull Fonction Itérable / Itérateur
Asynchrone / Push Promesse / Future Observable
Un paradigme différent

9
Les extensions réactives
Iterable (pull) Observable (push)
Récupérer des
données
T next() onNext(T)
Découvrir une erreur
T next() throws
Exception
onError(Exception)
complete if(!hasNext()) { return;} onCompleted()
Un paradigme différent

10
Le pattern Observer / Observable
• Observable :
• “Observable is a function that when
invoked return 0 - ∞ values between now
and the end of times.”
• Paul Taylor | Reactive 2015

11
• Observer :
• Une interface avec 3 méthodes
principales :
• onNext() : Récupère une donnée
• onCompleted() : Termine le traitement
• onError(Exception) : Termine le
traitement en erreur

12
• Observer :
• En pratique on n’appelle pas ces
méthodes soit même.
• On crée un observateur via :
• Rx.Observer.create([onNext], [onError],
[onCompleted])

13
• Observable :
• Permet d’enregistrer des observateurs
• Rx.Observable.prototype.subscribe([obs
erver] | [onNext], [onError],
[onCompleted])
• Rx.Observable.prototype.forEach([obser
ver] | [onNext], [onError],
[onCompleted])

14
• Observable :
• Mais pour l’instant, c’est juste le design
pattern Observer avec la gestion des
erreurs et des fins de traitement ?
• La richesse de Rx, ce sont ses opérateurs
• Transformer, combiner, manipuler et
travailler sur les séquences reçues.

15
• Les marble diagrams

16
Comment créer un observable ?
• À l’aide des opérateurs de création
• Implémentés sous forme de méthodes
statiques sur Observable

17
Créer : Create

18
Créer : From

19
Créer : From
• Permet de créer un observable depuis :
• fromCallback(): Une callback
• fromEvent(input, ‘change’): Un évènement
HTML
• fromNodeCallBack() : Une callback Node
• fromPromise() : Une promesse
• of(1,2,3) : Une liste de valeurs
• ofObjectChanges(obj) : Les changements
observés par obj.observe().

20
Créer : Just

21
Créer : Empty

22
Créer : Never

23
Créer : Throw

24
Créer : Timer

25
Créer : Interval

26
Créer : Repeat

27
Créer : Range

28
Comment transformer ?
• À l’aide des opérateurs de transformation
• Implémentés sous forme de méthodes sur
Observable
• Ces méthodes renvoient toutes un
observable

29
Transformer : Map
• Prend en paramètre une fonction qui :
• Reçoit un item
• Renvoie un item transformé

30
Transformer : FlatMap
• Prend en paramètre une fonction qui :
• Reçoit un item
• Renvoie un observable
• Aplatit (flatten) le résultat

31

32

33
• C’est une monade !

34
Transformer : Scan

35
Filtrer : Filter

36
Filtrer : Distinct

37
Comment combiner ?
• Opérateurs de fusion (merge)
Observable
• Ces méthodes:
• Prennent en paramètre un autre
observable
• Renvoient un observable

38
Combiner : Merge

39
Combiner : Zip

40
Comment agréger ?
• Opérateurs d’agrégation
Observable
• Ces méthodes renvoient un observable
• Qui émettra deux évènements :
• onNext() avec la valeur finale
• onCompleted()
• Ou bien seulement onError() en cas
d’erreur

41
Agréger : Count

42
Agréger : Max/Min/Sum/Average

43
Agréger : Reduce

44
• Que faire quand on reçoit beaucoup plus
d’évènements qu’on ne peut en traiter ?
• Attendre la fin de la tempête et traiter à
ce moment là ?
• Échantilloner ?
• Regrouper les évènements ?
• Appliquer de la conflation ?
BackPressure

45
BackPressure : Throttle/Debounce

46
BackPressure : Buffer

47
BackPressure : Sample

48
ControlledObservable

49
Hot or Cold ?
• Un observable “chaud” :
• N’attend pas qu’un observateur se
connecte pour émettre
• À la connexion, on ne reçoit que les
nouveaux évènements
• Exemple :
• Un flux d’information (logs, finance …)
• Des évènements IHM

50
Hot or Cold ?
• Un observable “froid” :
• Attend qu’un observateur se connecte
pour émettre
• À la première connexion, l’observateur
reçoit tous les évènements
• Exemple :
• Une lecture de fichier
• Une requête Http
• Une requête SQL

51
“Cold” : risque d’effets de bord
• Un observable “froid” peut être soumis aux
effets de bord lors de la souscription
• Lorsque l’on appelle subscribe(), on doit
garantir que chaque observateur va obtenir
l’ensemble des résultats

52
• Comment garantir ce contrat ?
• Conserver tous les évènements ?
• Faisable, mais coûteux
• Relancer l’opération à chaque connexion
d’un observateur ?
• C’est l’implémentation choisie par la
plupart des observables “froids”
• Il y’a donc un effet de bord possible

53
• http://davesexton.com/blog/post/Hot-and-
Cold-Observables.aspx
• https://social.msdn.microsoft.com/Forums/
en-US/14a62f80-a010-4e60-b852-
c7991a57fb07/its-hard-to-reason-
about-publish

54
Cold -> Hot ?
• Convertir un observable “froid” en “chaud”
• Publish

55
Hot -> Cold ?
• Convertir un observable “chaud” en “froid”
• Defer
• Rx.Observable.defer(observableFactory)

56
Subject
• À la fois un observable et un observateur
• Comme c’est un observateur :
• Il peut s’abonner à un ou plusieurs
observables
• Comme c’est un observable, il peut ré-
émettre les évènements qu’il observe et en
renvoyer d’autres.
• Les sujets sont des observables “chauds”

57
AsyncSubject
• AsyncSubjet permet de capturer la valeur
finale d’un traitement asynchrone

58
AsyncSubject

59
AsyncSubject

60
• BehaviorSubject est utilisé pour
implémenter un état
BehaviorSubject

61
BehaviorSubject

62
BehaviorSubject

63
• ReplaySubject est utilisé pour implémenter
un historique
ReplaySubject

64
Schedulers
• Les schedulers sont utilisés pour définir un
contexte d’exécution
• Dans le monde Java / .Net
• Dans quel thread est notifié mon
observable / observateur ?
• Dans le monde JS
• Execution immédiate ?
• setTimeout ?
• requestAnimationFrame ?

65
Schedulers - ObserveOn
• Définit le contexte d’execution des
observateurs d’un observable

66
Schedulers - SubscribeOn
• Définit le contexte d’execution des
opérateurs d’un observable

67
• Quelques tutoriels:
• https://github.com/jhusain/learnrxjava/
(Jafar Husain | Netflix)
• http://reactivex.io/learnrx/ (JS - Jafar
Husain | Netflix)
• https://github.com/mattpodwysocki/
RxJSKoans (JS)
Pour approfondir

68
• Une publication
• Your mouse is a database (Erik Meijer /
Microsoft) : http://queue.acm.org/
detail.cfm?id=2169076
• Une vidéo
• Asynchronous Javascript at Netflix (Jafar
Husain) : https://www.youtube.com/
watch?v=XRYN2xt11Ek
Pour approfondir

69
• Des MOOC
• http://app.pluralsight.com/courses/
reactive-programming-java-8-rxjava
• https://www.coursera.org/course/reactive
Pour approfondir

70
• Le pattern Observable/Observer peut
s’appliquer à tout
• Rx est un outil très riche
• … qui demande une certaine maîtrise
Pour conclure

71
• Anatomie d’une application frontend RxJS
Next time !

72
Questions
?

ReactiveX

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

ReactiveX