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
110
How to migrate legacy frontend?
igorhalfeld
1
82
Patterns for perfect components in Vue.js
igorhalfeld
0
98
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
35
Step by step I followed a career in software
igorhalfeld
0
640
Using AI to create memes
igorhalfeld
0
480
Deninho, the TS children
igorhalfeld
1
190
Micro Front-ends, what's anyone says...
igorhalfeld
0
320
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
82
Other Decks in Programming
See All in Programming
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
ONE WEDGE_company_guide
1wedge_one
0
470
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Code Reviews
bkuhlmann
4
890
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
130
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Site Reliability Engineering for GMO
pyama86
8
1k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
SIMD Parallel Programming with the Vector API
josepaumard
0
160
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
230
Featured
See All Featured
Bash Introduction
62gerente
604
210k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Happy Clients
brianwarren
92
6.4k
Automating Front-end Workflow
addyosmani
1356
200k
Facilitating Awesome Meetings
lara
42
5.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Music & Morning Musume
bryan
41
5.6k
Gamification - CAS2011
davidbonilla
76
4.6k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Side Projects
sachag
451
41k
Atom: Resistance is Futile
akmur
259
25k
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