Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
MicroFrontends – Vergangenheit, Gegenwart & Zukunft
SQUER Solutions
May 06, 2021
Technology
0
230
MicroFrontends – Vergangenheit, Gegenwart & Zukunft
JAX Mainz / Remote
SQUER Solutions
May 06, 2021
Tweet
Share
More Decks by SQUER Solutions
See All by SQUER Solutions
The Rise of Reactive Microservices
squer
0
48
Apache Kafka — The Hard Parts
squer
0
19
The Rise of Reactive Microservices
squer
0
43
MicroFrontends — The Past, the Present, and the Future
squer
0
71
The Rise of Reactive Microservices
squer
0
190
Rethinking Reactive Architectures
squer
0
29
Leveraging the power of Reactive Architectures
squer
0
400
Rethinking Reactive Architectures
squer
0
370
Rethinking Reactive Architectures with GraphQL
squer
0
230
Other Decks in Technology
See All in Technology
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
line_developers
PRO
7
3k
LINSTOR — это как Kubernetes, но для блочных устройств
flant
0
3.7k
hey BOOK
heyinc
26
290k
Dangerous attack paths: Modern Development Environment Security - Devices and CI/CD pipelines
rung
PRO
0
140
Settlement simulation testing to ensure correct settlement processing
applepine1125
2
1.3k
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
74th
0
200
森林情報のオープンデータと QGISでの利用
kou_kita
0
320
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
kentosuzuki
1
510
MySQL v5.7 勉強会/study-mysql-ver-5-7
andpad
0
2.1k
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
ryook
5
2.7k
AWSを使う上で意識しておきたい、クラウドセキュリティ超入門(駆け足版)
kkmory
0
210
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
owlinux1000
0
270
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Infographics Made Easy
chrislema
233
17k
The Art of Programming - Codeland 2020
erikaheidi
32
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
How STYLIGHT went responsive
nonsquared
85
4k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.3k
Bootstrapping a Software Product
garrettdimon
296
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Facilitating Awesome Meetings
lara
29
4.1k
Making Projects Easy
brettharned
98
4.4k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Transcript
@duffleit MicroFrontends Vergangenheit, Gegenwart & Zukunft JAX 2021 Mainz /
Remote, Mai 2021
@duffleit @duffleit @duffleit david.leitner@squer.at 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 david.leitner@squer.at All das Präsentiert und
vieles mehr:
@duffleit Let’s talk about MicroFrontends: David Leitner Coding Architect david.leitner@squer.at