O documento apresenta os conceitos de Flux e MVC para arquitetura de aplicações frontend. Explica que Flux é uma arquitetura de fluxo de dados unidirecional entre eventos, Dispatcher e Stores para manter o estado da aplicação. Já MVC separa a aplicação em Model, View e Controller, onde Model mantém os dados, View exibe a interface e Controller faz a comunicação entre eles.

1. Facebook
Flux

2. Hello!
Jonathan Sedrez
Frontend | ilegra
2

3. 3

4. “Arquitetura de
aplicações para
construir interfaces de
usuário
4

5. 5

6. Flux
Flux é utilizado para criar aplicaçẽs client-side que trabalhem
de forma reativa. Basicamente uma forma de fluxo
unidirecional de dados entre eventos e ouvintes.
6

7. 7
MVC
Model - View - Controller

8. MVC
Model
Mantém os dados e o
comportamento de um
aplicativo
View
Exibe a model na
interface do usuário
Controller
Serve como uma
interface entre os
componentes de
visualização e modelo
8

9. 9
Model
View
Controller
Display
Manipula
Requisição
Render

10. 10
Controller
Action Model View

11. 11
Controller
Action Model View
Model
Model
Model
Model
View
View
View
View

12. Flux
12

13. 13
Dispatcher
Action Store View
Action

14. Flux
Flux é como um framework que você precisa carregar
para começar a usar. Porém, na verdade o que o
Facebook fez foi: pegar uma coisa chamada fluxo de
dados unidirecional, separar em partes, adicionar um
cara chamado Dispatcher e chamar isso tudo de Flux.
14

15. 15
Dispatch
const Dispatcher = require('flux').Dispatcher;
15

16. 16
Dispatch
handleSave: function() {
const titulo = this.refs.taskName.getDOMNode().value;
AppDispatcher.dispatch({
type: 'novo-item',
data: { titulo: titulo }
});
}
16

17. 17
Store
const _tasks = [];
const TaskStore = {
getAll: function(){
return {
tasks: _tasks
};
},
};
17

18. 18
Store
const TaskStore = {
dispatcherIndex: AppDispatcher.register(function(payload) {
switch(payload.type) {
case 'novo-item':
_tasks.push(payload.data);
break;
case 'delete-item':
//lógica para deletar
break;
}
})
};
18

19. Flux não é exclusivo para React!
19

20. 20

21. Conclusão
21

22. Obrigado!
Duvidas?
22