MicroFrontends – Vergangenheit, Gegenwart & Zukunft

JAX Mainz / Remote

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