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
Techniques for making and scaling micro Front-e...
Search
Igor Halfeld
September 11, 2019
Programming
240
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Techniques for making and scaling micro Front-ends Apps
Igor Halfeld
September 11, 2019
Transcript
41 slides
"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
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
210
How to migrate legacy frontend?
igorhalfeld
1
150
Patterns for perfect components in Vue.js
igorhalfeld
0
150
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
80
Step by step I followed a career in software
igorhalfeld
0
720
Using AI to create memes
igorhalfeld
0
550
Deninho, the TS children
igorhalfeld
1
230
Micro Front-ends, what they don't tell you
igorhalfeld
0
420
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
120
Other Decks in Programming
See All in Programming
Railsのためのパスキー実践入門 〜マルチテナントSaaSでの意思決定〜
utakaha
4
4.5k
あなたはMCPの機能を、まだ知らない。
4geru
1
140
AI時代のFlutter品質設計 — アプリ品質を守るQuality Layers
omatty198
0
380
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
rshindo
0
230
Spec-driven Development with AI
simas
PRO
0
2.3k
[DroidKnights 2026] Workflow AX: From Auto-Documented Policies to E2E Testing
raeminkang
0
570
そのデザイントークン、Flutterでも同じ見た目になりますか?
nakamizu
0
350
Spec-Driven Development - Why Vaadin Is the Perfect Fit
simas
PRO
0
250
オーケストレーション記述言語 Katari
yukikurage
0
260
Distance field of Julia set
kinakomoti321
0
320
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
naruogram
0
340
AIがコードを書いてくれる時代、我々は何を確かめるのか
yosuke_furukawa
PRO
13
5.9k
Featured
See All Featured
AI: The stuff that nobody shows you
jnunemaker
PRO
12
1.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
3.1k
Ten Tips & Tricks for a 🌱 transition
stuffmc
1
280
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
1
610
Why You Should Never Use an ORM
jnunemaker
PRO
61
10k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
320
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
750
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.3k
SEO for Brand Visibility & Recognition
aleyda
0
4.9k
BBQ
matthewcrist
90
10k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
60k