Front-end Clean Architecture

Transcript

1. 1.

   Clean Architecture no Front-end De webmaster para arquiteto de software

   !
2. 2.

   Vocês acham que parece… …estranho essas duas palavras juntas? assunto

   delicado
3. 3.

   None
4. 4.

   A web evoluiu, e as aplicações também

5. 5.

   Deixamos de ter simples webpages… …para grandes aplicações com infinitas

   telas e regras de controle de estado.
6. 6.

   Tudo tá ficando tão complexo… …que estamos começando a pensar

   criar micro front-ends
7. 7.

   Por isso começamos a refletir sobre como resolver os problemas

8. 8.

   Vamos olhar pra outros horizontes e ver como já funciona…

   para o back-end
9. 9.

   Angular.js 1 MVC

10. 10.

    Redux Event Sourcing & CQRS

11. 11.

    None
12. 12.

    None
13. 13.

    É bem complicado

14. 14.

    Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld

15. 15.

    E antes de entrar no assunto %

16. 16.

    Complexidade instrumental vs Complexidade inerente

17. 17.

    Não precisa ser complicado, precisa ser simples/divertido.

18. 18.

    Quais as principais dificuldades de lidar com Front-end hoje em

    dia? são várias mas..
19. 19.

    Data fetching & Painting layer Local & Global state flow

20. 20.

    Data fetching Nome bonito pra fazer uns request

21. 21.

    Painting/Render layer Nome bonito pra onde tá os HTML

22. 22.

    Local state flow Nome bonito pros objeto do componente

23. 23.

    Global state flow Nome bonito pros Redux/Vuex/NGRX

24. 24.

    Como usar da Clean Architecture pro nosso Front-end

25. 25.

    None
26. 26.

    Adapters -> Store UseCases -> Implementação Entity -> Entidade da

    Impl.
27. 27.

    Como usar sem virar o novo MVC no Front-end?

28. 28.

    Focar no principal! e põe na cabeça duas pequenas coisas…

29. 29.

    Simplicidade & Separação

30. 30.

    Views, Components, Services, State, Router, Styles, Utils

31. 31.

    Começar com separação de pastas.

32. 32.

    Data fetching & Painting layer

33. 33.

    services/index.js

34. 34.

    services/user.js

35. 35.

    E então conectamos com o nosso state management *dependendo do

    projeto
36. 36.

    Local state flow & Global state flow

37. 37.

    Você não precisa estar conectado no Redux o tempo todo!

38. 38.

    None
39. 39.

    None
40. 40.

    None
41. 41.

    None
42. 42.

    None
43. 43.

    None
44. 44.

    Não é o veredito final

45. 45.

    Obrigado! igorluiz.me/talks - @IgorHalfeld