Understanding Micro-Frontends: Small, Standalone Frontend Applications for Agile Development

Introduction

In software development, the term "micro" is often associated with a modular and agile approach to building applications. Microservices have gained popularity for their ability to break down complex backend systems into smaller, independently deployable units. In a similar vein, micro-frontends have emerged as a way to modularize frontend development. In this post, we will discuss what micro-frontends are and how they can be beneficial for building modern web applications.

What are Micro Frontends?

Micro-frontends refer to small, standalone, and deliverable frontend applications that can be combined to form a whole single application. The idea behind micro-frontends is to break down a monolithic frontend into smaller, more manageable pieces that can be developed, tested, and deployed independently.

In the Micro-Frontend Architecture, there is a "Host" or a "Container" page that can host one or more Micro-Frontends. The Host/Container page can also share some of its own Micro-Frontend components.

Why Use Micro Frontends?

Micro-frontends work by breaking a web page into smaller, independent sections, each with its own functionality and user interface. Each micro-frontend can be developed using a different framework, such as React, Angular, or Vue, and communicate with each other via APIs or events. This allows teams to work independently and focus on specific features without affecting the rest of the application. When a user interacts with the page, the micro-frontends work together to provide a seamless user experience.

Benefits of Micro-Frontends:

1. Independent Development: With micro-frontends, each team can work independently on a specific part of the application without affecting the rest of the system. This results in faster development cycles and greater flexibility.
2. Technology Flexibility: Micro-frontends allow teams to choose the best technology stack for their specific needs. This means that each micro-frontend can be developed using a different framework, and each team can work with the technology they are most comfortable with.
3. Improved Scalability: Micro-frontends allow applications to be scaled horizontally by adding more instances of individual micro-frontends. This makes it easier to handle increased traffic and provides better fault tolerance.

Trade-offs of Micro-Frontends

1. Increased Complexity: Micro-frontends can add complexity to an application, especially in terms of communication between different micro-frontends. This can make debugging and testing more difficult.
2. Performance Overhead: Micro-frontends may introduce additional overhead due to the need to communicate between different micro-frontends via APIs or events. This can impact the overall performance of the application.
3. Browser Compatibility: Different micro-frontends may use different JavaScript frameworks and libraries, which can lead to compatibility issues with older browsers or devices. This can require additional effort to ensure compatibility across different platforms.

How to Integrate Micro Frontends

There are two strategies to Integrate Micro-Frontends

• Build Time Integration
• Run Time Integration

Build Time Integration

Micro Frontends can be integrated at build time by being treated as Modules as npm packages. They can be imported into container and can be used just like any other package.

The issues with this approach are:

• Syncing different versions of libraries and build issues.
• It is very hard to use different technologies.
• The size of the final package will be big because it contained all dependencies.
• Will have to deploy again for any changes in dependencies.
• Tight coupling between the container and all Micro-Frontends.

Run Time Integration

Micro frontends can be integrated at runtime also. As a frontend consists of html, CSS and JavaScript files which can use external assets these files can be directly used inside the container html file at run time. We can decide which file (which will be our micro frontend) to use at a specific location. There are two ways of doing it

• Server-Side Composition.
• Client Side Composition.

Server Side Composition

As the name suggests this one involves a server. Html pages are created by conditional usage of micro frontends and using them as fragments on the server and then are served to the client. As html does not allow direct conditional statements we can use some other scripting or markup language like

• Server Side Includes (SSI)
• Edge Side Includes (ESI)

Client Side Composition

In client side composition we provide the urls for micro frontends inside the container html in the the following ways to integrate micro frontends

• Via Web Components
• Via iframe
• via JavaScript

Frameworks

Here are five popular micro-frontend packages, along with their descriptions and links to their external sites:

• Single-SPA: Single-SPA is a popular micro-frontend framework that allows developers to build multiple JavaScript frameworks and libraries as a single application. It supports popular front-end frameworks like React, Angular, Vue, and more.
• Webpack Module Federation: Webpack Module Federation is a new feature of Webpack 5 that allows developers to build micro-frontends that can share code in real-time. It enables developers to build multiple applications that can share components and modules dynamically, without having to bundle them together. This makes it easier to create scalable, modular applications that can be updated on-the-fly.
• OpenComponents: OpenComponents is a micro-frontend framework that enables developers to build components in isolation, which can then be integrated into any web application. It uses a server-side rendering approach, which makes it easy to optimize for search engines and improve performance.
• Bit: Bit is a tool for building and sharing components across different projects and teams. It allows developers to create and manage components as independent units, which can be easily integrated into different applications. It supports multiple frameworks, such as React, Vue, and Angular.
• Mosaic: Mosaic is a lightweight and easy-to-use micro-frontend library that allows developers to build scalable and modular web applications. It supports different front-end frameworks and allows developers to create and manage components independently.

Summary

Conclusion: Micro-frontends are a great way to break down monolithic frontend applications into smaller, independently deployable units. They allow teams to work independently, choose their own technology stacks, and provide improved scalability. However, it's important to consider the trade-offs involved, such as increased complexity, performance overhead, and browser compatibility issues. By carefully weighing the benefits and trade-offs, organizations can decide if a micro-frontend architecture is the right fit for their web application development needs.