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
160
How to migrate legacy frontend?
igorhalfeld
1
110
Patterns for perfect components in Vue.js
igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
51
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
200
Micro Front-ends, what they don't tell you
igorhalfeld
0
370
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
88
Other Decks in Programming
See All in Programming
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
Perlで痩せる
yuukis
1
660
Blueskyのプラグインを作ってみた
hakkadaikon
1
280
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
1
180
Use Perl as Better Shell Script
karupanerura
0
650
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.5k
インターフェース設計のコツとツボ
togishima
2
480
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.6k
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
1k
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.1k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
How to Ace a Technical Interview
jacobian
276
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Building an army of robots
kneath
306
45k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Building Adaptive Systems
keathley
41
2.6k
RailsConf 2023
tenderlove
30
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Producing Creativity
orderedlist
PRO
346
40k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Making Projects Easy
brettharned
116
6.2k
It's Worth the Effort
3n
184
28k
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