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

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

2. Un peu d’histoire…
« Celui qui ne sait pas d’où il vient ne peut savoir où il va »
- Google

3. Quand j’étais petit (2005)

4. Ce que je faisais au quotidien avec Spring

5. 2012

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

7. Backbone
Architecture = un bon gros bordel
MVC ? MVP ? MV????

8. Angular
MVC ? MVVM ? MVW???
Architecture = un bon gros bordel

9. React
Librairie Javascript pour construire des composants

10. Flux : Qui ? Quand ? Comment ? Pourquoi ?

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

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

13. Surtout sur la notification des messages non lus !!!

14. Architecture initiale
problème !

15. La bonne idée

16. F L U X

17. F L U X

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. 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. F L U X
4 Composants Des évènements

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. F L U X
La foire aux frameworks
RefluxJS
Fluxy delorean

23. @YourTwitterHandle@YourTwitterHandle@florentduveau#fluxdevoxx2015
Q & A