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
270
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
150
How to migrate legacy frontend?
igorhalfeld
1
100
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
46
Step by step I followed a career in software
igorhalfeld
0
690
Using AI to create memes
igorhalfeld
0
510
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
Other Decks in Programming
See All in Programming
Beyond ORM
77web
11
1.6k
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
280
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
420
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.3k
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
300
ISUCON14感想戦で85万点まで頑張ってみた
ponyo877
1
590
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
130
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
390
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
선언형 UI에서의 상태관리
l2hyunwoo
0
270
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.4k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Thoughts on Productivity
jonyablonski
68
4.4k
Building an army of robots
kneath
302
45k
KATA
mclloyd
29
14k
It's Worth the Effort
3n
183
28k
The Language of Interfaces
destraynor
155
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
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