Front-end Clean Architecture

Transcript

1. Clean Architecture no Front-end De webmaster para arquiteto de software !
2. Vocês acham que parece… …estranho essas duas palavras juntas? assunto delicado
4. A web evoluiu, e as aplicações também
5. Deixamos de ter simples webpages… …para grandes aplicações com infinitas telas e regras de controle de estado.
6. Tudo tá ficando tão complexo… …que estamos começando a pensar criar micro front-ends
7. Por isso começamos a refletir sobre como resolver os problemas
8. Vamos olhar pra outros horizontes e ver como já funciona… para o back-end
9. Angular.js 1 MVC
10. Redux Event Sourcing & CQRS
13. É bem complicado
14. Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld
15. E antes de entrar no assunto %
16. Complexidade instrumental vs Complexidade inerente
17. Não precisa ser complicado, precisa ser simples/divertido.
18. Quais as principais dificuldades de lidar com Front-end hoje em dia? são várias mas..
19. Data fetching & Painting layer Local & Global state flow
20. Data fetching Nome bonito pra fazer uns request
21. Painting/Render layer Nome bonito pra onde tá os HTML
22. Local state flow Nome bonito pros objeto do componente
23. Global state flow Nome bonito pros Redux/Vuex/NGRX
24. Como usar da Clean Architecture pro nosso Front-end
26. Adapters -> Store UseCases -> Implementação Entity -> Entidade da Impl.
27. Como usar sem virar o novo MVC no Front-end?
28. Focar no principal! e põe na cabeça duas pequenas coisas…
29. Simplicidade & Separação
30. Views, Components, Services, State, Router, Styles, Utils
31. Começar com separação de pastas.
32. Data fetching & Painting layer
33. services/index.js
34. services/user.js
35. E então conectamos com o nosso state management *dependendo do projeto
36. Local state flow & Global state flow
37. Você não precisa estar conectado no Redux o tempo todo!
44. Não é o veredito final
45. Obrigado! igorluiz.me/talks - @IgorHalfeld