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
0
380
Micro Front-ends, what they don't tell you
Igor Halfeld
October 26, 2019
Tweet
Share
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
170
How to migrate legacy frontend?
igorhalfeld
1
120
Patterns for perfect components in Vue.js
igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
52
Step by step I followed a career in software
igorhalfeld
0
700
Using AI to create memes
igorhalfeld
0
520
Deninho, the TS children
igorhalfeld
1
210
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
88
Front-end Clean Architecture
igorhalfeld
2
280
Other Decks in Programming
See All in Programming
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.5k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
テスト駆動Kaggle
isax1015
1
620
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
240
PicoRuby on Rails
makicamel
2
140
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
効率的な開発手段として VRTを活用する
ishkawa
0
160
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Raft: Consensus for Rubyists
vanstee
140
7k
Producing Creativity
orderedlist
PRO
346
40k
Writing Fast Ruby
sferik
628
62k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Code Review Best Practice
trishagee
69
19k
Become a Pro
speakerdeck
PRO
29
5.4k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Bash Introduction
62gerente
613
210k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
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