Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MicroFrontends – Vergangenheit, Gegenwart & Zuk...

Avatar for SQUER Solutions SQUER Solutions
May 06, 2021
Technology
0
360

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

JAX Mainz / Remote

Avatar for SQUER Solutions

SQUER Solutions

May 06, 2021
Tweet

More Decks by SQUER Solutions

See All by SQUER Solutions
AI-Driven Legacy Decomposition
Avatar for SQUER Solutions squer
0
76
Plural of Platforms
Avatar for SQUER Solutions squer
1
58
Demystifying Event Sourcing – A Practical Approach by Shahab Ganji
Avatar for SQUER Solutions squer
0
130
Architecting Distributed Systems at Scale — From Pain to Pattern
Avatar for SQUER Solutions squer
0
240
Empowering-developers-with-Roslyn.pdf
Avatar for SQUER Solutions squer
0
120
Building Event Driven Systems at Scale with Azure Cosmos DB
Avatar for SQUER Solutions squer
0
150
Building Event-Driven Systems at Scale with Azure Cosmos DB
Avatar for SQUER Solutions squer
0
110
Platform Engineering: It's Not What You Think It Is
Avatar for SQUER Solutions squer
0
310
Patterns Of Architectural Modernization
Avatar for SQUER Solutions squer
1
480

Other Decks in Technology

See All in Technology
投資戦略を量産せよ 2 - マケデコセミナー(2025/12/26)
Avatar for tomo gamella
0
460
AI との良い付き合い方を僕らは誰も知らない
Avatar for Asei Sugiyama asei
0
270
20251219 OpenIDファウンデーション・ジャパン紹介 / OpenID Foundation Japan Intro
Avatar for OpenID Foundation Japan oidfj
0
510
"人"が頑張るAI駆動開発
Avatar for yoko yokomachi
1
620
Amazon Quick Suite で始める手軽な AI エージェント
Avatar for shimy shimy
2
1.9k
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
Avatar for yayoi_dd yayoi_dd
0
720
「もしもデータ基盤開発で『強くてニューゲーム』ができたなら今の僕はどんなデータ基盤を作っただろう」
Avatar for AEON aeonpeople
0
250
半年で、AIゼロ知識から AI中心開発組織の変革担当に至るまで
Avatar for ryu rfdnxbro
0
150
Connection-based OAuthから学ぶOAuth for AI Agents
Avatar for GMO Flatt Security flatt_security
0
390
日本の AI 開発と世界の潮流 / GenAI Development in Japan
Avatar for Yoshitaka Haribara hariby
1
500
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
9.9k
TED_modeki_共創ラボ_20251203.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150

Featured

See All Featured
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
0
130
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
400
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
1.9k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
220k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
680
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
130
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
190
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
67
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
390

Transcript

  1. @duffleit MicroFrontends Vergangenheit, Gegenwart & Zukunft JAX 2021 Mainz /

    Remote, Mai 2021

  2. @duffleit @duffleit @duffleit [email protected] David Leitner Coding Architect

  3. @duffleit

  4. @duffleit Montag, 29.02.2016

  5. @duffleit

  6. @duffleit ~ 160 Views ~ 240 Models

  7. @duffleit Transactions Overview Payment Creation Self Service Console hyperlink hyperlink

  8. @duffleit MicroFrontends @ v0.0.1-alpha

  9. @duffleit https://bluepnume.medium.com/less-is-more-reducing-thousands-of-paypal-buttons-into-a-single-iframe-using-xcomponent-d902d71d8875

  10. @duffleit Transactions Overview Payment Creation Self Service Console iframe iframe

    hyperlink hyperlink

  11. @duffleit 2016 Hyperlink

  12. @duffleit hyperlink

  13. @duffleit 2016 Hyperlink Iframes ClientSide Integration > 50% of internet

    trafic from phones ServerSide Integration

  14. @duffleit Transactions Overview Payment Creation Self Service Console iframe hyperlink

    hyperlink SelfService μService

  15. @duffleit EdgeService Payment Creation fragment SelfService μService Payment Creation μService

  16. @duffleit Server Side Includes or Edge Side Includes Project Mosaic

  17. @duffleit

  18. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes

  19. @duffleit Round Trips

  20. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes

  21. @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

  22. @duffleit • Meta-Router • State Sharing • Authn/Authz

  23. @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

  24. @duffleit

  25. @duffleit

  26. @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

  27. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router First Meaningful Paint!

  28. @duffleit 0 sec 0.3 sec 0.5 sec 0.7 sec First

    Meaningful Paint JS

  29. @duffleit Progressive Enhancement

  30. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router Progressive Enhancement ?

  31. @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

  32. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router Progressive Enhancement

  33. @duffleit Host - Container <App /> Client - Container <

    Profile /> ProfileService <Profile />

  34. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router

  35. @duffleit David Leitner @ DevoxxUA 2018: Micro Frontends – a

    strive for fully Verticalized Systems https://www.youtube.com/watch?v=oxVRG71rF3w

  36. @duffleit 2016 Hyperlink Iframes ClientSide Integration ServerSide Integration Server Side

    Includes meta-spa-router

  37. @duffleit Aber auch wenn mit Module Federation vieles besser wird*,

    oft ist ein Frontend Monolith für die gegebenen Anforderungen auch “cool genug”. 😎

  38. @duffleit by: twitter.com/swardley

  39. @duffleit David Leitner Coding Architect [email protected] All das Präsentiert und

    vieles mehr:

  40. @duffleit Let’s talk about MicroFrontends: David Leitner Coding Architect [email protected]