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

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

SQUER Solutions
May 06, 2021
Technology
0
280

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

JAX Mainz / Remote

SQUER Solutions

May 06, 2021
Tweet

More Decks by SQUER Solutions

See All by SQUER Solutions
Architecting For Scale
squer
0
190
A Deep Dive into the Operator Pattern for Non-Clustered Resources
squer
0
85
The Rise of Reactive Microservices
squer
0
130
Apache Kafka — The Hard Parts
squer
0
120
The Rise of Reactive Microservices
squer
0
100
MicroFrontends — The Past, the Present, and the Future
squer
0
150
The Rise of Reactive Microservices
squer
0
290
Rethinking Reactive Architectures
squer
0
60
Leveraging the power of Reactive Architectures
squer
0
460

Other Decks in Technology

See All in Technology
cgroup の歩き方 / TechFeed Experts Night #19
tenforward
0
230
microCMS AI
microcms
0
390
社内でChatGPTを利用するためのガイドラインを整備した話
yoshikieguchi
0
960
サービスレベル管理とは？〜計測すべき指標と活用について/What is Service Level Management
newrelic2023
0
300
テスト設計チュートリアル/Test Design Tutorial
goyoki
6
4.3k
MySQL and Vitess (and Kubernetes) at HubSpot
jfg956
0
140
時系列データをChatGPTで読み解いてみる【IoT-Tech Meetup】
soracom
PRO
0
600
モノリスからの脱却に向けた 物流システムリプレイスの概要紹介 / Towards Decentralized Logistics System Replacement from Monolithic Structure
yumayabe
0
200
C# の async/await は実際にどうやって動いているか
nenonaninu
3
10k
バリエーションで差をつける。myshoesの新たな挑戦 #cicd_test_night
whywaita
PRO
0
390
ChatGPTを活用した 便利ツールの紹介
hankehly
0
320
全世界のユーザー体験の改善にNew Relic Mobileをどのように活用したか/How New Relic Mobile was used to improve the global user experience
isaoshimizu
2
370

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Documentation Writing (for coders)
carmenintech
52
3.1k
Six Lessons from altMBA
skipperchong
16
2.5k
YesSQL, Process and Tooling at Scale
rocio
158
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
16
1.2k
Into the Great Unknown - MozCon
thekraken
6
480
StorybookのUI Testing Handbookを読んだ
zakiyama
9
3.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
110
17k
Optimizing for Happiness
mojombo
366
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
46
15k
Being A Developer After 40
akosma
49
580k
A Modern Web Designer's Workflow
chriscoyier
689
190k

Transcript

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

    View Slide

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

    View Slide

  3. @duffleit

    View Slide

  4. @duffleit
    Montag, 29.02.2016

    View Slide

  5. @duffleit

    View Slide

  6. @duffleit
    ~ 160 Views
    ~ 240 Models

    View Slide

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

    View Slide

  8. @duffleit
    MicroFrontends @ v0.0.1-alpha

    View Slide

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

    View Slide

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

    View Slide

  11. @duffleit
    2016
    Hyperlink

    View Slide

  12. @duffleit
    hyperlink

    View Slide

  13. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    > 50%
    of internet trafic from
    phones
    ServerSide
    Integration

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. @duffleit

    View Slide

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

    View Slide

  19. @duffleit
    Round Trips

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  24. @duffleit

    View Slide

  25. @duffleit

    View Slide

  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

    View Slide

  27. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router
    First
    Meaningful
    Paint!

    View Slide

  28. @duffleit
    0 sec 0.3 sec 0.5 sec 0.7 sec
    First
    Meaningful
    Paint
    JS

    View Slide

  29. @duffleit
    Progressive Enhancement

    View Slide

  30. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router
    Progressive
    Enhancement
    ?

    View Slide

  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

    View Slide

  32. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router
    Progressive
    Enhancement

    View Slide

  33. @duffleit
    Host - Container

    Client - Container
    < Profile />
    ProfileService

    View Slide

  34. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router

    View Slide

  35. @duffleit
    David Leitner @ DevoxxUA 2018: Micro Frontends – a strive for fully Verticalized Systems
    https://www.youtube.com/watch?v=oxVRG71rF3w

    View Slide

  36. @duffleit
    2016
    Hyperlink
    Iframes
    ClientSide
    Integration
    ServerSide
    Integration
    Server Side
    Includes
    meta-spa-router

    View Slide

  37. @duffleit
    Aber auch wenn mit Module
    Federation vieles besser wird*,
    oft ist ein Frontend Monolith für die
    gegebenen Anforderungen auch
    “cool genug”. 😎

    View Slide

  38. @duffleit
    by: twitter.com/swardley

    View Slide

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

    View Slide

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

    View Slide