Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-end Clean Architecture
Search
Igor Halfeld
October 12, 2019
Programming
2
270
Front-end Clean Architecture
Igor Halfeld
October 12, 2019
Tweet
Share
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
150
How to migrate legacy frontend?
igorhalfeld
1
110
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
46
Step by step I followed a career in software
igorhalfeld
0
690
Using AI to create memes
igorhalfeld
0
510
Deninho, the TS children
igorhalfeld
1
200
Micro Front-ends, what they don't tell you
igorhalfeld
0
370
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
84
Other Decks in Programming
See All in Programming
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
SwiftUI Viewの責務分離
elmetal
PRO
0
140
CI改善もDatadogとともに
taumu
0
110
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
sappoRo.R #12 初心者セッション
kosugitti
0
230
Featured
See All Featured
Designing for Performance
lara
604
68k
Designing for humans not robots
tammielis
250
25k
The Invisible Side of Design
smashingmag
299
50k
Practical Orchestrator
shlominoach
186
10k
Visualization
eitanlees
146
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Producing Creativity
orderedlist
PRO
343
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Transcript
Clean Architecture no Front-end De webmaster para arquiteto de software
!
Vocês acham que parece… …estranho essas duas palavras juntas? assunto
delicado
None
A web evoluiu, e as aplicações também
Deixamos de ter simples webpages… …para grandes aplicações com infinitas
telas e regras de controle de estado.
Tudo tá ficando tão complexo… …que estamos começando a pensar
criar micro front-ends
Por isso começamos a refletir sobre como resolver os problemas
Vamos olhar pra outros horizontes e ver como já funciona…
para o back-end
Angular.js 1 MVC
Redux Event Sourcing & CQRS
None
None
É bem complicado
Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld
E antes de entrar no assunto %
Complexidade instrumental vs Complexidade inerente
Não precisa ser complicado, precisa ser simples/divertido.
Quais as principais dificuldades de lidar com Front-end hoje em
dia? são várias mas..
Data fetching & Painting layer Local & Global state flow
Data fetching Nome bonito pra fazer uns request
Painting/Render layer Nome bonito pra onde tá os HTML
Local state flow Nome bonito pros objeto do componente
Global state flow Nome bonito pros Redux/Vuex/NGRX
Como usar da Clean Architecture pro nosso Front-end
None
Adapters -> Store UseCases -> Implementação Entity -> Entidade da
Impl.
Como usar sem virar o novo MVC no Front-end?
Focar no principal! e põe na cabeça duas pequenas coisas…
Simplicidade & Separação
Views, Components, Services, State, Router, Styles, Utils
Começar com separação de pastas.
Data fetching & Painting layer
services/index.js
services/user.js
E então conectamos com o nosso state management *dependendo do
projeto
Local state flow & Global state flow
Você não precisa estar conectado no Redux o tempo todo!
None
None
None
None
None
None
Não é o veredito final
Obrigado! igorluiz.me/talks - @IgorHalfeld