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

MicroFrontends – Vergangenheit, Gegenwart & Zukunft

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

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
100
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
80
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
120
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
87
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
430
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
130
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
150
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
440
E6c61f085d7aceaf97b7bd00e9195514?s=48 squer
0
62

Other Decks in Technology

See All in Technology
67683b0a8d24009c731787b49881a9de?s=48 tomuro
0
240
03858bb7b6debdd69ea0531b0f57c612?s=48 con_mame
5
3.7k
2da0f25da3bb542a8724475589ac79a3?s=48 katsuma
0
250
65f840d22d4507284fc10332fdde00fe?s=48 lulak21
0
150
211c8e4e5b96c116670c00cd77ebe2c1?s=48 rigolon
2
280
47e8318347fb8cd6a2c39bc6cf6e333e?s=48 hfm
0
130
Ec122b66ddfb9af0fba980ec2d0b0de4?s=48 kenjiasaba
0
570
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
1
320
B22a79a9c1bf42c1825ce42dedd41765?s=48 shinpsan
1
360
828bebe205894e1aa5f75a1fc6935a9c?s=48 ganchan11
0
160
E53046bb9794560f541fcf2cf0b9d526?s=48 sayokomiura
0
150
6f8838b2708a87ccf1015030f16880ef?s=48 godel
1
120

Featured

See All Featured
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
262
11k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
40
2.4k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
333
29k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
95
5.6k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
204
20k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
208
10k
24fc194843a71f10949be18d5a692682?s=48 gr2m
85
11k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
226
8.7k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.5k

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