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
370
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
160
How to migrate legacy frontend?
igorhalfeld
1
110
Patterns for perfect components in Vue.js
igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
51
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
200
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
88
Front-end Clean Architecture
igorhalfeld
2
270
Other Decks in Programming
See All in Programming
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
複数アプリケーションを育てていくための共通化戦略
irof
2
620
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
320
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
Parallel::Pipesの紹介
skaji
2
870
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
240
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
250
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
180
tsconfigのオプションで変わる型世界
keisukeikeda
1
130
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
1
110
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
41
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
BBQ
matthewcrist
88
9.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
How GitHub (no longer) Works
holman
314
140k
Embracing the Ebb and Flow
colly
85
4.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Adopting Sorbet at Scale
ufuk
76
9.4k
Visualization
eitanlees
146
16k
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