Memo Micro Frontends

What are Micro Frontends?🤔

Do you know about Micro Frontends (hereinafter, MFE)? To put it simply, it is a concept that extends the idea of Microservices to the frontend. We often hear about cases where Microservices are applied on the backend side, but we don't often hear about their application on the frontend.

Traditionally, web service development starts with a monolithic configuration. From there, as the scale expands for various reasons, the frontend and backend are separated, and the backend is microserviced.

[Translated article] Micro Frontends > monolith-frontback-microservices

By microservicing, we can expect significant improvements in Scalability, Agility, Independency, and Availability. However, the frontend remains monolithic. Therefore, as shown in the next image, the frontend is also divided vertically (by specialty) in the same way as Microservices.

[Translated article] Micro Frontends > verticals-headline

However, not all web services need to be MFE. As mentioned earlier, you need to consider MFE when the scale expands, so it is premature for small and medium-sized web services. Also, as shown in the next image, web services that are at the extremes of static pages (websites, web documents) and dynamic pages (web apps) are not suitable for applying MFE (as written). MFE is useful for web services that require both elements. In examples of web services where MFE is applied, e-commerce sites are mentioned.

Microfrontends: An approach to building Scalable Web Apps

※ The term MFE seems to have originated from the article Micro frontends | Technology Radar | ThoughtWorks. ※ As mentioned in Micro Frontends in Action, this concept targets web services and does not include native apps.

Companies that have adopted it 👨‍💼👩‍💼

Companies with a track record include IKEA, DAZN, Spotify, etc. Other examples are listed in Everything I researched about Micro Frontends, so please take a look if you are interested.

Advantages and Disadvantages 🔍

I will briefly introduce the advantages and disadvantages of introducing MFE (I have no production introduction experience, so this is my bias). I think it's similar to the advantages and disadvantages of Microservices.

The biggest advantage I think is Agility. When it comes to medium to large scale web services, various business domains are packed. In the case of the MFE example (EC site) mentioned earlier, it corresponds to recommendation (inspire), search, product, order (checkout), etc. If these are built with one frontend, even if the domain design is properly separated, the developer's business domain knowledge cannot keep up and the development speed decreases. As a result, the personalization of specific developers accelerates and becomes a bottleneck. Therefore, by dividing each business domain, developers can focus only on that. As a result, the development speed should be maintained.

The biggest disadvantage I think is the difficulty of Independency. For example, if there is a design system that serves as a guideline for UI/UX in the web service, it must be applied to all frontends. Therefore, it is difficult to ensure the quality of whether it is a consistent UI/UX throughout. In addition, even if one team improves the build tool, other teams may not benefit from it, and you need to think about what to do with the overall common part (access history, event management, state management, etc.) in application design.

Here Everything I researched about Micro Frontends#ProsCons also briefly writes the advantages and disadvantages, so please take a look if you are interested.

Integration Pattern 🔮

In MFE, it is important when to integrate each frontend fragment (HTML). This time, I will briefly introduce the integration pattern. For example, in the following MFE example, there are three frontend fragments (HTML) of Team-Product, Team-Checkout, Team-Inspire. The point is when to integrate these.

[Translated article] Micro Frontend > mfe-three-teams

For more details, please see Everything I researched about Micro Frontends#Integration Pattern.

Build-time Integration Pattern

Build-time integration is a pattern that integrates at the build stage before publishing the web service. This pattern is often used by bit.dev.

Package the fragments and import the packaged libraries to build (integrate). Then, all you have to do is publish the built static content.

Server-side Integration Pattern

Server-side integration is a pattern where integration is done at the HTML construction stage on the web server side. This pattern uses SSI, ESI, Podium, Tailor, Ara-Framework, etc.

Prepare a server to provide fragments, collect fragment information from them, and build the overall page HTML. This is provided to the user as SSR.

The server-side sample code is summarized next.

Also, I introduce the integration pattern at the Edge rather than the server-side in the following link.

Micro Frontends in Cloudflare Workers (Edge Workers)

※ If you want to express a rich interaction UI, you need to hydrate the server-side and client.

Client-side Integration Pattern

Client-side integration is a pattern where integration is done at the browser-side rendering stage. This pattern uses iframe or WebComponents, etc.

Embed a page (fragment) using an iframe, integrate the overall page HTML, or construct a page with HTML tags defined as custom elements like WebComponents.

Micro Frontends – The Missing Piece Of The Puzzle In Feature Teams | BlueSoft

In Conclusion 👨‍💻👩‍💻

The number of companies that have actually introduced the MFE approach is still relatively small in Japan, and it is not very clear in what situations it is useful. Also, there are not many books or knowledge, so I think it is an unknown area.

However, if you are operating a medium to large scale web service where the frontend is still monolithic, it is difficult to maintain the speed and quality of service delivery in the rapidly evolving frontend community. There may come a time when the frontend also needs to be microserviced. I would be happy if you could remember this article at that time.

※ Just a personal note, but I've recently been fond of the combination of Edge Worker + Web Components as an MFE construction approach.

These are the MFE-related articles I've written. Please take a look if you like.

If it was helpful, support me with a ☕!

Related tags

Micro Frontends

Survey