O que é Flux?
Flux é uma arquitetura usada pelo Facebook junto com o framework React.
Mas, talvez seja mais fácil começar falando o que Flux não é e com o que ele não deve ser comparado para facilitar o entendimento!
Flux não é um framework ou biblioteca.
Comparemos ele com a arquitetura MVC.
No lugar de dividir a aplicação entre Model, View e Controller, com Flux há a sugestão de dividir em Stores, Dispatcher, Views, Action/Action Creators.
Uma visão simples da construção desse fluxo seria algo como:
Talvez já tenha visto algumas imagens como essa quando estava tentando entender MVC.
E geralmente vinham com uma explicação de cada item, exatamente como farei agora:
- Views – A interface do usuário, renderiza e cuida das interações com o usuário, de onde partirá os callbacks para criar as actions.
- Actions – Eventos que passam os dados para o dispatcher.
- Dispatcher – Recebe os dados e envia para todos os stores registrados para ouvir àquela action.
- Stores – Recebe as actions contendo os dados e emite eventos, eventos estes que irão atualizar os dados dos states, fazendo com que as views sejam renderizadas novamente.
Destrinchando a teoria
Fluxo
Quando um evento ocorre, por exemplo:
Adicionar um novo item a uma lista.
Há uma função de callback, que criará uma action com os dados necessários e envia como um objeto para o dispatcher.
O dispatcher, que tem registrado qual store receberá tal action, envia os dados para a mesma.
E assim, como a store é onde toda a lógica do negócio está, irá atualizar a view retornando os novos valores.
Funciona bem para o estilo de programação do React.
Já que as stores enviam updates sem a necessidade de detalhar como será a transição entre states e views.
Isso prova o padrão do Flux que segue um fluxo de dados unidirecional.
A action, dispatcher, store e view são independentes com entradas e saídas específicas.
Os dados passam pelo dispatcher, que gerencia e age como um registro de todos os callbacks que as stores respondem.
As stores emitem a mudança que será pega pelas views.
Cada store registra um callback com o dispatcher.
Sempre que algum dado entra, o dispatcher é o responsável para visualizar a action que está registrada e enviar para a store que fez o registro.
Por sua vez, retorna o resultado que, atualizando os dados, faz com que os componentes que tenham ligação com a store, sejam novamente renderizados com as novas informações!
Comparação com o MVC e o Facebook
Para muitos, o primeiro contato com uma arquitetura extremamente conhecida e poderosa é a do MVC.
Que consiste basicamente de Model, que cuidará dos dados da aplicação View.
Representa a interface do usuário.
Por fim, o controller, que usa das entradas do usuário para manipular o model e atualiza a view com o novo conteúdo.
É um Fluxo simples, mas que rendeu uma grande dor de cabeça ao Facebook.
Por terem uma base de dados gigantesca, fazia com que cada pequena mudança, houvesse um efeito cascata de funções.
O problema foi apontado como sendo comunicação bidirecional do MVC.
Já que o fluxo sempre segue a mesma linha, usuário usa o controller que manipula o model, assim atualizando a view que chega aos olhos do usuário.
Quantas vezes no próprio trabalho encontramos telas que tem que tomar o maior cuidado possível?
Por ser tão poderosa que, na menor mudança, chamaria tantas funções em sequência que ficaria difícil até mesmo debugar o código e realmente entender o que está sendo feito.
Para resolver o problema da comunicação bidirecional, o mesmo foi trocado por um fluxo unidirecional.
Onde, para uma comparação mais direta:
| MVC | Flux |
| Fluxo de dados bidirecional | Fluxo de dados unidirecional |
| Ligação de dados é a chave | Events e actions são as partes principais |
| Os controllers cuidam da lógica do negócio | A store faz todos os cálculos |
| Síncrono | Pode ser implementado de forma completamente assíncrona! |
| Uma arquitetura conhecida usada por diversas empresas e muitos projetos | Ajuda a resolver problemas complexos que o MVC não corrigia facilmente |
Exemplo em código – TodoList
Certo!
Destrinchamos bastante da teoria, mas ela sem prática não fixa bem, então vamos ao fluxo de informações no código, parte por parte.
Usaremos partes do código de uma TodoList (lista de afazeres) que está no repositório do Facebook!
Começamos carregando a lista:
Com a lista carregada, iremos carregar um novo item para a lista, com o componente fazendo um callback:
Acompanhemos a função “_onSave”!
O nosso callback chamará o metodo que irá criar a nossa action!
Finalmente, chegamos em nossa action, ela receberá o texto a ser adicionado, após isso irá passar para o dispatcher!
O dispatcher irá passar a action para as stores, entrando onde a action estiver registrada!
E aqui é onde a mágica acontece, na store finalmente a mudança é feita!
Certo, mudança feita, precisamos levar a mudança novamente para a nossa interface, e fazemos isso emitindo um changeEvent:
E claro, teremos o código para atender esse evento.
Onde o componente que está ouvindo mudanças, irá mudar o estado.
E como toda boa mudança em React, irá renderizar o componente na view novamente com o novo valor que será visualizado pelo usuário!
Flux é melhor que MVC?
Não diria melhor.
A grande diferença seria as tecnologias escolhidas para desenvolvimento.
O Flux tem uma ótima sinergia com desenvolvimento web baseado em componentes, como React, Vue.js e Angular 2+.
No fim do dia, o melhor será espelhado nas decisões que a equipe fizer baseada no que tem mais familiarização.
Ou quando querem dar uma chance para uma tecnologia com um enorme potencial!
E considerando o tamanho que o React já tem, diria que ultrapassou o nível de tecnologia.
Hoje, está no tamanho certo de comunidade/estabilidade para você dedicar um tempo estudando, porque a demanda está gigante!
Para concluir
Hoje tentamos entender da melhor forma possível como esse novo padrão funciona.
Desde da teoria, até uma pequena olhada em como funciona no código.
E ter um novo padrão que muda nossa forma de desenvolver é uma das mágicas dessa área maravilhosa de desenvolvimento.
Sempre teremos algo novo para ver, estudar, testar e aplicar no nosso dia a dia!
Agora, ao dar uma olhadinha na página de vagas para desenvolvedores (tenho certeza que que já deve ter visto algumas, não é?), vagas de React geralmente vem com a palavrinha Redux junto.
Com certeza, destrincharemos essa biblioteca em uma próxima oportunidade!
Até!
