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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
57
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
96
Other Decks in Programming
See All in Programming
Basic Architectures
denyspoltorak
0
630
SourceGeneratorのススメ
htkym
0
160
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
350
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
2.4k
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
5.8k
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
0
990
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
560
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
660
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
130
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
kanamasa
11
6k
ThorVG Viewer In VS Code
nors
0
750
Featured
See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
120
Mobile First: as difficult as doing things right
swwweet
225
10k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
44
So, you think you're a good person
axbom
PRO
2
1.9k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
280
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
How to train your dragon (web standard)
notwaldorf
97
6.5k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
84
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