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
はじめてのMaterial3 Expressive
ym223
2
260
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
310
アセットのコンパイルについて
ojun9
0
120
1から理解するWeb Push
dora1998
7
1.9k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
230
AI時代のUIはどこへ行く?
yusukebe
18
8.8k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
110
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
420
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
140
Featured
See All Featured
The Language of Interfaces
destraynor
161
25k
Faster Mobile Websites
deanohume
309
31k
Why Our Code Smells
bkeepers
PRO
339
57k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Automating Front-end Workflow
addyosmani
1370
200k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
The Pragmatic Product Professional
lauravandoore
36
6.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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