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
130
How to migrate legacy frontend?
igorhalfeld
1
98
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
38
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
Other Decks in Programming
See All in Programming
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.8k
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
580
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
260
私のEbitengineの第一歩
qt_luigi
0
440
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
REXML改善のその後
naitoh
0
190
Jakarta EE meets AI
ivargrimstad
0
370
ドメイン駆動設計を実践するために必要なもの
bikisuke
3
330
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
340
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
Ruby Parser progress report 2024
yui_knk
2
220
今インフラ技術をイチから学び直すなら
yuhta28
1
130
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
How to Ace a Technical Interview
jacobian
275
23k
Writing Fast Ruby
sferik
623
60k
A designer walks into a library…
pauljervisheath
201
24k
Six Lessons from altMBA
skipperchong
26
3.3k
Making Projects Easy
brettharned
113
5.8k
A better future with KSS
kneath
235
17k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Gamification - CAS2011
davidbonilla
79
4.9k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Web Components: a chance to create the future
zenorocha
308
42k
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