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
170
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
88
Front-end Clean Architecture
igorhalfeld
2
280
Other Decks in Programming
See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Statistics for Hackers
jakevdp
799
220k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Code Review Best Practice
trishagee
69
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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