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
220
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
150
How to migrate legacy frontend?
igorhalfeld
1
110
Patterns for perfect components in Vue.js
igorhalfeld
0
100
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
47
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
Micro Front-ends, what they don't tell you
igorhalfeld
0
370
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
85
Other Decks in Programming
See All in Programming
自力でTTSモデルを作った話
zgock999
0
120
color-scheme: light dark; を完全に理解する
uhyo
7
510
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
510
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
330
Learning Kotlin with detekt
inouehi
1
200
良いコードレビューとは
danimal141
9
7.6k
Swift Testingのモチベを上げたい
stoticdev
2
200
DevNexus - Create AI Infused Java Apps with LangChain4j
kdubois
0
130
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
750
Google Cloudとo11yで実現するアプリケーション開発者主体のDB改善
nnaka2992
1
110
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
170
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Facilitating Awesome Meetings
lara
53
6.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
KATA
mclloyd
29
14k
Optimizing for Happiness
mojombo
377
70k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
540
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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