Micro Frontend


Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi-independent “micro-apps” working loosely together. The micro-frontend concept is vaguely inspired by, and named after, microservices. It extends the concepts of microservices to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a microservice architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith.

FMonolith

The idea behind Micro Frontends is to think about a website or web app as a composition of features that are owned by independent teams. Each team has a distinct area of business or mission it cares about and specializes in. A team is cross-functional and develops its features end-to-end, from database to user interface.

MFTeam

Composition of Micro Frontend

Since Micro Frontend is all about dividing a web application into different segments, it is vital to understand what these segments comprise. Typically, these can be broken down into three different types of compositions:

  • Client-side composition
  • Edge-side composition
  • Sever-side composition
MF Gif

In client-side composition, techniques such as App Shell and client-side scripting are used. This is most viable for loading single-page applications via a library or with help of frameworks such as Luigi.

Edge-side composition leverages CDN capabilities or computation near the edge or on the edge for implementing the Micro Frontend approach.

In the case of server-side composition, a mix of frameworks such as Ara Framework, Piral, Open Components, and Tailor.js, among others, is used for developing the different components of a web application.

When Micro Frontends are handled as single parts of a larger whole, you have the option of choosing from these different compositions.


Advantages of Micro Frontend Architecture

Some of the key benefits you can get from micro frontends are:

  • Better scalability.
  • Faster development, as teams can work independently. This benefit, however, is applicable only if your project is big and has more than one front-end team.
  • You can use multiple frameworks in your application. However, it should be done mindfully and transparently to avoid confusion. Nevertheless, you have a choice of what to use for a particular task. What’s more, a development team can choose their technology.
  • Deployment independence, The delivery of your micro frontend will not affect the entire application.
  • With micro frontends, you can upgrade, update, or even rewrite parts of the frontend more smoothly than was previously possible.
  • It's easier to ensure that rest of the app remains stable, as it's independent. With micro frontends, you no longer need to keep track of the whole app. A team reviews a specific micro frontend, which has been changed or expanded.
  • Codebases are smaller and more manageable.
  • Easier hiring of experts. With micro frontends, you look for professionals to work on a specific part of an app where a particular tech stack is used.
  • Easier testing, as you test just separate features.

Disadvantages of Micro Frontend Architecture

  • Complex integration testing of the application as a whole. Now that your application dynamically loads content, it can be harder to have a complete picture of the application. Each front end can be tested in isolation but getting a real-world user test is critical to ensure the application works for the end-user. You can utilize usual black-box end-to-end testing with tools like Selenium or Cypress, as it's agnostic to the implementation details.
  • A wide variety of standards you have to keep up with. The application is broken into smaller parts; thus, it can be challenging to keep all developers working off the same standards. Keeping everyone on the same page is essential to delivering a high-quality user experience.
  • Adopting micro frontends is a good idea for your business if your project is big and has more than one front-end team. With a small team, it is not worth the struggle.
  • The deployment, assembly, and configuration process for each micro frontend will be different, which requires additional effort.

Best Practices to Deploy Micro Frontend

Adopting and implementing the Micro Frontend architecture requires you to adhere to certain yardsticks to be able to reap the maximum benefit out of it. Here are the best practices to bear in mind:

1. Browser Integration

Browser integration for different web components is a must for creating frontend fragments that can be imported into the application. This allows for the different fragments to be bundled together with the back-end components. This practice facilitates a seamless merging of the building process and its visual representation. In turn, this allows for robust decisions regarding which components are to be displayed and how, thus, orchestrating a flow of events between different components


2. Building Custom Elements

Web components comprise element lifecycles callbacks that are responsible for defining the component behavior. Creating Custom elements for these lifecycle callbacks - Attached Callback, Attribute Changed Callback, Created Callback, and Detached Callback - using custom HTML tags, CSS styles, and scripts are essential to be able to categorically define their behavior.


3. Creating Shadow DOMs

DOM is the API for a Micro Frontend application. It's a good practice to create a shadow DOM by combining HTML, JavaScript, and CSS within a web component that is segregated from the main document DOM. Events behave differently in Shadow and regular DOM. When they bubble from one to the other, it results in various benefits such as stronger isolation in an iframe-like manner. This helps in preventing the risk of global styles seeping into a Micro Frontend, especially when working on transforming legacy applications.

ShodowDOM

4. The Right Frontend Structure

The structure of Micro Frontends is crucial for its operationality. It rests on elements such as the framework, isolation techniques, communication between modules, among others. A meta-framework of Single-SPA is ideal for combining different frameworks without the need for refreshing the page over and over again. Similarly, the use of Bower and NPM components helps in developing shared functionality applications that are live on different URLs. Facilitating communication via a shared events bus is also vital when each component is built on an independent framework.


5. Building Up Slowly

Given the versatility and enhanced functionality of Micro Frontends, it is natural to want to migrate legacy applications with monolithic architecture to this new environment. However, you have to factor in the risks of dependencies and technical challenges in the process. To ensure that you can pay attention to details and resolve issues quickly, it is best to build up slowly, piece-by-piece.


Top 10 Micro Frontend Frameworks

1. Bit

2. Module Federation

3. SystemJS

4. Piral

5. Single SPA

6. Luigi

7. Qiankun

8. Open Components

9. Podium

10. Mosaic 9


Summary

Micro Frontends is a great component model for transforming the way you build software, deliver it progressively and frequently. For large organizations, this can be a game-changer that facilitates continuous delivery. And for fast-growing startups, it presents a bankable choice as a scalable and flexible architecture.

It heavily depends on your business case, whether you should or should not adopt micro frontends. If you have a small project and team, micro frontend architecture is unjustified. At the same time, large projects with distributed teams and a massive number of requests benefit a lot from building micro frontend applications. That is why today, micro frontend architecture is already widely used by many large companies, and that is why you should opt for it too.


Read more blogs here