programmation réactive - aurélien...
TRANSCRIPT
![Page 1: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/1.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Programmation Réactive
Principes fondamentaux et application au Web
1
![Page 2: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/2.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Plan
‣ Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation réactive et Web ‣React
2
![Page 3: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/3.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Qu’est ce que la programmation réactive ?
Une approche visant à mieux gérer les flux Deux types de flux ‣Des événements discrets : frappe clavier ‣Des évènements continus ou comportements : position souris
Idée : dépasser les callbacks ou le patron Observer.
3
![Page 4: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/4.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Ou avez vous vu ça ?
4
http://www.hanselsolutions.com/blog/surf-talk/shiny-surf.html#/9
![Page 5: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/5.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Ou avez vous vu ça ?
5
http://www.hanselsolutions.com/blog/surf-talk/shiny-surf.html#/9
![Page 6: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/6.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Ou avez vous vu ça ?
6
http://www.hanselsolutions.com/blog/surf-talk/shiny-surf.html#/9
![Page 7: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/7.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Pourquoi la programmation réactive ?
‣Gestion d’évènements et de l’asynchrone ‣Faible latence (contraintes sur les temps de réponse) ‣Flux de données importants (et rapides). ‣Tolérance aux fautes
7
![Page 8: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/8.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Exemples
À vous
8
![Page 9: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/9.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Pourquoi la prog. réactive sur le Web ?
9
![Page 10: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/10.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Les bibliothèques Javascript
10
![Page 11: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/11.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Plan
‣ Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation réactive et Web ‣React
11
![Page 12: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/12.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Les principes de base
‣Responsive, ‣Résilient, ‣Élastique, ‣Orienté message
12
![Page 13: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/13.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Responsive
‣Réponse en temps voulu, si possible ‣Temps de réponses rapides et fiables (limites hautes)
13
![Page 14: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/14.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Résilient
‣Résiste à l’échec ‣Principes :
Réplication, conteneurs, isolement, délégation ‣On fait en sorte qu’un échec n’impacte qu’un seul
composant
14
![Page 15: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/15.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Élastique
Le système reste réactif en cas de variation de la charge de travail. ‣Pas de point central ‣Pas de goulot ‣Distribution des entrées entre composants
15
![Page 16: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/16.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Message Driven
‣Passage de messages asynchrones-> Couplage faible, isolation ‣Pas de blocage, les composants consomment les
ressources quand ils peuvent
16
![Page 17: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/17.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Plan
‣ Introduction ‣Les principes de la programmation réactive ‣En pratique les transformations de flux ‣Programmation réactive et Web ‣React
17
![Page 18: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/18.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Un concept important : l’immuabilité
Objet immuable (Immutable object) ‣Objet dont l'état ne peut pas être modifié après sa création ‣Opposé d’objet variable
Facilite la prog. purement fonctionnelle (pratique pour plein de choses, évite les effets de bords, facilite le undo) Une seule source de “vérité” Facilite le caching Mais ce n’est pas forcément assez : https://codewords.recurse.com/issues/six/immutability-is-not-enough
18
![Page 19: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/19.jpg)
Interaction Design – SS2012Aurélien Tabard - Université Claude Bernard Lyon 1
Un exemple de transformation
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
![Page 20: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/20.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Where
20
![Page 21: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/21.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Select
21
![Page 22: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/22.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
SelectMany : plusieurs flux
22
![Page 23: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/23.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Throttle
23
![Page 24: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/24.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Plan
‣ Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation réactive et Web ‣React
24
![Page 25: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/25.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Pourquoi React ?
25
![Page 26: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/26.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Des composants
26
![Page 27: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/27.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Un DOM Virtuel
27
![Page 28: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/28.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Le principe : un flux unidirectionnel
28
![Page 29: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/29.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Deux façons de gérer les données
‣Données qui changent (mutable) : on utilise un état (state) ‣Données qui ne changent pas (immutable) : on utilise des propriétés (props)
‣On essaie de minimiser les données qui changentquitte à refaire des calculs
29
![Page 30: Programmation Réactive - Aurélien Tabardtabard.fr/cours/2017/M1IF13/ReactiveProgramming.pdf‣Introduction ‣Les principes de la programmation réactive ‣Exemples ‣Programmation](https://reader036.vdocuments.site/reader036/viewer/2022081523/5fe02a0612390f6e5264c28c/html5/thumbnails/30.jpg)
Aurélien Tabard - Université Claude Bernard Lyon 1
Un exemple d’application React + Backbone
30