Skip to Content

What Is a Micro Frontend?

What Is a Micro Frontend?

Most developers have already heard about microservice architecture, but micro frontend is a much lesser-known term. As the name suggests, micro frontend is similar in concept to microservices. It attempts to solve many of the same issues that monolithic applications present. They’re too big, hard to work with, and difficult to make changes to. Onboarding new people to work on them can be a pain. Also, if multiple teams of people are working on different parts of the application, they’ll need to coordinate all their changes with each other.

Microservices help you split the backend into more independent services. The same approach can be used to split single page applications (SPAs) into smaller apps, with the additional need for an “orchestrator” that can put different parts back together so that the user is still experiencing SPA behavior.

What Are the Alternatives to a Micro-Frontend Architecture?

Of course, there are other ways to deal with some of the undesired aspects of huge applications, like separating part of the code into its own npm package. That can solve part of the problem, like the repo being too big. For example, in Angular, you can also separate code into a module that can be lazy loaded. This can allow for vertical splitting of the application to some extent. But, it also has its disadvantages, like having to build the top-level project when one of the dependencies is updated. Also, the developer experience isn’t that great. When using any sort of framework, it’s a good idea to upgrade everything to the same version, but it’s a huge undertaking that no one is excited to do. You also have the option to join multiple apps together via iframe. It makes them independent, but I’d say maybe too independent as inter-app communication is a problem and so is sharing code, styles, etc. 

Micro Frontends to the Rescue?

Micro frontends are a combination of these two approaches. Each micro frontend is a separate application that is in comparison to the SPA. It isn’t compiled to an index.html with linked script and style files but to a JavaScript module. Instead of an iframe in the “main” app, code defines that when the URL is matching some pattern, the module is then lazy loaded and placed in a specific spot. Thanks to this we can have multiple apps on the same page that can be interconnected with each other.

As a result, micro frontends don’t need to handle app layout and basic CSS rules that can only be handled in the main app. Equally beneficial is the fact that if I have multiple micro frontends using the same version of React, then I can have them share the React module. It doesn’t have to be downloaded separately for each micro frontend. Having different versions of a JS module is also not a problem.

The main worry with micro frontends is to make sure that their styles don’t overflow to other parts of the application. Fortunately, most commonly used UI frameworks have tools to handle that with ease.

Tooling for Micro-Frontend Architectures

Writing your own code to load micro-frontend applications would be quite a task. Fortunately, there are multiple frameworks that handle orchestration and offer tooling to convert apps written in the most-popular frameworks to the micro-frontend format.

At Pure, we chose single-spa. The main benefits we’ve found are that it’s easy to understand, offers wide support for JS frameworks, and has detailed documentation. In addition, single-spa offers multiple types of micro frontends, each suited for slightly different jobs.

At the moment, we’re only using “Application” type because it’s the easiest to use for moves from SPA to micro frontends. Other types also require more detailed micro-frontend architecture. Also, “Application” is recommended as the default by the single-spa authors.





One or more routes




Declarative API

Imperative API

Exports interface


Renders UI

Renders UI

Can render UI

Life Cycle



External module without life cycle

When to Use

Basic building block

Component to be used in different frameworks

Sharing of logic


Building Micro Frontends Using the Single-SPA Framework

At the moment, we’re using single-spa with one of our bigger apps that currently contains about five micro frontends. Sometimes, different teams are working on these micro frontends than the main app development teams. Fortunately, in the last six months since switching to micro frontends, we’ve had zero issues reported. We’re also pretty happy that the main app isn’t as bloated as it was in the past and can be upgraded more easily. In addition, we don’t worry about side effects when adding new functionality since it’s usually done with a micro frontend. In the near future, we’d like to split frontends of other large apps that we‘re developing at Pure as the benefits are likely to be pretty significant for them as well. We recommend giving micro frontends a try if you’re facing the same issues we were.


퓨어스토리지 제품이나 인증 관련 질문이나 코멘트가 있으신가요?   저희가 도와드립니다.

데모 예약

라이브 데모를 예약하고 퓨어스토리지가 데이터를 어떻게 강력한 결과로 전환해주는지 직접 확인해 보세요. 

연락하기: +82 2 6001-3330



퓨어스토리지코리아 주소

30F 아셈타워,

517 영동대로,

강남구, 서울


지원하지 않는 브라우저입니다.

오래된 브라우저는 보안상 위험을 초래할 수 있습니다. 최상의 경험을 위해서는 다음과 같은 최신 브라우저로 업데이트하세요.