What is a Micro-front-end?
As the name implies, it is a small part of a front-end application. Micro-front-ends are small pieces of the whole, semi-independent or independent parts that the entire application is made of.
With Micro-front-end architecture, a given application can be sliced into logical functionality-related units, smaller separate reusable applications or web components. The final product is composed of all separate parts that work together. The user experience is the same as a monolith and not in any way different from other applications. However, the development, deployment, and testing of each of those parts can be independent and done with ease.
Why do you need micro-front-ends?
Before the advent of micro-front-end architecture, when creating a feature-rich application, the typical approach for web app development was to build a front-end app that’s on top of a microservices back-end. With microservices, the back-end is decoupled and simplified but the front-end still was left monolithic and hard to manage. Not enjoying the benefits that micro-services provide, the front-end would still require a lot of time and effort to be expanded by developers. The more the application grows, the overall еvolution of the application is harder.
The concept of micro-front-end architecture is to break that monolithic code, with different parts addressing different business domains and solving related problems. This concept is very lucrative for building enterprise applications because it provides the same benefits that microservices provide for back-end architecture. As a result, micro-front-end architecture is now widely adopted by many organizations.
Approaches for implementing micro-front-ends
Whether or not you should use micro-front-ends is very much dependent on your strategic plan and application.
Micro-front-end architecture is not ideal if you have a small project and team. Significant projects with distributed teams and a large number of requests, on the other hand, benefit greatly from micro-front-end applications. First, there must be a selection made on how to separate the frontend application before composing micro-front-ends.
There are two primary approaches:
- Horizontal split; A horizontal split allows dividing a view into many parts, each of which can be allocated to a different team. However, because different parts which are developed by different teams will be part of the same view, they must have a consistent and unified look and feel.
- Vertical split; A vertical split is an approach where an application is divided by views, allocating the entire view or set of views to a team where specialized teams can focus on the specific part of the application.
However, it is not strictly one way or the other – they can be combined if it makes sense to do that for your particular application.
Advantages of using micro-front-ends
Here are some advantages from using a micro-front-end architecture:
- Improved scalability.
- Even in very complex applications, the micro-front-ends architecture allows teams to work and grow specific parts of the application leading to more manageable scaling.
- Team independence.
- Teams can operate separately, leading to faster development, deployment does not affect other parts of the application, and debugging for errors is contained and faster. This benefit, however, is only available if your project is large and includes multiple frontend teams.
- You can employ a variety of frameworks.
- Teams can use different frameworks to develop different parts of the application, exploiting their strengths. Using different frameworks should be carefully planned because it would add more complexity. However, for upgrading or adding functionalities to existing legacy projects, developers can use technology that they are most comfortable with (either the same or new framework) and tackle that particular problem without having to rewrite the entire application.
- Easier development and testing.
- When working on enterprise applications, sometimes developing and testing would require a lot more resources. Using a micro-front-end architecture and with the right local development setup, developers can only jumpstart the related micro-front-ends and microservices. This development setup requires fewer resources. Being able to update, extend or test functionalities without running the entire enterprise application is a great benefit.
- It’s easier to keep the rest of the program stable because it’s self-contained.
- You don’t have to keep track of the entire program when using micro-front-ends. A group examines a particular micro-front-end that has been modified or enlarged.
- Codebases are smaller and easier to manage.
- Since micro-front-ends architecture breaks the front-end application into smaller pieces that target a specific part of the application. The resulting code is much smaller and easier to understand.
What about the disadvantages?
Despite the benefits of micro-front-end, this approach comes with some drawbacks.
- Micro-front-end applications require more careful planning.
- Before starting to work on applications with а micro-front-end architecture it is important to spend time isolating the different micro-front-ends and the size of each one of them. Тhere are virtually no best practices for doing this and there is no right approach. Everything is a trade-off. It all depends on the application itself, the teams, and the developer’s preferences.
- Increased complexity and communication between micro-front-ends.
- Communication between components is important and is not as straightforward as in monolithic applications which can add to the complexity.
- Performance issues.
- Performance issues can add up to the application for multiple reasons if micro-front-end development is not used and planned correctly. Duplicate dependencies and their management can be troublesome and impact performance. Duplicate requests can also be an issue where different micro-front-ends send the same requests and the global state is not managed correctly.
- Managing diverse technologies and integration challenges.
- If applications are built with different frameworks it can be hard to manage and upgrade them and integrating them can lead to time losses.
- Leading to organizational transformation through the development of modular agile teams.
Final thoughts
It is important to mention not to overcomplicate and overuse micro-front-ends. Sometimes the gains can be insignificant with no real value and finding the right size of your micro-front-ends is crucial.
Given the pros and cons of micro-front-ends and how you use them, not all applications would benefit from this approach. If not done correctly or the size of the application does not fit this approach, development can prove to be problematic, time-consuming and hard to manage.
On the other hand, the benefits for big enterprise applications, where it is crucial to separate logical parts, reuse components and where update and expansion are required only on specific parts, in most cases, will prove to be huge.
