DEV Community


Micro Frontends Patterns#2: MFE in 3 minutes

okmttdhr profile image okmttdhr Updated on ・2 min read

The main goal of Micro Frontends is to enable organizations to develop applications at scale in a loosely coupled and flexible manner.

For this reason, Micro Frontends emphasizes the importance of Cross Functional teams (Cross Functional Team is a base concept that also appears in Scrum). Microservices is mainly about backend architecture, which poses some problems in achieving autonomous organization sometimes. The idea behind Micro Frontends is not to "turn the Frontends into Microservices", but rather to "have a Cross Functional team that develops its features end-to-end, and solve problems for a distinct area of business or mission".

Technically, you may imagine something like "Microservicing UI parts in a nice way with Web Component". However, Micro Frontends themselves have been around for a long time, iframes are a prime example. These days, there are also several composition patterns for extracted components (called Fragments), and there are also architectures like that prepare reverse proxies for the layout service of components. The correct understanding is that the name "Micro Frontends" was given to those old-fashioned methods, as well as to methods that meet the challenges of today's distributed systems and organizations.

Therefore, Micro Frontends is not just "let's extract the UI into common components". There are Micro Frontends concepts as mentioned above, and there are several methods to realize them (I think the phrase "The DOM is the API" from is a kind of misleading). Therefore, I believe that the solution will vary depending on the challenges of the organization.

If you want to know more about the concept of Micro Frontends, I recommend you to read the following two articles.

If you want to learn more, please read the book Micro Frontends in Action. It systematically covers concepts, specific techniques, performance and design systems, and asset management. In addition, the Reading List of this series contains information that I consider useful, including actual cases.

In this series, I would like to introduce the architecture as described in the Introduction, and also tell you how it relates to Micro Frontends.

Discussion (0)

Forem Open with the Forem app