Aplicando os conceitos de clean code e clean architecture do Uncle Bob em uma arquitetura front-end com orientação a objetos

1. CLean
ArchitectureAprendendo a aplicar no Front-end

2. Desenvolvedora front-end há cinco anos,
formada em Design Gráfico e fã de Star Wars.
Twitter e Medium: EveliseVazquez
Github: @evelisee
Evelise Vazquez

3. “Nossas dúvidas são traidoras e nos
fazem perder o que, com frequência,
poderíamos ganhar, por simples medo de
arriscar.”
—WILLIAM SHAKESPEARE

4. ● Avanço das responsabilidades do front-end
● Projetos de larga escala e complexidade
● Projetos de longa duração e de repetidas
manutenções
Por que usar uma arquitetura clean no
frontend?

5. CONCEITO
De onde vem a base para começar?

6. Cebola
FRAMEWORKS
INTERFACE ADAPTERS
APPLICATION BUSINESS
ENTERPRISE BUSINESS RULES

7. WORKFLOW

8. FRAMEWORKS
& DRIVES
01

9. As camadas que não dependem de itens
externos ou onde algumas das vezes não
temos acesso ao código.
Ex.: API’S back-end ou até mesmo os
components.
1ª camada

10. INTERFACE ADAPTERS
02
Finalidade da camada: converter os dados
de forma acessível entre meu useCase e meu
component.

11. 2ª Camada
Passa os dados das
requisições dos
components para as
regras de negócio
serem tratadas.
Controllers
Passa os dados do
retorno de API’s para as
regras de negócio.
(Geralmente request de
API’s de back-end)
Repository

12. Controller Repository

13. APPLICATION BUSINESS
03
Finalidade da camada: regras de negócio!
Alterações nas camadas externas não devem
afetar essa camada.

14. 3ª Camada
Recebe informações
da controller, trata o
que deve ser
manipulado e passa
para a próxima
camada (que é o
repository).
Use Cases
São classes auxiliares
que transformam os
dados de uma model
para a viewModel ou
EntityModel
Mappers

15. Use Case

16. Mapper

17. ENTERPRISE BUSINESS RULES
04
Finalidade da camada: encapsular
as entidades (nossos models!)
Menor possibilidade de mudança!

18. 4ª camada
Classes que mantém
as entidades do
nosso sistema.
Entities

19. Entity

20. Como fazer funcionar?

21. Fluxo de Ida
Preciso de uns dados
para preencher minha
tabela
Vou repassar sua
mensagem para o
UseCase
Preciso validar o que
você me pediu e já vou
passar para o
repository
Vou buscar no
back-end!
Component Controller Use Case Repository

22. Fluxo de Volta
Recebi um response
do back-end!
Vou validar os dados
que recebi e
encaminhar para o
controller
Vou encaminhar seu
retorno para o
component
Vou mostrar na minha
tabela!
Repository Use Case Controller Component

23. E a estrutura de pastas?

24. Presentation
Layer
Core Layer Data Layer

25. Alguma dúvida?

26. Dataflow do clean
iMasters - Introdução ao clean architecture
Clean Architecture - Leandro Mancini
Carbon - Prints de Código
Boas práticas e nomes das camadas
Referências