Microfrontends and theming: visual consistency vs host coupling #4292
-
Microfrontends + theming: visual consistency vs host couplingI'm a frontend engineer working primarily with Angular and microfrontend-based architectures. In our current setup, microfrontends are independently developed and deployed, and composed into a host application. The specific composition mechanism (Module Federation, single-spa, iframe-based, etc.) is intentionally not the focus here. The question is architectural and framework-agnostic. The core problem is the following:
In our case, Angular Material is used today, but the concerns described below should apply equally to any UI framework or design system. Possible approaches1. Centralized theming in the hostThe host application defines the theme and produces the final CSS at build time. Microfrontends implicitly inherit this styling at runtime. Concerns:
2. Theming defined independently in host and MFEsBoth the host and each microfrontend define their own theming configuration. Concerns:
3. Global design tokens provided by the hostThe host exposes design tokens (CSS variables for colors, typography, spacing, etc.). Microfrontends consume these tokens and define their own local theming on top of them. Open questions:
4. Per-microfrontend design tokens configured by the hostEach microfrontend defines its own namespaced design tokens. The host configures those tokens at integration time. The microfrontend builds its internal theming using the values provided by the host. Concerns:
Other related concernsAsset ownershipWhere should assets used by a microfrontend live?
How do you typically define and enforce this boundary in real-world systems? Questions for the community
Note This is not a bug report, but an architectural discussion about long-term maintainability, coupling boundaries, and design contracts between hosts and microfrontends.
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Hi @victoraf-11 , I just wrote an article about this topic: I hope this answers some open questions of yours. Please give me feedback it it helped out :-) |
Beta Was this translation helpful? Give feedback.
Hi @victoraf-11 , I just wrote an article about this topic:
https://medium.com/@yannik.peschke/the-federated-design-system-manifesto-for-microfrontend-environments-99151288e724
I hope this answers some open questions of yours. Please give me feedback it it helped out :-)