Nowadays applications become larger, more complicated and grow faster than ever. As a result, we need nicely decoupled, more maintainable codebase. This is where Flux comes in handy. It encourages one-way data binding, which simplifies reasoning about application flow a lot and removes spaghetti dependencies between components. So is MVC the easy approach and Flux the simple one?

1. FLUX
new/old approach to building frontend
Bartek Witczak

2. JAVA
+
DOJO

4. EASY TO EXTEND

7. REACT
a javascript library for building user interfaces

8. const Talk = React.createClass({
render: () => {
return (
<div>
<h1>Flux - new/old approach to building frontend</h1>
<h4>Room: 123</h4>
<p>We all know that in Javascript world ...</p>
<p>Bartlomiej Witczak, Eager to learn</p>
</div>
);
}
});

9. REACT
Virtual DOM
Updates DOM efficiently
Performance boost

10. NOT (ONLY) ABOUT DOM

12. ARCHITECTURE

13. ViewAction Controller Model
MV*

14. ViewAction Controller Model
ViewModel
ViewModel
ViewModel
ViewModel
MV*

16. Action
Dispatcher
Store
View

17. Action
Dispatcher
Store
View
Action
+
Action creator
Action:
• type
• data
• event like object
Action creator:
•semantic methods

18. Action
Dispatcher
Store
View
Action
+
Action creator
const actionsFactory = (dispatcher) => {
return {
showTalkDetails: (id) => {
dispatcher.dispatch({
type: EVENTS.SHOW_TALK_DETAILS,
talkId: id
});
}
};
};

19. Action
Dispatcher
Store
View
Dispatcher
• broadcast actions
• all actions go through dispatcher
• fan out actions to stores
• similar to EventEmitter

20. Action
Dispatcher
Store
View
Dispatcher API
const Dispatcher = {
dispatch: function(payload){...},
register: function(callback){...},
unregister: function(id){...},
waitFor: function(ids){...}
};

21. Action
Dispatcher
Store
View
Store
• business logic block
• manages state itself
• place of truth

22. Action
Dispatcher
Store
View
Store
const actions = {
[SHOW_TALK_DETAILS]: function(action) {
this.talk =
fetchTalkDetails(action.talkId);
this.emit(EVENTS.CHANGED);
}
};

23. Action
Dispatcher
Store
View
Store
const talkStoreFactory = (dispatcher) => {
const store = {
__proto__: new EventEmitter(),
dispatchToken:
dispatcher.register((action) => {
const handler = actions[action.type];
if (handler) {
handler.call(store, action);
}
})
};
return store;
};

24. Action
Dispatcher
Store
View
View
• React building block
• based on store data
• “stateless” component

25. Action
Dispatcher
Store
View
View
const TalkComponent = React.createClass({
...
render: () => {
return (
<div>
<h1>{this.props.talk.title}</h1>
<h4>Room: {this.props.talk.room}</h4>
<p>{this.props.talk.description}</p>
<hr>
<p>{this.props.talk.speaker}</p>
</div>
);
}
});

26. Action
Dispatcher
Store
View

27. Action
Dispatcher
Store
View

28. ViewAction Controller Model
ViewModel
ViewModel
ViewModel
ViewModel
MV*

29. ActionDispatcher Store View
FLUX TO THE RESCUE

30. ActionDispatcher Store View
Action
Action
Action
Action
View
View
View
View
Store
Store
Store
Store
FLUX

32. ANY FLAWS?

33. UNIDIRECTIONAL
DATA
FLOW
TO
THE
RESCUE

34. GET IN TOUCH
Bartek Witczak
@bartekwitczak
bartekwitczak.com