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
46
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
150
How to migrate legacy frontend?
igorhalfeld
1
110
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Step by step I followed a career in software
igorhalfeld
0
690
Using AI to create memes
igorhalfeld
0
510
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
84
Front-end Clean Architecture
igorhalfeld
2
270
Other Decks in Programming
See All in Programming
SpringBoot3.4の構造化ログ #kanjava
irof
2
940
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
330
Pulsar2 を雰囲気で使ってみよう
anoken
0
220
テストをしないQAエンジニアは何をしているか?
nealle
0
130
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
260
Introduction to kotlinx.rpc
arawn
0
300
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
190
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
The Cult of Friendly URLs
andyhume
78
6.2k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
GitHub's CSS Performance
jonrohan
1030
460k
How GitHub (no longer) Works
holman
313
140k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building an army of robots
kneath
302
45k
GraphQLとの向き合い方2022年版
quramy
44
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
For a Future-Friendly Web
brad_frost
176
9.5k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
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