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 & Zukunft
Search
SQUER Solutions
May 06, 2021
Technology
0
320
MicroFrontends – Vergangenheit, Gegenwart & Zukunft
JAX Mainz / Remote
SQUER Solutions
May 06, 2021
Tweet
Share
More Decks by SQUER Solutions
See All by SQUER Solutions
Patterns Of Architectural Modernization
squer
1
190
Architecting for Scale
squer
0
63
Platform Engineering: It's Not What You Think It Is
squer
0
67
Platform Engineering— the Good, the Bad, and the Ugly
squer
1
190
Your Platform Monolith is Probably a Bad Idea
squer
1
100
Architecting for Scale
squer
0
140
Cultivating Architecture in an Agile World
squer
0
130
Platform Engineering Beyond the Buzzwords
squer
2
160
Micro Frontends —Unraveling the Illusions
squer
0
94
Other Decks in Technology
See All in Technology
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
エンジニア向け会社紹介資料
caddi_eng
14
230k
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
For a Future-Friendly Web
brad_frost
173
9.2k
Embracing the Ebb and Flow
colly
81
4.3k
How STYLIGHT went responsive
nonsquared
93
5k
4 Signs Your Business is Dying
shpigford
178
21k
The Mythical Team-Month
searls
217
43k
A Philosophy of Restraint
colly
200
16k
Designing for Performance
lara
604
67k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Docker and Python
trallard
37
2.9k
Ruby is Unlike a Banana
tanoku
96
10k
Side Projects
sachag
451
42k
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]