Micro Frontend: the microservice puzzle extended to frontend
summary
Three concrete attempts and clear tradeoffs: first use of web components to wrap AngularJS/Angular apps gives consistent menus but causes full-page reloads, version and library conflicts, and poor performance; second using React fragments centralizes routing yet forces React-version coupling; final approach publishes the layout as an NPM library of lightweight web components plus a Saji UI design system, runs local Express mocks for tests, and delivers four new applications in one year while keeping deployments independent and avoiding runtime conflicts.
AI-written summary · about
chapters (23)
- 0:00Intro
- 0:32Classic Study Case
- 0:48An History of Evolution
- 1:33It's Not Only About Architecture
- 2:42Microservices Benefits
- 3:50Front & Microservices: The perfect match?
- 4:45Next Step of Evolution
- 5:36The Petstore Reloaded
- 6:31Customer Focused Teams
- 7:17Micro Frontend Benefits
- 8:33Real Life Study Case: Data Fabric
- 11:43Data Fabric V2
- 12:29Design System (aka saagie-ui)
- 13:11Saagie-Layout a composition of Web Components
- 13:55What's a Web Component?
- 16:55Talking about support...
- 17:17From an Application to a Web Component
- 19:48Pros & Cons
- 22:38Galaxy an aggregation of React Fragments
- 24:53Layout-as-Lib From an Application to a Library
- 30:22Page Transitions
- 35:21Best practices, tips & tricks
- 37:58To go further
related talks
51mMicro Frontend: the microservice puzzle extended to frontend
44mMicro Frontend: the microservice puzzle extended to frontend
44mMicro Frontend: The Microservices Headache Extended to the FrontEnd
36mMicro Frontends in Action!
57mMicro Frontends – a strive for fully verticalized systems
37mIntroduction to Micro Frontends
51mMicrofrontends and UI Composition - a Code-First Dive
42mMicroFrontends for MicroServices