FLux, l'architecture de Facebook - Devoxx 2015
-
Upload
xebia-france -
Category
Software
-
view
144 -
download
2
Transcript of FLux, l'architecture de Facebook - Devoxx 2015
![Page 1: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/1.jpg)
@florentduveau#fluxdevoxx2015
Flux, l’architecture de Facebook
@florentduveau
Développeur chez Xebia
![Page 2: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/2.jpg)
Un peu d’histoire…
« Celui qui ne sait pas d’où il vient ne peut savoir où il va » - Google
![Page 3: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/3.jpg)
Quand j’étais petit (2005)
![Page 4: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/4.jpg)
Ce que je faisais au quotidien avec Spring
![Page 5: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/5.jpg)
2012
![Page 6: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/6.jpg)
Comment gérer l’état de l’application ?
![Page 7: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/7.jpg)
Backbone
Architecture = un bon gros bordel
MVC ? MVP ? MV????
![Page 8: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/8.jpg)
AngularMVC ? MVVM ? MVW???
Architecture = un bon gros bordel
![Page 9: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/9.jpg)
ReactLibrairie Javascript pour construire des composants
![Page 10: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/10.jpg)
Flux : Qui ? Quand ? Comment ? Pourquoi ?
![Page 11: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/11.jpg)
2011 - Palo Alto - Equipe de développement du chat
![Page 12: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/12.jpg)
Comment garder la cohérence de l’état ?
![Page 13: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/13.jpg)
Surtout sur la notification des messages non lus !!!
![Page 14: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/14.jpg)
Architecture initiale
problème !
![Page 15: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/15.jpg)
La bonne idée
![Page 16: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/16.jpg)
F L U X
![Page 17: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/17.jpg)
F L U X
![Page 18: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/18.jpg)
F L U X
Les avantages :
•C’est simple (workflow unidirectionnel)
•Séparation entre les données et l’état de la vue
•Debug & Tests Unitaires simplifiés
![Page 19: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/19.jpg)
F L U XL’implémentation
var Dispatcher = { _callbacks : { },
register: function (callback) {… return id;} // Ajout callback au catalogue unregister: function (id) {…} // Suppression callback du catalogue dispatch: function (action) {…} // Emission action aux callbacks waitFor: function (ids) {…} // Attente d’autres callbacks avant execution … });
Le DISPATCHER
![Page 20: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/20.jpg)
F L U X
4 Composants Des évènements
![Page 21: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/21.jpg)
F L U XPourquoi s’y intéresser ?
•Enfin une réponse concrète aux problématiques d’architecture front
•Une réponse apportée suite à un problème réel (Chat de Facebook)
•Architecture orientée évènements, générique et hautement « customisable »
![Page 22: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/22.jpg)
F L U XLa foire aux frameworks
RefluxJS
Fluxy delorean
![Page 23: FLux, l'architecture de Facebook - Devoxx 2015](https://reader033.fdocuments.fr/reader033/viewer/2022051516/55a58c001a28ab3c528b457d/html5/thumbnails/23.jpg)
@YourTwitterHandle@YourTwitterHandle@florentduveau#fluxdevoxx2015
Q & A