Os Estados do Flux

Yan Magalhães

Full Stack Web Developer na

Agenda

  • Arquitetura de Software
  • MVC
  • Nasce o Flux
  • Flux Implementations
  • Redux

1.

Arquitetura de Software

Desenvolver Software é complexo.

  • Planejar a estrutura de dados.
  • Entendimento do problema a ser resolvido.
  • Criar uma estrutura de código que possibilite uma evolução do sistema.
  • Escalabilidade
  • Performance
  • UX

Alguns Motivos

Adotar os princípios e boas práticas de Arquitetura de Software.

O  MVC

Modelo criado na década de 1970, com a proposta de separação da interface do usuário, com as regras de negócio do sistema.

Características

  • Separação de responsabilidades
  • Separação das regras de negócio da camada de visualização
  • A criação de um sistema pode ser feita de forma separada
  • Modelo flexível (MVP, MVVM)
  • Grande utilização nas linguagens e frameworks Back-End

Mas e no front end?

Algumas diferenças:

  • O model acaba notificando a view sobre as mudanças
  • As ações na view podem acontecer por vários pontos, não existe um único ponto de entrada
  • Podem existir diversos tipos de dados que podem ser trafegados

Pontos levantados:

  • Funciona perfeitamente bem para aplicações menores.
  • Em aplicações maiores, por conta do modelo, demora-se um certo tempo para o entendimento do sistema.
  • Fluxo Bidirecional 
  • Difícil visualizar o fluxo da aplicação
  • Ações tornam-se difíceis de serem mapeadas
  • Difícil de reproduzir alguns problemas
  • Algumas ações podem gerar mudanças em cascata
  • O sistema torna-se imprevisível

Vamos criar um novo modelo \o/

2.

O surgimento do Flux

Flux

Modelo de arquitetura fundamento no conceito Single Direction Data Flow.

Vamos ver código?

Características:

  • Fluxo único de dados.
  • Sem alterações em cascata
  • Previsível
  • Mais fácil de testar e reproduzir um determinado estado
  • Ações mais semânticas e descritivas
  • Toda a lógica esta concentrada em um único local
  • Pode ser usado em pequenas e grandes aplicações
  • Mais explícito
  • View != REACT

A adoção da comunidade \o/

https://codetalks.net/como-%C3%A9-programar-em-javascript-em-2016-9c9b3c12cea8#.eawvqb94z

https://github.com/voronianski/flux-comparison

http://fluxxor.com/

http://alt.js.org/

http://redux.js.org/

3.

O famoso Redux

Redux

Criado por Dan Abramov, é um container de estados previsíveis para aplicações JS

Algumas particularidades:

  • Hot Reloading e Time Travel Debugging
  • Possui uma única Store
  • Não possui Dispatcher
  • Funções Puras
  • Dados imutáveis
  • Influenciado pela linguagem Elm
  • Influenciado pelas libraries que implementaram a arquitetura

Elementos

  • Actions
  • Store
  • Reducers
  • Views(root component)

Vamos ver código?

Finalizando ...

NÃO!

DEFINITIVAMENTE, NÃO!

Porém, contudo...

  • Exibir o valor integro do seu banco de dados
  • Dados dinâmicos
  • Equipe grande de desenvolvimento
  • Necessidade de exibir o mesmo dado, de formas diferentes na interface
  • Trabalhar com eventos
  • Controlar eventos no front end
  • Trabalhar com componentes separados
  • Armazenar dados em cache na memória, mas eles precisarem mudar enquanto estiver em cache
  • Seja um projeto pequeno ou grande

Utilizar Flux, ou alguma biblioteca de container de estados previsível, é uma ótima solução.

4.

Dicas e Referências

https://facebook.github.io/flux/

http://redux.js.org/

https://github.com/yanmagale/awesome-flux

https://egghead.io/courses/getting-started-with-redux

/yanmagale

/yaanmagale

https://yanmagalhaes.com.br

Obrigado Galera \o/

https://slides.com/yanmagale/os-estados-do-flux

Made with Slides.com