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
MicroFrontends – Vergangenheit, Gegenwart & Zuk...
Search
SQUER Solutions
May 06, 2021
Technology
410
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
MicroFrontends – Vergangenheit, Gegenwart & Zukunft
JAX Mainz / Remote
SQUER Solutions
May 06, 2021
Transcript
40 slides
@duffleit MicroFrontends Vergangenheit, Gegenwart & Zukunft JAX 2021 Mainz /
Remote, Mai 2021
@duffleit @duffleit @duffleit
[email protected]
David Leitner Coding Architect
@duffleit
@duffleit Montag, 29.02.2016
@duffleit
@duffleit ~ 160 Views ~ 240 Models
@duffleit Transactions Overview Payment Creation Self Service Console hyperlink hyperlink
@duffleit MicroFrontends @ v0.0.1-alpha
@duffleit https://bluepnume.medium.com/less-is-more-reducing-thousands-of-paypal-buttons-into-a-single-iframe-using-xcomponent-d902d71d8875
@duffleit Transactions Overview Payment Creation Self Service Console iframe iframe
hyperlink hyperlink
@duffleit 2016 Hyperlink
@duffleit hyperlink
@duffleit 2016 Hyperlink Iframes ClientSide Integration > 50% of internet
trafic from phones ServerSide Integration
@duffleit Transactions Overview Payment Creation Self Service Console iframe hyperlink
hyperlink SelfService μService
@duffleit EdgeService Payment Creation fragment SelfService μService Payment Creation μService
@duffleit Server Side Includes or Edge Side Includes Project Mosaic
@duffleit
@duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side
Includes
@duffleit Round Trips
@duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side
Includes
@duffleit App Shell /create-payment template /overview template Payment μService Transactions
Overview Self Service Console Self Service μService Payment Creation Transactions μService request Self Service Console Payment Creation navigation navigation
@duffleit • Meta-Router • State Sharing • Authn/Authz
@duffleit App Shell Payment μService Transactions Overview Self Service Console
Self Service μService Payment Creation Transactions μService request /overview template /create-payment template Self Service Console Payment Creation navigation navigation
@duffleit
@duffleit
@duffleit App Shell Payment μService Transactions Overview Self Service Console
Self Service μService Payment Creation Transactions μService request /overview template /create-payment template Self Service Console Payment Creation navigation navigation Externals window.ng.core = @angular/core bundle
@duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side
Includes meta-spa-router First Meaningful Paint!
@duffleit 0 sec 0.3 sec 0.5 sec 0.7 sec First
Meaningful Paint JS
@duffleit Progressive Enhancement
@duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side
Includes meta-spa-router Progressive Enhancement ?
@duffleit App Shell Payment μService Transactions Overview Self Service Console
Self Service μService Payment Creation Transactions μService request /overview template /create-payment template Self Service Console Payment Creation navigation navigation
@duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side
Includes meta-spa-router Progressive Enhancement
@duffleit Host - Container <App /> Client - Container <
Profile /> ProfileService <Profile />
@duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side
Includes meta-spa-router
@duffleit David Leitner @ DevoxxUA 2018: Micro Frontends – a
strive for fully Verticalized Systems https://www.youtube.com/watch?v=oxVRG71rF3w
@duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side
Includes meta-spa-router
@duffleit Aber auch wenn mit Module Federation vieles besser wird*,
oft ist ein Frontend Monolith für die gegebenen Anforderungen auch “cool genug”. 😎
@duffleit by: twitter.com/swardley
@duffleit David Leitner Coding Architect
[email protected]
All das Präsentiert und
vieles mehr:
@duffleit Let’s talk about MicroFrontends: David Leitner Coding Architect
[email protected]
More Decks by SQUER Solutions
See All by SQUER Solutions
Building Moduliths That Last: Patterns for Sustainable Module Integration
squer
1
40
AI-Driven Legacy Decomposition
squer
0
260
Plural of Platforms
squer
1
180
Demystifying Event Sourcing – A Practical Approach by Shahab Ganji
squer
0
250
Architecting Distributed Systems at Scale — From Pain to Pattern
squer
0
360
Empowering-developers-with-Roslyn.pdf
squer
0
210
Building Event Driven Systems at Scale with Azure Cosmos DB
squer
0
250
Building Event-Driven Systems at Scale with Azure Cosmos DB
squer
0
200
Platform Engineering: It's Not What You Think It Is
squer
0
430
Other Decks in Technology
See All in Technology
あの日、見つかっていなかったらどうなっていたか
kazzpapa3
2
150
BALLAS Technology Deck
ballas_inc
0
570
[JAWS Festa 2026]一番いい仕事は、請求書に現れない / jawsfesta2026
sh_fk2
2
500
AI時代における医療情報システムのセキュリティ / Security of Healthcare IT Systems in the AI Era
henryofficial
0
150
SREのためのFinOps入門
muziyoshiz
3
1.5k
ライフワーク「猫でもわかるDirectConnect」
kentapapa
0
320
開発者とAIで共に歩み育てていく OSS開発 ～創造しながら育てていく～ / 20261105 Masaki Okuda
shift_evolve
PRO
1
110
農夫は秘伝のタレを知らない - NOBODY KNOWS THE HIDDEN SOURCE - Kaggriculture 3rd Place Solution
masspeaks
0
230
E2E Test というハーネス — AI時代の自動テスト民主化
daishukojima
0
250
GCASアップデート（202607-202610）
techniczna
1
320
Datadog の権限統制 〜Org 統合に向けて調べた注意点 / JDDUG-Meetup_24
visional_engineering_and_design
1
100
Kiro を使うコツ (頼み方、覚えさせ方、任せ方) | 目指せ Kiro マスター 09
inariku
PRO
3
150
Featured
See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
1k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
760
Producing Creativity
orderedlist
PRO
348
41k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.9k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
470
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
2
980
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
340
Believing is Seeing
oripsolob
1
280
For a Future-Friendly Web
brad_frost
184
11k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
520
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
48k
squer
kazzpapa3
ballas_inc
sh_fk2
henryofficial
muziyoshiz
kentapapa
shift_evolve
.png){kind=avatar}
masspeaks
daishukojima
techniczna
visional_engineering_and_design
inariku
frankvandijk
baasie
orderedlist
aleyda
minecr
nmsamuel
mkilby
oripsolob
brad_frost
tmiket
philnash
rkaga
![@duffleit @duffleit @duffleit [email protected] David Leitner Coding Architect](https://files.speakerdeck.com/presentations/5fee094224204093a395cdda1d85064f/slide_1.jpg){kind=link}
![@duffleit David Leitner Coding Architect [email protected] All das Präsentiert und](https://files.speakerdeck.com/presentations/5fee094224204093a395cdda1d85064f/slide_38.jpg){kind=link}
![@duffleit Let’s talk about MicroFrontends: David Leitner Coding Architect [email protected]](https://files.speakerdeck.com/presentations/5fee094224204093a395cdda1d85064f/slide_39.jpg){kind=link}