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
Micro Front-ends, what they don't tell you
Search
Igor Halfeld
October 26, 2019
Programming
400
0
Share
Micro Front-ends, what they don't tell you
Igor Halfeld
October 26, 2019
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
200
How to migrate legacy frontend?
igorhalfeld
1
130
Patterns for perfect components in Vue.js
igorhalfeld
0
120
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
70
Step by step I followed a career in software
igorhalfeld
0
710
Using AI to create memes
igorhalfeld
0
540
Deninho, the TS children
igorhalfeld
1
220
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
110
Front-end Clean Architecture
igorhalfeld
2
300
Other Decks in Programming
See All in Programming
Terraform言語の静的解析 / static analysis of Terraform language
wata727
1
110
書籍「ユーザーストーリーマッピング」が私のバイブル
asumikam
4
430
JAWS-UG横浜 #100 祝・第100回スペシャルAWS は VPC レスの時代へ
maroon1st
0
180
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
itsmedreamwalker
0
550
第3木曜LT会 #28
tinykitten
PRO
0
120
ついに来た!本格的なマルチクラウド時代の Google Cloud
maroon1st
0
280
JOAI2026 1st solution - heron0519 -
heron0519
0
150
Angular Signal Forms
debug_mode
0
120
エラー処理の温故知新 / history of error handling technic
ryotanakaya
7
1.7k
Offline should be the norm: building local-first apps with CRDTs & Kotlin Multiplatform
renaudmathieu
0
230
GitHubCopilotCLIをはじめよう.pdf
htkym
0
290
GoogleCloudとterraform完全に理解した
terisuke
1
160
Featured
See All Featured
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
130
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
270
Building AI with AI
inesmontani
PRO
1
930
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
270
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
530
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
380
Mind Mapping
helmedeiros
PRO
1
170
GitHub's CSS Performance
jonrohan
1032
470k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Transcript
"Micro Front-ends, o que não te falaram"… Se você acha
que só tem coisa boa, Você achou errado
Alguém tem ideia de porquê o título tá entre aspas?
Não existe ninguém que saiba ainda o que esta fazendo
*eu incluso
É um assunto muito novo. É como ter 15 anos
com 20 anos de experiência *nada foi estressado o suficiente pra saber se realmente funciona
Então o que eu vim fazer aqui?
Pra vermos como é esse mundo e como começar a
fazer *mesmo que nenhum cenário tenha sido super testado
Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld
Escalar Front-end… *escalar e front-end parecem não combinar
None
Complexidade instrumental vs Complexidade inerente
Estamos em um nível de centenas de componentes além de
regras de state *e ainda precisamos saber separar bem eles
Data fetching & Painting layer Local & Global state flow
Melhorar deploys Paralelizar o desenvolvimento com mais times Aumentar tolerância
a falhas Evoluir o código legado
Vamos olhar pra a aplicação como um todo *ver a
evolução
None
None
None
Vamos trazer essa realidade do back-end pro front-end *afinal Event
Sourcing e CQRS viraram o Redux
Por que todo mundo fala de microservices pro Back-end?
É o caminho pra escalar! Mas precisamos ter em mente
umas coisas… *não se encaixa em toda app
Desacoplados Pequenos Tolerante a falhas Micro service wordpress (faz tudo)
No front-end são praticamente as mesmas normais
Desacoplados Pequenos Tolerante a falhas Micro service wordpress (faz tudo)
e no bundle size (JS puro ❤)
Legal fera, mas como faz?
Nesse tempo que tenho aqui vou mostrar 3 formas de
fazer
1. Usando NGIX 2. Usando o kubernetes 3. Usando <iframe/>
(*demo time)
Front-end e DevOps precisam andar bem no amor ❤
Server-Side template composition 1. Usando NGIX
None
Nginx Conf
Per page composition 1. Usando NGIX
None
Page/Fragment composition 2. Usando Kubernetes
None
Single service Simple fanout Name based virtual hosting 1 IP
pra vários Services 1 IP pra um Services 1 IP pra vários Hostnames
None
None
Fragment composition 3. Usando <iframe />
Por que iframe é um problema? *comunicação
None
None
DEMO
Conclusão &
Obrigado! igorluiz.me/talks - @IgorHalfeld