Micro Frontends : Design Considerations

Starting with a new front end project. Re-writing your existing application to adapt to new front end framework. Well, you have a tough choices to make — Which Frontend framework to go with? Should go with a frontend application or Micro Frontends to be considered?

Here are a few very high level points to think while deciding on a new front end project -

  • Reusability
  • Development time
  • Testing support
  • Complexity & Maintainability

As the application starts to grow bigger and bigger, things start to become more complex. A change in an application affects so many areas. A small change need a lot of regressions to be executed.

Here comes Micro Frontends into consideration where independently developed and deliverable frontend applications can be assembled to create a whole application.

Micro Frontends offers various advantages over the monolithic frontend applications. And some of these are -

  1. It extends reusability — A Micro frontend can be part of multiple applications. For example, a Micro Frontend for “Contact us” feature can be part of many customer facing application. Off course, you will need to design the Micro Frontend appropriately to be able to make it available for multiple applications.
  2. Teams can work independently — The biggest advantage of the Micro Frontend architectural approach is that the teams can work independently on the Micro Frontend application. This will be overall increase the velocity for the application being developed.
  3. Potentially more maintainable & less complex — Code base of the individual Micro Frontend applications will be lesser in comparison to the whole frontend application. Any change in the Micro Frontend application will have less impact area that makes it more manageable.
  4. Independent deployment — Deployment strategy will mainly depend on the assembly of the Micro Frontends to create the overall application. Assembly of Micro Frontend applications could be at the build time or at the run time. Independent deployment of the Micro Frontend applications could be possible if you chose to have run time integration.
  5. Possibility to use multiple frontend frameworks — Different Micro Frontends could use different Frontend applications. It allows you to utilize the expertise of the teams on different frameworks. It provides flexibility to adapt new & upcoming frameworks.

While Micro Frontend architectural approach offers a good amount of benefits but there are certain considerations / principle that should be followed to make it manageable in long run.

The most important are the following ones -

Avoid state sharing / coupling — No tight coupling

Micro Frontend applications should ideally be independently testable. There should be minimal state sharing among the Micro Frontend applications. This will ensure that each Micro Frontend application can be upgraded without affecting others. Cross application communication should also be minimal.

If there is a need to have the cross application communication then the ways like Custom events that are not specific to any particular Front end framework should be used.

There are certain pattern like BFF (Backend For Frontend) which could also be considered here. In this pattern, there are backend services associated with User experience (Micro Frontends) that will do the cross application communication.

Authentication

It is a quite possible that there is a Micro Frontend for Authentication purpose in an application. We talked about not sharing state among the Micro Frontends. So how to other Micro Frontends know whether the user is authenticated or not?

This could be handled using the concept of “Container application”.

To assemble Micro Frontends into a greater whole we could use a “Container application” which in a way acts as parent for all the Micro Frontends. “Container application” will also be a Micro Frontend in itself.

Having a “Container application” offers many advantages like sharing the cross cutting states like authentication and coordinating the routing among the Micro Frontends.

Container application will -

  • Ensure that the secured route will be invoked only if the user is authenticated or else user is redirected to the Sign In / Sign Up.
  • Pass the user authentication state while invoking a Micro Frontend.

Managing size of the overall application

Micro Frontends can have many shared components, and these components can be imported more than once. This will increase the bundle size of the overall application. Since Micro Frontends can choose to have different Frontend frameworks so it might also increase the size of the overall application.

An application of the bigger size can make it slow to load and this will impact the customer experience. Users might not be willing to wait for the application to load.

There are a few ways by which it can be handled -

  • It can be explicitly declared that the components are shared, so while bundling the overall applications, shared components are included only once. Webpack provides “ModuleFederationPlugin” that supports this.
  • Lazy loading techniques can be used to delay the loading of the Micro Frontend that are not needed at the start of the application. It will ensure that the initial load of the application is quick and downloading the bundles for rest of the Micro Frontends can carry on in background.

Managing styles

Another design consideration is to manage the styling in Micro Frontends. Since all the Micro Frontends are to be bundles together so there are chances that style in one Micro Frontend can impact the other one. This is not desirable.

One of the approach to solve this issue is to CSS-in-JS to scope the CSS by generating unique selectors.

Conclusion

  1. Micro Frontend architectural approach can help in keeping the complexity of the application manageable by dividing the whole application into multiple Micro Frontends.
  2. Work on different Micro Frontends can go in parallel hence it increases the velocity of the team and reduce the time to market.
  3. It opens up the possibility to adapt new Frontend framework easily as compared to adapt a new Frontend framework in monolithic frontend application.
  4. Flexibilities provided my Micro Frontends doesn’t come for free. If not thought through properly it can lead to various issues that impacts customer experience and maintainability.
  5. Having a container application to assemble multiple Micro Frontends seems to be a good approach.
  6. Ensure that there is minimal state sharing among the Micro Frontends.
  7. Ensure that styles are scoped to the Micro Frontends.
  8. Take care of the bundling of the shared modules. Use lazy loading when possible.
  9. User experience (UX) of your application might change to make it more suitable to adapt Micro Frontends approach.

--

--

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