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

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

E6c61f085d7aceaf97b7bd00e9195514?s=47 SQUER Solutions
May 06, 2021
Technology
0
130

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

JAX Mainz / Remote

E6c61f085d7aceaf97b7bd00e9195514?s=128

SQUER Solutions

May 06, 2021
Tweet

More Decks by SQUER Solutions

See All by SQUER Solutions
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
290
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
290
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
150
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
120
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
190
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
110
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
480
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
160
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
170

Other Decks in Technology

See All in Technology
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
0
200
A857277d74d4719f7f7751dca5ed553e?s=48 cmusudakeisuke
0
360
85da685d91fda190e2e3162d0de248a4?s=48 recruitengineers
0
280
79c7cde17310f3a8ee640411baed289d?s=48 hayatow
0
130
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
PRO
4
230
87e6be3b5dcac822e5dfd974ba65045a?s=48 sammy7th
0
530
2d1ae5ea9354a50d87b46f4503d11f4e?s=48 tuhin1729
1
370
A13fd21165bce344d35fd1d1245e14f2?s=48 aachan5550
0
510
E054bbb78a219fbddbac0bc492aed606?s=48 sensetime_japan
0
130
3dadebc0f79d74e50d8bfe5208cb7662?s=48 nadare881
0
920
4bd69b0ec8e5731a5332ee100ad8fb6d?s=48 entaku
1
840
67683b0a8d24009c731787b49881a9de?s=48 tomuro
1
160

Featured

See All Featured
11c84dff30266b907714802088852677?s=48 jasonvnalue
88
8.4k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
18k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
61k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.7k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
37
5.4k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
211
7.3k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
228
9k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
210
11k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
2.9k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
960

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