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