Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Clean Architecture no Front-end (update 2021-05...
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Igor Halfeld
May 11, 2021
Programming
80
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Clean Architecture no Front-end (update 2021-05-11)
Igor Halfeld
May 11, 2021
Transcript
42 slides
Clean Architecture no Front-end De webmaster para arquiteto de software
💁
Por que você veio assistir essa palestra? eu tenho 3
palpites…
Porque você viu um outro dev falando sobre 👻
Porque você gosta de aprender e acha que deve saber
esse assunto 🥸
Porque você tá se sentindo engessado pra escrever testes e
para fazer implementações 🤣
…se você não esta aqui por esse último ponto, reveja
essa palestra 2~4 meses depois! 🦄
Clean Architecture é pensando pro backend
Angular.js 1 MVC
Redux Event Sourcing & CQRS
Mas dá pra aplicar no front-end? 🤔
Clean Architecture, Hexagonal Architecture, Onion Architecture, Ports and Adapters…
Alta coesão Baixo acoplamento Como alcançar isso? 😱
Complexidade instrumental vs Complexidade inerente
None
Principais problemas de lidar com front-end hoje em dia? Javascript
fatigue 💩
Libs com “conceitos inovadores"
None
None
None
A tech parece chata porquê você provavelmente conhece bastante dela
None
Resumo, foca no problema!
Data fetching & Painting layer Local & Global state fl
ow
Data fetching Nome bonito pra fazer uns request
Painting/Render layer Nome bonito pra onde tá os HTML
Local state fl ow Nome bonito pros objeto do componente
Global state fl ow Nome bonito pros Redux/Vuex/NGRX
Sabendo as dores vamos traçar um ponto em comum
None
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
Separation of concerns Inversion of control Dependency Injection Entity
Separar data fetching de painting layer Separar responsabilidade em funções
Separar separar lógica do componente (e-commerce) * Hooks é uma forma de separar
map/ fi lter/reduce.. Cria o fl uxo e o "usuário"
implementa a estratégia
None
None
None
None
None
Parabéns, você sabe clean arch!
igorhalfeld.com - @igorhalfeld
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
210
How to migrate legacy frontend?
igorhalfeld
1
150
Patterns for perfect components in Vue.js
igorhalfeld
0
150
Step by step I followed a career in software
igorhalfeld
0
720
Using AI to create memes
igorhalfeld
0
550
Deninho, the TS children
igorhalfeld
1
230
Micro Front-ends, what they don't tell you
igorhalfeld
0
420
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
120
Front-end Clean Architecture
igorhalfeld
2
310
Other Decks in Programming
See All in Programming
Engineering Biometric UX Across Android Versions | DroidKnights 2026
ryunen344
1
210
Secure Your Coding Agent Like It’s Malware (v1.5) 🇬🇧 @Code.talks 2026
richargh
0
150
Enforcing Your Architecture with Unit Tests in the AI Era (Swift Connection X)
steliosf
PRO
1
170
例外からRich Errorsまで Kotlinエラーハンドリングの進化を読み解く
shiita0903
0
160
Apple Intelligenceとオンデバイス時代の到来
yahir0
0
240
ローカルLLMの基本と近況 2611 / Local LLM basics and recent situation 2611
kishida
2
420
学びを記事・スライド・Xへ高速展開する― AI-assisted Learning Loopで回すコンテンツ生成術
ochtum
0
210
高橋メソッドでCVE解説シリーズ 〜CVE-2026-112816〜
hakkadaikon
0
260
SODA - FACT BOOK(EN)
sodainc
1
240
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
1
320
AWS CDKを理解するために公式の定義を深掘って解説してみる / Understanding AWS CDK by Digging into Its Official Definition
akihisaikeda
3
310
どうしても Eloquent でリポジトリパターンをやりたいんだ #phpcon_niigata / phpcon-niigata-2026
shogogg
0
300
Featured
See All Featured
Leo the Paperboy
mayatellez
11
2.5k
Being A Developer After 40
akosma
PRO
92
590k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.7k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
1.1k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
8.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
35
2.9k
The Spectacular Lies of Maps
axbom
PRO
1
1.1k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
460
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
2
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
56
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
33
5.8k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.8k