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
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
52
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
380
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
89
Other Decks in Programming
See All in Programming
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
540
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
360
Design Foundational Data Engineering Observability
sucitw
3
200
はじめてのMaterial3 Expressive
ym223
2
880
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
180
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4.3k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
820
Gamification - CAS2011
davidbonilla
81
5.4k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Into the Great Unknown - MozCon
thekraken
40
2k
Unsuck your backbone
ammeep
671
58k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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