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
Front-end Clean Architecture
Search
Igor Halfeld
October 12, 2019
Programming
2
280
Front-end Clean Architecture
Igor Halfeld
October 12, 2019
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
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
52
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
Other Decks in Programming
See All in Programming
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
550
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
個人軟體時代
ethanhuang13
0
330
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.2k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.6k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
570
🔨 小さなビルドシステムを作る
momeemt
4
690
Design Foundational Data Engineering Observability
sucitw
3
200
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
550
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
170
AIでLINEスタンプを作ってみた
eycjur
1
230
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Faster Mobile Websites
deanohume
309
31k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Docker and Python
trallard
46
3.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Invisible Side of Design
smashingmag
301
51k
Designing for humans not robots
tammielis
253
25k
The World Runs on Bad Software
bkeepers
PRO
70
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
Clean Architecture no Front-end De webmaster para arquiteto de software
!
Vocês acham que parece… …estranho essas duas palavras juntas? assunto
delicado
None
A web evoluiu, e as aplicações também
Deixamos de ter simples webpages… …para grandes aplicações com infinitas
telas e regras de controle de estado.
Tudo tá ficando tão complexo… …que estamos começando a pensar
criar micro front-ends
Por isso começamos a refletir sobre como resolver os problemas
Vamos olhar pra outros horizontes e ver como já funciona…
para o back-end
Angular.js 1 MVC
Redux Event Sourcing & CQRS
None
None
É bem complicado
Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld
E antes de entrar no assunto %
Complexidade instrumental vs Complexidade inerente
Não precisa ser complicado, precisa ser simples/divertido.
Quais as principais dificuldades de lidar com Front-end hoje em
dia? são várias mas..
Data fetching & Painting layer Local & Global state flow
Data fetching Nome bonito pra fazer uns request
Painting/Render layer Nome bonito pra onde tá os HTML
Local state flow Nome bonito pros objeto do componente
Global state flow Nome bonito pros Redux/Vuex/NGRX
Como usar da Clean Architecture pro nosso Front-end
None
Adapters -> Store UseCases -> Implementação Entity -> Entidade da
Impl.
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
Views, Components, Services, State, Router, Styles, Utils
Começar com separação de pastas.
Data fetching & Painting layer
services/index.js
services/user.js
E então conectamos com o nosso state management *dependendo do
projeto
Local state flow & Global state flow
Você não precisa estar conectado no Redux o tempo todo!
None
None
None
None
None
None
Não é o veredito final
Obrigado! igorluiz.me/talks - @IgorHalfeld