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
Techniques for making and scaling micro Front-e...
Search
Igor Halfeld
September 11, 2019
Programming
0
230
Techniques for making and scaling micro Front-ends Apps
Igor Halfeld
September 11, 2019
Tweet
Share
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
180
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
Micro Front-ends, what they don't tell you
igorhalfeld
0
380
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
90
Other Decks in Programming
See All in Programming
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
CSC305 Lecture 10
javiergs
PRO
0
220
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
100
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
Cursorハンズオン実践!
eltociear
2
1.2k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
230
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
350
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.4k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Docker and Python
trallard
46
3.6k
Thoughts on Productivity
jonyablonski
70
4.9k
Statistics for Hackers
jakevdp
799
220k
Faster Mobile Websites
deanohume
310
31k
Balancing Empowerment & Direction
lara
5
700
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
RailsConf 2023
tenderlove
30
1.3k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Transcript
"Técnicas pra fazer e escalar Micro Front-ends" 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
Estamos em um nível de centenas de componentes além de
regras de state *e ainda precisamos saber separar bem eles
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