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
90
Front-end Clean Architecture
igorhalfeld
2
280
Other Decks in Programming
See All in Programming
EMこそClaude Codeでコード調査しよう
shibayu36
0
420
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
CSC305 Lecture 08
javiergs
PRO
0
280
CSC305 Lecture 09
javiergs
PRO
0
310
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
410
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.7k
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Faster Mobile Websites
deanohume
310
31k
Code Reviewing Like a Champion
maltzj
526
40k
Embracing the Ebb and Flow
colly
88
4.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Optimizing for Happiness
mojombo
379
70k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Become a Pro
speakerdeck
PRO
29
5.6k
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