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
38
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
130
How to migrate legacy frontend?
igorhalfeld
1
98
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Step by step I followed a career in software
igorhalfeld
0
670
Using AI to create memes
igorhalfeld
0
500
Deninho, the TS children
igorhalfeld
1
200
Micro Front-ends, what they don't tell you
igorhalfeld
0
360
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
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
420
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
620
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
170
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
760
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Jakarta EE meets AI
ivargrimstad
1
480
はじめてみよう量子プログラミング
itokoichi01
0
170
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
990
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
270
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
6k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Design by the Numbers
sachag
277
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Scaling GitHub
holman
458
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
Web Components: a chance to create the future
zenorocha
308
42k
Happy Clients
brianwarren
96
6.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
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