Save 37% off PRO during our Black Friday Sale! »

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

JAX Mainz / Remote

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

May 06, 2021
Tweet

Transcript

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

    Remote, Mai 2021
  2. @duffleit @duffleit @duffleit david.leitner@squer.at 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 david.leitner@squer.at All das Präsentiert und

    vieles mehr:
  40. @duffleit Let’s talk about MicroFrontends: David Leitner Coding Architect david.leitner@squer.at