FLux, l'architecture de Facebook - Devoxx 2015

@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????

AngularMVC ? MVVM ? MVW???

Architecture = un bon gros bordel

ReactLibrairie 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 & Tests Unitaires simplifiés

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

F L U X

4 Composants Des évènements

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 »

F L U XLa foire aux frameworks

RefluxJS

Fluxy delorean

@YourTwitterHandle@YourTwitterHandle@florentduveau#fluxdevoxx2015

Q & A