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
MicroFrontends – Vergangenheit, Gegenwart & Zuk...
Search
SQUER Solutions
May 06, 2021
Technology
0
350
MicroFrontends – Vergangenheit, Gegenwart & Zukunft
JAX Mainz / Remote
SQUER Solutions
May 06, 2021
Tweet
Share
More Decks by SQUER Solutions
See All by SQUER Solutions
Demystifying Event Sourcing – A Practical Approach by Shahab Ganji
squer
0
37
Architecting Distributed Systems at Scale — From Pain to Pattern
squer
0
130
Empowering-developers-with-Roslyn.pdf
squer
0
77
Building Event Driven Systems at Scale with Azure Cosmos DB
squer
0
100
Building Event-Driven Systems at Scale with Azure Cosmos DB
squer
0
70
Platform Engineering: It's Not What You Think It Is
squer
0
230
Patterns Of Architectural Modernization
squer
1
400
Architecting for Scale
squer
0
180
Platform Engineering: It's Not What You Think It Is
squer
0
200
Other Decks in Technology
See All in Technology
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
130
How Community Opened Global Doors
hiroramos4
PRO
1
120
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
580
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
150
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
320
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
190
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
590
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
エンジニア向け技術スタック情報
kauche
1
270
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Balancing Empowerment & Direction
lara
1
380
Code Reviewing Like a Champion
maltzj
524
40k
BBQ
matthewcrist
89
9.7k
Building an army of robots
kneath
306
45k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Why Our Code Smells
bkeepers
PRO
337
57k
Side Projects
sachag
455
42k
Building Applications with DynamoDB
mza
95
6.5k
Designing Experiences People Love
moore
142
24k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
@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]