Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
280
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
180
How to migrate legacy frontend?
igorhalfeld
1
120
Patterns for perfect components in Vue.js
igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
53
Step by step I followed a career in software
igorhalfeld
0
700
Using AI to create memes
igorhalfeld
0
520
Deninho, the TS children
igorhalfeld
1
210
Micro Front-ends, what they don't tell you
igorhalfeld
0
390
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
93
Other Decks in Programming
See All in Programming
Rediscover the Console - SymfonyCon Amsterdam 2025
chalasr
2
140
目的で駆動する、AI時代のアーキテクチャ設計 / purpose-driven-architecture
minodriven
11
3.9k
Module Harmony
petamoriken
2
610
レイトレZ世代に捧ぐ、今からレイトレを始めるための小径
ichi_raven
0
490
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
shmokmt
5
2.1k
Socio-Technical Evolution: Growing an Architecture and Its Organization for Fast Flow
cer
PRO
0
260
これだけで丸わかり!LangChain v1.0 アップデートまとめ
os1ma
6
1.3k
AIコーディングエージェント(Gemini)
kondai24
0
150
[堅牢.py #1] テストを書かない研究者に送る、最初にテストを書く実験コード入門 / Let's start your ML project by writing tests
shunk031
11
6.9k
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
agatan
8
18k
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
440
AIコーディングエージェント(skywork)
kondai24
0
110
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Writing Fast Ruby
sferik
630
62k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.8k
The Invisible Side of Design
smashingmag
302
51k
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