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.
Basically Web Component is a generic Javascript/HTML based component/library which is embedded to the consumer application. Web Component producer team has full ownership and control to all functionalities inside 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
In this case Web Component javascript file is fetched from the another server via Backed for Frontend proxy. BFF enables that Web Component javascript file is treated as same-origin and then same-site cookie will work. API requests with same-site cookie from Web Component User interface will be re-routed via BFF. BFF extracts bearer token from the cookie and passes it further to the destination API. Note! Authorization Scope of Web Component API is needed to request during Authorization flow.
2. Consuming Web Component via ex. NPM
Web Component (javascript) is bundled to NPM package which is added to consumer application. In this scenario Web Component's javascript/html files are part of the consumer application so there are no problems with same-site cookie. API requests will be re-routed via BFF also in this scenario.
Summary
What are pros & cons of Micro-Frontend Architecture?
Pros | Cons |
|
|
Next blog post shows code samples how to consume Web Components directly from producer via BFF.