apidays Helsinki & North 2023 - Interface Contracts in Event-driven Microfrontend Architectures, Alexander Günsche, Amazon Web Services

apidays Helsinki & North 2023
API Ecosystems - Connecting Physical and Digital
June 5 & 6, 2023

Interface Contracts in Event-driven Microfrontend Architectures
Alexander Günsche, Senior Solutions Architect at Amazon Web Services

------

Check out our conferences at https://www.apidays.global/

Do you want to sponsor or talk at one of our conferences?
https://apidays.typeform.com/to/ILJeAaV8

Learn more on APIscene, the global media made by the community for the community:
https://www.apiscene.io

Explore the API ecosystem with the API Landscape:
https://apilandscape.apiscene.io/

Transcript

1. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Interface Contracts in Event-driven Microfrontend Architectures Alexander Günsche Senior Solutions Architect lxg@amazon.com
3. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Microfrontend Architecture
4. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Traditional Microservices Architecture API Gateway / GraphQL Frontend Monolith µSvc µSvc µSvc µSvc µSvc Server Client
5. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Traditional Microservices Architecture API Gateway / GraphQL Frontend Monolith µSvc µSvc µSvc µSvc µSvc Server Client Domain Boundary
6. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Microfrontends “with” Microservices API Gateway / GraphQL µSvc µSvc µSvc µSvc µSvc Server Client Integration Layer / Shell µFE µFE µFE µFE µFE
7. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Microfrontends “with” Microservices API Gateway / GraphQL µSvc µSvc µSvc µSvc µSvc Server Client Domain Boundary Integration Layer / Shell µFE µFE µFE µFE µFE
8. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Microfrontends “as” Microservices Server Client Integration Layer / Shell µFE µFE µFE µFE µFE
9. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Microfrontends “as” Microservices Server Client Domain Boundary Integration Layer / Shell µFE µFE µFE µFE µFE
10. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Stand-alone Infrastructure
11. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Stand-alone Infrastructure Server Client Microfrontend Stack
12. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Stand-alone Infrastructure Server Client Content Delivery Network Object Storage Microfrontend Stack
13. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Stand-alone Infrastructure Server Client Content Delivery Network Object Storage API Gateway Function(s) as a Service Serverless Database Microfrontend Stack
14. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Stand-alone Infrastructure Server Client
15. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Stand-alone Infrastructure Server Client
16. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Microfrontends Composition
17. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. HAJ, CGN TFA 05/07/2022 23/06/2022 SEARCH FLIGHTS 2 adults, 3 children FILTERS RESULTS https://www.example.com HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 Microfrontends Composition
18. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. HAJ, CGN TFA 05/07/2022 23/06/2022 SEARCH FLIGHTS 2 adults, 3 children FILTERS RESULTS https://www.example.com HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 Microfrontends Composition The Million Dollar Question: Where are the context boundaries?
19. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. HAJ, CGN TFA 05/07/2022 23/06/2022 SEARCH FLIGHTS 2 adults, 3 children FILTERS RESULTS https://www.example.com HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 Microfrontends Composition The Million Dollar Question: Where are the context boundaries?
20. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. HAJ, CGN TFA 05/07/2022 23/06/2022 SEARCH FLIGHTS 2 adults, 3 children FILTERS RESULTS https://www.example.com HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 Microfrontends Composition The Million Dollar Question: Where are the context boundaries?
21. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. HAJ, CGN TFA 05/07/2022 23/06/2022 SEARCH FLIGHTS 2 adults, 3 children FILTERS RESULTS https://www.example.com HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 HAJ BUY TFS 14:33 10:16 498,00 € TFS HAJ 17:57 13:21 Microfrontends Composition The Million Dollar Question: Where are the context boundaries?
22. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. APIs in Distributed Frontend Services
23. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Web page Web Page
24. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. MFE 1 Search Form MFE 2 Results List Web page Web Page
25. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
26. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
27. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
28. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
29. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
30. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
31. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Initial Config Initial Config MFE 1 Search Form MFE 2 Results List Web page Web Page
32. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. MFE 1 Search Form MFE 2 Results List Integration Layer Web page Web Page
33. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. MFE 1 Search Form MFE 2 Results List Integration Layer Web page Web Page Events
34. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. MFE 1 Search Form MFE 2 Results List Integration Layer Web page Web Page New Config
35. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. MFE 1 Search Form MFE 2 Results List Integration Layer Web page Web Page New Config
36. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. The OpenMFE Standard
37. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. The OpenMFE Standard* * not affiliated with, or endorsed by, Amazon/AWS
38. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Interface Contracts An interface contract extends the technical capabilities of an API with a formalised commitment between an API provider and one or more consumers to interact under agreed rules.
39. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. The OpenMFE Standard OpenMFE Specification Runtime Governance Interface Contracts Manifest Structure https://openmfe.lxg.de/architecture/specification Tooling https://github.com/openmfe Best Practices https://openmfe.lxg.de/development
40. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Runtime Governance Microfrontend Integration Layer Web page Web Page “Side Channel” Interaction: Using browser context for bypassing defined interfaces. For example inject HTML into the host page to load CSS.
41. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Runtime Governance Microfrontend Integration Layer Web page Web Page “Side Channel” interaction: Using browser context for bypassing defined interfaces. For example inject HTML into the host page to load CSS. “Side Channel” interaction must be avoided. It breaks encapsulation and will have unintended side effects.
42. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
43. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
44. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
45. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates.
46. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. https://json-schema.org/
47. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Documentation and Tooling
48. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Incremental Modernisation
49. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Incremental Modernisation Legacy Website
50. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Incremental Modernisation Legacy Website New Website ???
51. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Incremental Modernisation Legacy Website MFE 1 MFE 2
52. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Incremental Modernisation Legacy Website New Website MFE 1 MFE 2 MFE 3
53. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Incremental Modernisation Legacy Website MFE MFE MFE New Website MFE MFE MFE MFE 1 MFE 2 MFE 3
54. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Incremental Modernisation Legacy Website MFE MFE MFE New Website MFE MFE UI Library with themes for different environments strongly recommended. MFE
55. INTERFACE CONTRACTS IN EVENT-DRIVEN MICROFRONTEND ARCHITECTURES © 2023, Amazon Web Services, Inc. or its affiliates. Incremental Modernisation
56. UPDATE THIS PRESENTATION HEADER IN SLIDE MASTER © 2022, Amazon Web Services, Inc. or its affiliates. Thank you! © 2023, Amazon Web Services, Inc. or its affiliates. Alexander Günsche lxg@amazon.com