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
350

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
Plural of Platforms
Avatar for SQUER Solutions squer
0
2
Demystifying Event Sourcing – A Practical Approach by Shahab Ganji
Avatar for SQUER Solutions squer
0
87
Architecting Distributed Systems at Scale — From Pain to Pattern
Avatar for SQUER Solutions squer
0
200
Empowering-developers-with-Roslyn.pdf
Avatar for SQUER Solutions squer
0
110
Building Event Driven Systems at Scale with Azure Cosmos DB
Avatar for SQUER Solutions squer
0
130
Building Event-Driven Systems at Scale with Azure Cosmos DB
Avatar for SQUER Solutions squer
0
89
Platform Engineering: It's Not What You Think It Is
Avatar for SQUER Solutions squer
0
280
Patterns Of Architectural Modernization
Avatar for SQUER Solutions squer
1
450
Architecting for Scale
Avatar for SQUER Solutions squer
0
200

Other Decks in Technology

See All in Technology
『バイトル』CTOが語る！ AIネイティブ世代と切り拓くモノづくり組織
Avatar for ディップ株式会社 dip_tech
PRO
1
110
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
Avatar for GMO Flatt Security flatt_security
0
370
Developer Advocate / Community Managerなるには？
Avatar for tsho tsho
0
120
How to achieve interoperable digital identity across Asian countries
Avatar for Naohiro Fujie fujie
0
140
Access-what? why and how, A11Y for All - Nordic.js 2025
Avatar for Geisy Domiciano gdomiciano
1
130
JAZUG 15周年記念 × JAT「AI Agent開発者必見："今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
Avatar for KoheiOgawa shisyu_gaku
1
150
空間を設計する力を考える / 20251004 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
460
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す：設計と活用事例
Avatar for Fumiya Sakai fumiyasac0921
0
150
AIツールでどこまでデザインを忠実に実装できるのか
Avatar for Oikon oikon48
6
3.2k
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
Avatar for kazzpapa3 kazzpapa3
1
140
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
8
4k
Simplifying Cloud Native app testing across environments with Dapr and Microcks
Avatar for Salaboy salaboy
0
130

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
189
55k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
2.7k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k

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]