What is a micro frontend, and what are its advantages and disadvantages?

Have you ever encountered the term micro frontend and wondered what it’s all about? Are you surprised that microservices can be adapted to the presentation layer? Or is it the first time you have encountered the term, and you would like to learn some basic information about it? Please read our article, which explains the most important aspects of the micro frontends.

What is a micro frontend?

It is an approach based on microservices. The term first appeared in ThinkWorks Technology Radar in 2016. A micro frontend is a set of principles and techniques that allow a frontend to be built based on loosely coupled microservices. Therefore, there is no monolith from traditional designs in this case.

The main features of the solution are that multiple frameworks, such as React or Angular, are used to write the application, the individual functionalities are integrated into each other thanks to an iframe, i.e., an HTML element in which the application menu is available.

This concept is familiar from backends, where it has been popular to create separate but communicating mini-applications for many years. Micro Frontends may be associated with the Backends for Frontends approach, but it has to be said that while in Micro Frontends, each application is responsible for a different business area, in BFF, it deals with different types of customers. However, there is no obstacle to combining the two approaches.

Micro Frontends microservices have been used by many well-known companies, including Ikea, Zalando, and Spotify. The concept is implemented using various solutions. For example, Web Components are used, a set of standards such as Custom Elements, Shadow DOM, or HTML Templates, allowing every single element of a web page to be written without relying on different libraries.

We also use Micro Frontends extensively at CosmicWeb – in one of our projects, we used this approach to integrate a site running on legacy technology into a new application. Micro Frontends offer you a wide range of possibilities when building the presentation layer.

Who works within the micro frontends?

A micro frontend is a set of functions that are built by independent teams. Each of them:

  • is responsible for a different business area in which it specializes and for which it has overall responsibility,
  • is cross-functional (full-stack), which means that it develops its project comprehensively, from the construction of the database to the creation of the user interface,
  • can respond e effectively to the challenges of integrating the various applications – these include when to link the microservices, what is the best way to communicate between them and how to share resources.

Each team creates separate applications, such as a website offering new books, a search engine, a user profile, a shopping cart, or recommendations. A separate React application is created for each element, and an iframe is used to make them visible to the user as a single application. When any of the functionality is modified, the changes are made only within it and not across the entire domain.

Building a frontend using mini-applications generates many benefits.

Using a microservices approach within the frontend is:

  • a simpler architecture for each mini-application, which makes it easier to manage, maintain and debug, as well as implement patches and updates,
  • responsibility for each component being borne by only one team – this makes the elimination of problems that arise more efficient,
  • easier collaboration between development teams working on the presentation layer,
  • scalability, i.e., the possibility to freely expand each microservice to serve more users,
  • faster migration from the old to the new application.

What is also important is that each team has more freedom than the monolith when implementing functionalities, adding modifications, or solving problems that arise. This translates into:

  • The possibility to include teams that prefer different frameworks in the project so that the knowledge and experience of the best developers can be used – there are no obstacles to some elements of the application being written in React and others in Vue, as well as to synchronization through APIs being done with Axios or Fetch,
  • no major problems when one of the mini-applications has been updated and a number of bugs have appeared within it – they are only visible in one element and not in the whole domain, which does not lead, for example, to the entire service being blocked and users being unable to use it,
  • faster deployment – if a client has feedback on multiple micro-applications, fixes can be deployed to each of them separately, reducing potential delays when, for example, one of the teams is currently unavailable.

Note that it is easier to manage a team of 10 than a team of 100. This translates into greater agility and effciency in building applications.

The micro-frontend is particularly useful for large and complex projects where, due to the need for extensive functionality, the use of an approach based on a monolithic presentation layer could give rise to many problems. However, there is no obstacle to applying the concept to small projects as well – we have tried it many times at CosmicWeb.

Be aware of the limitations of Micro Frontends!

Micro frontends o er not only numerous advantages but also some disadvantages. These include:

  • the need to hire additional people responsible for integrating the entire application,
  • difficulties in establishing common design standards for all development teams,
  • the large project size may result in problems with downloading the application code through the browser.

It is also essential that possible errors in the design of one of the mini-applications, which may be detected with a long delay, will cause difficulties in implementing the entire project. It is also important to note the increased workload for the development teams when there are updates to the software used in the project or when some of the libraries are no longer supported. In such cases, changes must be made separately for each micro-application.

Despite such drawbacks, the micro frontend is a concept worth exploring when building applications. It allows the rapid deployment of microservices and the participation of specialists from different companies. If you need more information on how to use Micro Frontends effectively, please get in touch with the CosmicWeb team.