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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Igor Halfeld
October 12, 2019
Programming
2
290
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
190
How to migrate legacy frontend?
igorhalfeld
1
130
Patterns for perfect components in Vue.js
igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
64
Step by step I followed a career in software
igorhalfeld
0
700
Using AI to create memes
igorhalfeld
0
530
Deninho, the TS children
igorhalfeld
1
220
Micro Front-ends, what they don't tell you
igorhalfeld
0
390
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
100
Other Decks in Programming
See All in Programming
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
2k
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
130
15年目のiOSアプリを1から作り直す技術
teakun
0
500
ふん…おもしれぇ Parser。RubyKaigi 行ってやるぜ
aki_pin0
0
110
Scaling & Coordinating AI Agents for Development - Tamir Dresher
tamirdresher
0
110
AIによる高速開発をどう制御するか? ガードレール設置で開発速度と品質を両立させたチームの事例
tonkotsuboy_com
7
2.5k
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
2k
Ruby x Terminal
a_matsuda
2
140
AI時代の認知負荷との向き合い方
optfit
0
180
AI主導でFastAPIのWebサービスを作るときに 人間が構造化すべき境界線
okajun35
0
260
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜 / Understanding nil in Go Interface Representation and Why nil != nil
kuro_kurorrr
2
1k
2026/02/04 AIキャラクター人格の実装論 口 調の模倣から、コンテキスト制御による 『思想』と『行動』の創発へ
sr2mg4
0
610
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
220
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.2k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
1
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
68
Designing for humans not robots
tammielis
254
26k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
460
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
78
The Pragmatic Product Professional
lauravandoore
37
7.2k
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