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
Clean Architecture no Front-end (update 2021-05...
Search
Igor Halfeld
May 11, 2021
Programming
0
52
Clean Architecture no Front-end (update 2021-05-11)
Igor Halfeld
May 11, 2021
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
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
Front-end Clean Architecture
igorhalfeld
2
280
Other Decks in Programming
See All in Programming
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
720
🔨 小さなビルドシステムを作る
momeemt
1
520
TanStack DB ~状態管理の新しい考え方~
bmthd
2
330
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
Honoアップデート 2025年夏
yusukebe
1
860
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
210
Introduction to Git & GitHub
latte72
0
120
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Typedesign – Prime Four
hannesfritz
42
2.8k
Building Applications with DynamoDB
mza
96
6.6k
Producing Creativity
orderedlist
PRO
347
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Pragmatic Product Professional
lauravandoore
36
6.8k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Into the Great Unknown - MozCon
thekraken
40
2k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
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