Micro frontends

As our web applications keep growing, companies face the challenge to have multiple teams working in parallel on one big application. Over the years, we moved from developing monoliths to separating backend from frontend to cutting down the backend to multiple microservices but our frontend application especially single page applications stayed as one big codebase. 

In this setup, frontend codebase is split into many smaller, more manageable applications that can be built and deployed in parallel.

To achieve this, there are many implementations:

1- Server side integration:

It is an old approach where an application renders HTML pages based on multiple fragments using includes

With this solution we can easily remove duplicated shared dependencies between the micro frontends but we still have to rebuild the container application whenever a team releases a new update for their micro application.

3- Run time integration:

Iframes could be a solution for run time integration, as they provide a good isolation for styling and javascript code but on the other they are not flexible (in terms of changing height and width) and routing would be a big challenge.

Another more flexible solution would be to use javascript, meaning each micro application is loaded into the container application via a script tag. Once loaded this script will expose a global function that will render the micro frontend. The container app then runs this function when a micro frontend needs to be rendered.

All these approaches come with some challenges that teams try to solve when implementing micro frontends such as how to control the bundle size of the application? How to handle duplicate dependencies between different applications? How to handle communication across these micro frontends? or how to enforce UI consistency if it’s being built by different teams using different technologies?

All these questions have to be considered before deciding for your structure to adopt micro frontends to scale your frontend development.

References:

• https://martinfowler.com/articles/micro-frontends.html
  
  


• https://micro-frontends.org/
  
  


• https://medium.com/@PepsRyuu/micro-frontends-341defa8d1d4