The Story of Micro Frontends

This article is also available in Spanish here: https://www.infoxicator.com/es/la-historia-de-micro-frontends

A Familiar Scenario

Sounds familiar? If you have been in this situation, you might benefit from a “paradigm switch”.

Enter the next generation in front end architecture: Microservices for the frontend!

But First, a Bit of History…

What are Microfrontends?

The Microfrontend architecture is a new paradigm that allows you to split the “frontend monolith” into small, reusable and independent user experiences.

These experiences have their own repositories, their own CI/CD pipeline and can be deployed and tested independently.

Benefits

Independent Deployments 🚀

  • Quick fixes to production: Avoiding dependencies on other teams or code allows you to ship critical fixes faster.
  • Simplified testing: Run tests for the individual frontends with defined boundaries and guarantee their functionality by following the single responsibility approach.

Independent Teams 👨‍🏫

  • Avoid dependencies: The team’s autonomy helps to reduce the need for coordination and helps avoid interference/blockers.
  • Faster time to market: Increased velocity and autonomy to push features out of the door faster.

Decoupled Codebases ✍️

  • Reduced Scope: Helps developers to understand the code better and prevents being overwhelmed by a huge codebase
  • Avoid accidental coupling: Developers only interact with specific parts of the code when developing new features and because there are set boundaries, this stops the need for connecting components that should not know about each other.

Reusability 🗃

  • Composition: similar to the reusability of components achieved by composition this approach can also be applied to micro frontends.
  • Reuse by other applications: Because micro frontends have their own CI/CD pipeline, they can be deployed to different applications and even be shared as “plug and play” solutions that contain all the business logic and UI presentation required to fulfil multiple use cases.

Trade-Offs 😞

  • Small team?
  • Small application?

The micro frontend architecture might not be a good fit and it is better suited to medium to large applications with multiple teams that need to work independently.

As with microservices, with the micro frontend pattern, you will find an increased number of moving parts that have to be managed and configured increasing the overall complexity of the application. These issues, however, are not a direct product of this pattern but an inherited side effect that comes with scaling and when operating with large applications and multiple teams. Some training might also be required and the need for new tools to help to orchestrate all the pieces and bundle them together.

Conclusion

👨‍💻Senior Engineer. 🔈 Online Conference Speaker. ⚛️ Working on a React Microfrontend Framework for millions of users worldwide. ❤️ Love helping others

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store