Micro-Frontend Architectures: The Technical & Business Benefits

A relatively new approach towards front-end architectures is that of the micro-frontend. Whilst being in existence for the past number of years, the adoption of this architecture is beginning to become more widespread across applications and companies.

The concept of a micro-frontend is modelled somewhat on that of a micro-service, in that a larger piece of software is broken down into smaller slices — each of which is managed individually and which can be imported and reused across multiple platforms.

The Problem

Front-end codebases can over time become bloated, complex and expensive to maintain. Despite the best of intentions and implementations at the outset of a project, as business requirements evolve and technical advancements are made, a codebase grows and can soon become unmanageable and unwieldy. Dependencies across different parts of the code can make changes to that code incredibly complex to undertake.

Also, for cases where multiple applications in an organisation must implement the same feature or piece of functionality, the re-implementation of that feature or functionality across each platform can be time-consuming, repetitive, inconsistent and costly. Furthermore, subsequent updates to the feature or functionality must be carried out multiple times, leaving open the possibility of introducing new bugs or mistakenly omitting certain implementations of that code.

The Solution

Micro-frontends solve the above problems by slicing up a frontend codebase into smaller, distinct and agnostic parts. Each part is in effect a stand-alone mini application that can be managed in isolation . The various micro-frontends may then be imported into a consuming application, where they can be customised with various properties or styles, depending upon the requirements at play.

Since each micro-frontend is by its nature smaller and less complex than the aforementioned scenario, they are easier to maintain and test, thus reducing the risk of introducing bugs and creating confidence in the codebase. Micro-frontends differ from ordinary components in that they should be more complex than a regular component and contain some of the business logic that should be absent in a regular component.

Also, as a micro-frontend can be imported into another application, it only needs to be built once, regardless of the number of instances where it is consumed. This single source of truth ensures that updates may be carried out much quicker and delivery times are greatly reduced: business costs are in turn substantially cut.

Additionally, a further benefit of micro-frontends is that if a decision is made at some point to migrate an application to a new platform, it will be easier to add the existing micro-frontends to that new platform.

The Method

A number of tools and frameworks exist to enable the use of micro-frontends. Some of the more popular tools include Module Federation Plugin and Bit.

Module Federation Plugin

Module Federation Plugin works with Webpack 5 to allow for the dynamic importation of a micro-frontend during runtime. On the micro-frontend itself, a remote entry file is generated which is then downloaded by the consuming application. This tool also works to improve overall performance by ensuring that a dependency on the micro-frontend that is already downloaded on the consuming application will not be downloaded for a second time. Module Federation works with each of the major front-end frameworks / libraries: React, Angular and Vue.

Bit

Since one of the benefits of micro-frontends is that each micro-frontend may be managed and maintained by separate teams, an implication of that may be that an inconsistency grows between micro-frontends at times. Just as a micro-frontend works to enable reuse of functionality across multiple contexts in order to prevent duplication and slower delivery times, it is best practice to centralise smaller atomic components in one location for reuse across multiple micro-frontends and other contexts.

The benefits of this approach are the same as with micro-frontends: a single source of truth; more easily testable and maintainable code; consistent UX; increased user confidence; faster delivery times and reduced costs.

Bit is a widely used tool that enables individual components to be exported across multiple external applications. It also offers version control in order to easily manage updates to components as they happen. Thus components may be shared across multiple teams in order to ensure that consistency is maintained across micro-frontends. Also, a team culture and increased shared pride in work is fostered across the wider engineering team.

Conclusion

For applications that are managed by large teams of engineers in a business where requirements are likely to evolve over time, a micro-frontend architecture is a very beneficial approach to take towards the front-end. It prevents bloat. It ensures that the code is more maintainable and understandable. It is easier to test and thus the quality and reliability of an application is improved. It enables reuse of complex code and so improves delivery times and reduces overall business costs. And it draws upon the best elements of the component-based approach of modern front-end development.