Common problems with Micro frontends and how to avoid them

The phrase “micro frontends” or “micro-frontends” first appeared in the ThoughtWorks Technology Radar guide in 2016. The front end is becoming increasingly essential in the new web apps being created today, while the back end is becoming less and less important. The conventional monolithic method does not work for these large applications because it is very cumbersome and complex.

Hence, the micro frontend is the solution for modern complex web apps because it enables the application to be divided into smaller modules that work independently.

In this article, we will look at the problems with micro frontends and how to avoid them.

What is a Micro Frontend?

Micro Frontend is an architectural approach that involves breaking down the front end of a web application into smaller, self-contained, and independent parts that can be developed, tested, and deployed separately. Each part is called a micro frontend, which can be developed by different teams using different technologies.

In traditional frontend development, a single monolithic application is developed, which contains all the frontend components of the application. This approach can become problematic as the application grows larger and more complex. It becomes difficult to manage, test, and deploy the application, and any changes made to one part of the application can potentially affect other parts.

Micro Frontend, on the other hand, aims to solve these problems by breaking down the front end into smaller, self-contained parts, which are developed, tested, and deployed independently. Each micro frontend can be developed by different teams using different technologies as long as they follow certain guidelines and communicate with each other effectively.

Why are Micro Frontends important?

Micro Frontends is an architectural pattern that aims to break down a large monolithic frontend application into smaller, more manageable, independent applications. Each of these smaller applications, called micro frontends, is responsible for a specific feature or functionality of the overall frontend application. There are several reasons why micro frontends are important:

• Modularity: Micro frontends enable teams to work on specific parts of an application independently, without interfering with each other’s work. This helps to reduce dependencies between teams, leading to faster and more efficient development.
• Scalability: Micro frontends allow an application to scale more easily by breaking it down into smaller, more manageable parts. This also helps to improve performance as each micro frontend can be optimized for its specific functionality.
• Reusability: Micro frontends can be reused across different applications, leading to more efficient development and maintenance.
• Flexibility: Micro frontends allow for greater flexibility regarding technology choices. Different teams can choose the tools and technologies that best fit their specific requirements without being constrained by a monolithic architecture.
• Agile development: Micro frontends are compatible with agile development methodologies, enabling teams to deliver new features and updates more quickly and efficiently.

Benefits of Micro Frontends

Micro Frontends is an architectural style that decomposes large, complex frontend applications into smaller, independent, and loosely coupled applications. This approach comes with several benefits, including:

• Independent Development: With Micro Frontends, different teams can work independently on different parts of the application, using their own preferred technology stacks and programming languages. This allows for faster development and deployment of new features and bug fixes.
• Better User Experience: Micro Frontends can improve the user experience by allowing for more personalized and customized interfaces. Different teams can work on different parts of the application, and each team can focus on creating the best user experience for their specific part.
• Improved Stability: In Micro Frontends, each frontend module is independent, which means that a failure in one module does not affect the entire application. This results in improved stability and reliability of the application as a whole.

In the following sections, we’ll discuss several common problems and how to fix them.

Redundant Dependencies

By definition, each micro frontend application is independent of the others. In other words, a micro frontend architecture consists of several frontend applications, all of which should be able to function independently. Each of them has its own dependencies that make this possible. Therefore, you are losing out on the advantages of utilizing a package manager. Your entire application may be made up of many variations of the same libraries that are dispersed throughout the micro frontends.

This is unquestionably a problem since it causes your web application to be unnecessarily larger than a monolithic architecture. The burden of downloading more data falls on the end consumers. This also affects the rendering time, which in turn affects the Google Web Vitals scores and your website’s SEO.

How to avoid this?

First, find the collection of libraries that are shared by all of the micro frontends. Secondly, create a micro frontend that contains all the shared libraries. Next, update your micro frontends so their built packages import the necessary libraries from the shared project.

However, you should note that sharing dependencies between apps brings several challenges and cannot be viewed as a straightforward process to complete, as stated in Martin Fowler’s original blog article from where this concept originated.

Conflicting and Overlapping Styles

Technology and team autonomy are excellent, but they can also cause problems. This is especially true when it comes to style. From a business perspective, each micro frontend cannot have its own design. This is due to the fact that you do not want your apps to appear to be made up of numerous patches. Everything in style, UI, and UX should look consistent.

Another problem you could face from using different frontends is having unwanted CSS rule overrides. Sometimes, this overlap can only be spotted after application deployment.

You do not want this, as your brand’s reputation may be badly impacted by these problems.

How to avoid this?

Ensuring that each team communicates with the other and has the same goal in mind is the only way to solve UI and UX problems. Also, introducing styled components may also be helpful in the above-mentioned shared micro frontend project. But doing so would force each micro frontend application to rely on it, undermining the underlying independence. However, this will keep your application from appearing uneven as a whole.

The frontend container div can be made to have an ID if you want to avoid CSS overlap. Then, set up Webpack to insert the ID before each CSS rule. Alternatively, you can use a CSS technique like BEM (Block-Element-Modifier). This allows you to view a website as a collection of reusable component blocks, each of whose class names should be different inside your project. To learn more about this system’s use, read the introduction to BEM.

Poor or Lagging Performance

Having multiple JavaScript frontend applications running on the same page can consequently slow down your application. This is because each instance of the framework needs resources like CPU, RAM, and network bandwidth.

Note that you may not notice the slowed-down application when testing your micro frontend independently from others. When multiple instances of a framework are running at once, this is when the problem starts. This is because they don’t have to share the underlying machine’s resources when they are running separately, unlike when they are deployed.

How to avoid this?

One solution to this issue is to improve team communication. Then, before executing a heavy operation to determine whether the same data has already been retrieved or generated, store the team results in a location that each micro frontend has access to.

In terms of performance, you should test the application with all of its micro frontends rather than relying on tests made on each micro frontend alone.

Deployment and Versioning

Deploying and versioning micro frontends can be challenging, especially if the application has several components that are deployed independently. It is essential to ensure that each Micro frontend is deployed correctly and all components are running on the same version to avoid compatibility issues. Additionally, it is crucial to maintain consistency in the deployment process to ensure that all components are deployed in a uniform manner.

How to avoid this?

To avoid these issues, it is recommended to use containerization technologies like Docker and Kubernetes, which enable easy deployment and versioning of Micro frontends.

Security

Security is another significant concern with Micro frontends, as each component is responsible for its own security. This can result in vulnerabilities that can compromise the entire application.

How to avoid this?

To mitigate this risk, it is essential to establish security standards and guidelines for all Micro frontends to follow. This includes using secure coding practices, implementing authentication and authorization mechanisms, and performing regular security audits and assessments.

Conclusion

In conclusion, micro frontends have gained popularity as a solution to complex web applications. However, they also come with their own set of challenges that can hinder their success. In this article, we have discussed some common problems with micro frontends, such as inconsistent styling, performance issues, and cross-team communication challenges.

To avoid these issues, it is essential to establish clear communication channels among teams, establish a common set of design principles, and use consistent technology stacks across micro frontends. Additionally, it is crucial to monitor and optimize the performance of each micro frontend to ensure a seamless user experience.

By implementing these strategies, organizations can successfully navigate the challenges of micro frontends and realize their potential benefits, such as improved scalability, easier maintenance, and better team autonomy. Overall, while micro frontends require careful planning and coordination, they can ultimately result in more robust and efficient web applications.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo