5 Reasons You Should Adopt a Micro Frontend Architecture

Micro frontends are an architectural approach to frontend development that has become increasingly popular. This could easily represent the future of frontend web development, and this is why learning the main benefits that such an architecture can bring to your applications and development team is critical.

My team and I have been using this approach for two years, and it’s time to share everything we have learned, as well as the most important reasons why you should start thinking about employing it in your next projects.

Let’s first study what the micro frontend architecture is and then dive into the five reasons to adopt it now.

What is a Micro Frontend Architecture?

Over the past few years, IT companies have begun to break large software into smaller, easier-to-manage chunks. The idea behind this approach is to have many services that can be developed, tested, and deployed independently.

This is what the microservice architecture is with regard to backend development. But the same approach can be applied to frontend development as well, and it’s named micro frontend architecture. On Martin Fowler’s official website, the micro frontend approach is defined as:

an architectural style where independently deliverable frontend applications are composed into a greater whole.

This architectural approach to frontend web development has become more and more popular because of the well-known pitfalls coming with the traditional monolithic approach. This is mainly because frontend software tends to grow rapidly, and when a monolithic architecture is used, everything gets far more difficult to maintain.

On the other hand, micro frontends give you the ability to achieve a less complex and cumbersome architecture. In particular, thanks to the micro frontend approach, you can split an entire application into small, independent parts. Each of them will then be implementable by different frontend teams, and even with different technologies. This ensures the same scalability, flexibility, and adaptability that comes with the backend microservice architecture. Moreover, this approach allows you to mix micro frontend components developed with libraries or different frameworks on the same web page.

So, it shouldn’t surprise you that micro frontends are now a trend in the IT community, and it’s an approach that’s being increasingly adopted.

5 Benefits of Choosing Micro Frontends Today

Developing with micro frontend has taught me what are the real strengths of this approach to frontend development.

Now, let’s look at the five most relevant reasons to use it, backed by my experience as a frontend developer who has worked with micro frontends for more than two years.

To create a balanced picture, this article will then be followed up by another piece on the most important five pitfalls coming with micro frontends.

Scaling up to multiple teams

The team I work with consists of developers with different backgrounds and skills. Some are experts in React, other Vue.js, or Angular. Some prefer to code in JavaScript, others in TypeScript. Initially, this represented an obstacle. The only solution was to find common ground, although this choice would have forced some devs to learn new technologies and lose their expertise. So, we looked for a solution and decided to adopt the micro frontend architectural approach.

Thanks to this, we were able to split the original team into multiple teams where everyone can express themselves at their best. This is because the different teams can make the best possible decision in terms of architecture, testing, and coding style based on the business logic they have to tackle. Plus, this approach inherently leads to code and style isolation, making each team independent of the others.

Micro frontends are also helpful in terms of the end result. This is what our team has learned after fully embracing this approach. In fact, having multiple small teams that are free to use the technologies they prefer means that they’re inherently less limited and consequently more motivated to write higher quality code.

Adopting different tech stack

Since micro frontends consist of small, independent pieces, each of them can be implemented using different technology stacks. This is an unbelievably great strength. First, because the starting team can be split into many small teams based on the expertise of a particular tech stack, which also respects the single responsibility principle. Second, since many tech stacks would be in use on the same project, it becomes easier to hire new developers.

Moreover, the micro frontend approach virtually eliminates the lock-in phenomenon to a particular technology, or at least it reduces considerably. This is because your team can always decide to opt for a new technology stack without having to translate what was developed previously. Plus, each chunk the micro frontends architecture consists of is surely smaller than a frontend monolith, and translating it into a new technology would take less time.

Also, since our team embraced the micro frontend approach, we have been incentivized to experiment with new technologies, libraries, and frameworks. In fact, whenever you have to graft a new section in your application, you can decide to adopt an entirely new tech stack. This represents an invaluable opportunity to learn how to use the many JavaScript frameworks in the market.

Development and deployment become faster

Another important aspect to address is that by adopting micro frontends, our frontend development process as a team has highly improved. The main reason is that instead of having a large team forced to deal with unavoidable communication overhead, we’re now part of smaller independent teams working on different features at the same time, irrespective of the implementation details.

As you can imagine, this also represents a huge step forward when it comes to releasing new features. The cause is that our development process had improved a lot, and the main reason is that building small micro frontends is faster and easier compared to large monolith software. Consequently, also your deployment time will improve significantly. In fact, whenever a team finishes working on a feature, they can deploy it online without having to wait.

In other words, micro frontend applications are based on independent teams working on independent features simultaneously. This cannot but represent an opportunity to achieve higher release rates, particularly as the number of small teams increases.

It makes your web application more maintainable

If you’ve ever dealt with large applications, you know that they can easily become hard to maintain, especially when they’re monolithic and are bound to grow large. On the other hand, micro frontends are based on the divide and conquer approach. This means that, by choosing this architecture for your web application, you can make every single business requirement easier to test and maintain as a result.

This is something our team learned quickly. Testing large monolithic applications is challenging and takes a lot of time, and we all knew that. But since we adopted the micro frontend approach, everything has changed. Each team is now responsible for testing the features it develops, which are far smaller than a complete frontend application. This speeds up the entire process and makes it easier. Consequently, no one is now scared of testing. Also, each separate team is now free to employ the testing tools and technologies they prefer.

Moreover, dealing with small chunks means that understanding the flow of what’s happening becomes more affordable. This leads to web applications built on many small parts that are more reliable and easy to be maintained when needed.

It represents the future of frontend development

According to the 2020 State of Microservices Report, 24 percent of developers have used micro frontends. This means that more and more companies are harnessing the power of this approach, and several popular frontend applications are expected to adopt it in the near future. In other words, micro frontends may represent the next step when it comes to frontend development.

My team has had the opportunity to deal with that, and I have no doubt that it represents the natural evolution of the monolith approach to frontend development. On the other hand, it’s still a relatively new and somewhat immature technology, and there’s still a long way to go. This is also why there are drawbacks that should be discussed (such as some micro frontend implementations leading to duplication of dependencies). We’ll look at these in the next article.

At the same time, web apps are evolving, and my team and I aren’t afraid to say that micro frontend is the natural evolution to frontend development.

Conclusion

In this article, we looked at the five most important reasons to adopt the micro frontend architectural approach based on the experience my team and I have developed working with it on a daily basis for two years. The micro frontend approach allows you to split a frontend application into small pieces independent of each other.

Although being less popular than the microservice architecture used in backend development, the idea behind it is almost the same. It’s no surprise that micro frontend architecture is now trending, and it may represent the natural evolution to frontend development. This is also why knowing it is indispensable, and learning the main reasons to adopt it now is what this article was about.

If you want to learn more about how to get started with a micro frontend framework, please consult our beginner’s guide to the micro frontend architecture, where you’ll build out a working application.

Thanks for reading! I hope that you found this article helpful. Feel free to reach out to me with any questions, comments, or suggestions.