23
@florentduveau #fluxdevoxx2015 Flux, l’architecture de Facebook @florentduveau Développeur chez Xebia

FLux, l'architecture de Facebook - Devoxx 2015

Embed Size (px)

Citation preview

Page 1: FLux, l'architecture de Facebook - Devoxx 2015

@florentduveau#fluxdevoxx2015

Flux, l’architecture de Facebook

@florentduveau

Développeur chez Xebia

Page 2: FLux, l'architecture de Facebook - Devoxx 2015

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

Quand j’étais petit (2005)

Page 4: FLux, l'architecture de Facebook - Devoxx 2015

Ce que je faisais au quotidien avec Spring

Page 5: FLux, l'architecture de Facebook - Devoxx 2015

2012

Page 6: FLux, l'architecture de Facebook - Devoxx 2015

Comment gérer l’état de l’application ?

Page 7: FLux, l'architecture de Facebook - Devoxx 2015

Backbone

Architecture = un bon gros bordel

MVC ? MVP ? MV????

Page 8: FLux, l'architecture de Facebook - Devoxx 2015

AngularMVC ? MVVM ? MVW???

Architecture = un bon gros bordel

Page 9: FLux, l'architecture de Facebook - Devoxx 2015

ReactLibrairie Javascript pour construire des composants

Page 10: FLux, l'architecture de Facebook - Devoxx 2015

Flux : Qui ? Quand ? Comment ? Pourquoi ?

Page 11: FLux, l'architecture de Facebook - Devoxx 2015

2011 - Palo Alto - Equipe de développement du chat

Page 12: FLux, l'architecture de Facebook - Devoxx 2015

Comment garder la cohérence de l’état ?

Page 13: FLux, l'architecture de Facebook - Devoxx 2015

Surtout sur la notification des messages non lus !!!

Page 14: FLux, l'architecture de Facebook - Devoxx 2015

Architecture initiale

problème !

Page 15: FLux, l'architecture de Facebook - Devoxx 2015

La bonne idée

Page 16: FLux, l'architecture de Facebook - Devoxx 2015

F L U X

Page 17: FLux, l'architecture de Facebook - Devoxx 2015

F L U X

Page 18: FLux, l'architecture de Facebook - Devoxx 2015

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

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

F L U X

4 Composants Des évènements

Page 21: FLux, l'architecture de Facebook - Devoxx 2015

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

F L U XLa foire aux frameworks

RefluxJS

Fluxy delorean

Page 23: FLux, l'architecture de Facebook - Devoxx 2015

@YourTwitterHandle@YourTwitterHandle@florentduveau#fluxdevoxx2015

Q & A