Menu

How to build Micro-Frontend Architecture with Web Components and BFF (part 1/2)?

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. 

undefined

Web Component consuming options

I introduce here two options how to consume Web Component delivered by other teams.

undefined

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.

undefined

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
  • Clear responsibilities between teams.

  • Team has End-to-End ownership from UI to API and Database.

  • Scalability.

  • Components are decentralized.

  • Web Component team can independently update it's own component when consumer application consumes Web Component directly (not apply to NPM scenario).

  • Easy integrability.

  • Role of Design System increases.
    • Needs some extra work to get authentication and authorization working. Won't work without BFF when "no tokens in browser" is applied.

    • Web Component consumer application has full trust to external Web Component and it's security. If Web Component hosting server is compromised then your application is also affected because of tight integration. This issues should be carefully evaluated especially if you're consuming external Web Component provided by third party.

    • Web Component poor performance could affect your application overall user experience.

    • Tracking of user behavior from Analytics point of view requires some extra work and collaboration.

    Next blog post shows code samples how to consume Web Components directly from producer via BFF.

    Posted By Kalle Marjokorpi
    On 24.01.2022
    Tags BFF Micro-Frontend Architecture Teams Web Component

    Comments