@florentduveau#fluxdevoxx2015
Flux, l’architecture de
Facebook
@florentduveau
Développeur chez Xebia
Un peu d’histoire…
« Celui qui ne sait pas d’où il vient ne peut savoir où il va »

- Google
Quand j’étais petit (2005)
Ce que je faisais au quotidien avec Spring
2012
Comment gérer l’état de l’application ?
Backbone
Architecture = un bon gros bordel
MVC ? MVP ? MV????
Angular
MVC ? MVVM ? MVW???
Architecture = un bon gros bordel
React
Librairie Javascript pour construire des composants
Flux : Qui ? Quand ? Comment ? Pourquoi ?
2011 - Palo Alto - Equipe de développement du chat
Comment garder la cohérence de l’état ?
Surtout sur la notification des messages non lus !!!
Architecture initiale
problème !
La bonne idée
F L U X
F L U X
F L U X
Les avantages :
•C’est simple (workflow unidirectionnel)
•Séparation entre les données et l’état de la vue
•Debug ...
F L U X
L’implémentation
var Dispatcher = {

_callbacks : { },
register: function (callback) {… return id;} // Ajout callb...
F L U X
4 Composants Des évènements
F L U X
Pourquoi s’y intéresser ?
•Enfin une réponse concrète aux problématiques d’architecture front
•Une réponse apporté...
F L U X
La foire aux frameworks
RefluxJS
Fluxy delorean
@YourTwitterHandle@YourTwitterHandle@florentduveau#fluxdevoxx2015
Q & A
Prochain SlideShare
Chargement dans…5
×

FLux, l'architecture de Facebook - Devoxx 2015

775 vues

Publié le

Vous n’êtes pas convaincu par les architectures web existantes ? Vous vous dites qu’on peut mieux faire ? Venez découvrir Flux en 15min, l’architecture web moderne poussée par Facebook !
Speaker : Florent Duveau à Devoxx France

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
775
Sur SlideShare
0
Issues des intégrations
0
Intégrations
33
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

FLux, l'architecture de Facebook - Devoxx 2015

  1. 1. @florentduveau#fluxdevoxx2015 Flux, l’architecture de Facebook @florentduveau Développeur chez Xebia
  2. 2. Un peu d’histoire… « Celui qui ne sait pas d’où il vient ne peut savoir où il va »
 - Google
  3. 3. Quand j’étais petit (2005)
  4. 4. Ce que je faisais au quotidien avec Spring
  5. 5. 2012
  6. 6. Comment gérer l’état de l’application ?
  7. 7. Backbone Architecture = un bon gros bordel MVC ? MVP ? MV????
  8. 8. Angular MVC ? MVVM ? MVW??? Architecture = un bon gros bordel
  9. 9. React Librairie Javascript pour construire des composants
  10. 10. Flux : Qui ? Quand ? Comment ? Pourquoi ?
  11. 11. 2011 - Palo Alto - Equipe de développement du chat
  12. 12. Comment garder la cohérence de l’état ?
  13. 13. Surtout sur la notification des messages non lus !!!
  14. 14. Architecture initiale problème !
  15. 15. La bonne idée
  16. 16. F L U X
  17. 17. F L U X
  18. 18. 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
  19. 19. F L U X L’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
  20. 20. F L U X 4 Composants Des évènements
  21. 21. F L U X Pourquoi 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 »
  22. 22. F L U X La foire aux frameworks RefluxJS Fluxy delorean
  23. 23. @YourTwitterHandle@YourTwitterHandle@florentduveau#fluxdevoxx2015 Q & A

×