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
360
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
140
How to migrate legacy frontend?
igorhalfeld
1
100
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
46
Step by step I followed a career in software
igorhalfeld
0
690
Using AI to create memes
igorhalfeld
0
510
Deninho, the TS children
igorhalfeld
1
200
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
84
Front-end Clean Architecture
igorhalfeld
2
270
Other Decks in Programming
See All in Programming
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
260
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
280
fs2-io を試してたらバグを見つけて直した話
chencmd
0
230
Symfony Mapper Component
soyuka
2
730
php-conference-japan-2024
tasuku43
0
280
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
ドメインイベント増えすぎ問題
h0r15h0
2
300
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
130
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
180
talk-with-local-llm-with-web-streams-api
kbaba1001
0
180
Refactor your code - refactor yourself
xosofox
1
260
Beyond ORM
77web
5
670
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.3k
Building Applications with DynamoDB
mza
91
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Done Done
chrislema
181
16k
Practical Orchestrator
shlominoach
186
10k
Navigating Team Friction
lara
183
15k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Designing for Performance
lara
604
68k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Bash Introduction
62gerente
608
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
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