Front-end Clean Architecture

Front-end Clean Architecture

44b9f26e2590694901195e0d038c301d?s=128

Igor Halfeld

October 12, 2019
Tweet

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
  3. None
  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

  11. None
  12. None
  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

  25. None
  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!

  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. Não é o veredito final

  45. Obrigado! igorluiz.me/talks - @IgorHalfeld