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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
210
How to migrate legacy frontend?
igorhalfeld
1
140
Patterns for perfect components in Vue.js
igorhalfeld
0
140
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
76
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
230
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
新人はどこまで自力でやり、どこからAIに頼るべきか/エンジニア育成に向き合う_先輩たちの悩みと知見共有会
toppan_digital_dev
1
600
PHPプロジェクトの結合バランスを可視化する #php_night
kajitack
0
230
Claude Codeを組織的に動かして月400PRを実現した話
happy_ryo
0
270
ゲームコントローラやキーボードのファームウェアをSwiftで書く
kishikawakatsumi
1
180
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
nogu66
0
140
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
yusuga
1
310
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
theoriatec2024
3
150
デプロイ直後のレイテンシスパイクを調べたら、 Railsの仕様にたどり着いた
nhsykym
0
110
DroidKaigi 2026 「個人開発という実験場: Android エンジニアが手にする4つの自由」
slashnephy
0
230
Security issues being discussed on Web Platforms
petamoriken
0
720
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
mazrean
0
140
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
danybony
1
240
Featured
See All Featured
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
290
Java REST API Framework Comparison - PWX 2021
mraible
34
9.7k
Product Roadmaps are Hard
iamctodd
55
13k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.1k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
The Cost Of JavaScript in 2023
addyosmani
55
10k
Making the Leap to Tech Lead
cromwellryan
135
10k
How Software Deployment tools have changed in the past 20 years
geshan
1
34k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Mindset for Success: Future Career Progression
greggifford
PRO
0
490
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Tell your own story through comics
letsgokoyo
1
1.1k
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