Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Micro Front-ends, what they don't tell you
Search
Igor Halfeld
October 26, 2019
Programming
420
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Micro Front-ends, what they don't tell you
Igor Halfeld
October 26, 2019
Transcript
44 slides
"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
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
210
How to migrate legacy frontend?
igorhalfeld
1
150
Patterns for perfect components in Vue.js
igorhalfeld
0
150
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
80
Step by step I followed a career in software
igorhalfeld
0
720
Using AI to create memes
igorhalfeld
0
550
Deninho, the TS children
igorhalfeld
1
230
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
120
Front-end Clean Architecture
igorhalfeld
2
310
Other Decks in Programming
See All in Programming
DroidKnights 2026 Android A2UI Jetpack Compose 기반의 안전한 AI UI 렌더링 - 박제창
itsmedreamwalker
1
230
例外からRich Errorsまで Kotlinエラーハンドリングの進化を読み解く
shiita0903
0
160
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
naruogram
0
340
GraphQL の onError と Nullability のこれから
quramy
0
220
Crash Auto Pipelines
veronikapj
1
420
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
320
Next.js: The final boss of Web Performance
guaca
0
410
Secure Your Coding Agent Like It’s Malware (v1.5) 🇬🇧 @Code.talks 2026
richargh
0
150
Growing PicoRuby's Ecosystem on ESP32
yuuu
2
130
複数ドメインを一つのアプリに統合するFlutterの設計と運用_FlutterKaigi2026登壇資料(須永高弘)
takahirosunaga
0
190
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
1
320
AWS CDKを理解するために公式の定義を深掘って解説してみる / Understanding AWS CDK by Digging into Its Official Definition
akihisaikeda
3
310
Featured
See All Featured
Heart Work Chapter 1 - Part 1
lfama
PRO
11
37k
Making the Leap to Tech Lead
cromwellryan
135
10k
Producing Creativity
orderedlist
PRO
348
41k
Docker and Python
trallard
47
4.3k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
6
1.3k
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
980
The #1 spot is gone: here's how to win anyway
tamaranovitovic
4
1.2k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
480
The Art of Programming - Codeland 2020
erikaheidi
57
14k
The untapped power of vector embeddings
frankvandijk
2
2k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
330