This is blog post handles Micro-Fronted Architecture and how to utilize Web Components via Backed for Frontend.
What is Micro-Frontend Architecture?
Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi-independent “microapps” working loosely together. The micro-frontend concept is vaguely inspired by, and named after, microservices. - Bob Myers (Building a Micro-frontend Framework | Toptal)
Teams are usually responsible for their own specific domain area like products, invoices, orders, customer data etc. in large enterprises. Each team has the best knowledge about their own domain and they have full ownership of that domain. Traditionally in Microservice architecture team owns API endpoints and Database which contains domain specific data. Micro-Frontend Architecture enables that domain team can also delivery domain specific User interfaces "microapps" for the consumers. Typically in web environment these "microapps" are delivered as a Web Component.
Web Component consuming options
I introduce here two options how to consume Web Component delivered by other teams.
1. Consuming Web Component directly from producer
2. Consuming Web Component via ex. NPM
What are pros & cons of Micro-Frontend Architecture?
Next blog post shows code samples how to consume Web Components directly from producer via BFF.