Micro Frontends— Front End approach for building scalable applications(Micro-frontends)
By: Ravinder Mahajan
Tags: React, Scalability, Micro Frontends

With the recent trend of rich and fancy Web applications/pages coming into action, User interface has been dominating the market. A parallel shift that has happened over the recent few years in the rise in users’ expectations for faster and responsive applications, such faster and responsive applications are often developed by one team comprising of large front end developers, that’s what we call a front end monolith.

Over a period of time front end monolith sits on top of micro services architecture(owned by independent teams), However, the front end applications are still being developed by a single large team working on a common technology stack and has become difficult to maintain over a period of time as the single codebase becomes too much complex with the same.

Micro frontend as trend

Micro frontends is an emerging trend in the market which lets you work in a fashion similar to micro services, multiple small front end teams working towards building a large scale application and coming out with a rich web applications/pages build on either one or more technology stack. This approach often leads to the concept of vertical slicing of application where each dedicated team has in depth knowledge of the piece they own and decent know about of other parts of the applications/pages.

Independent Teams

Micro front ends gives the flexibility of one large team to work on individual pieces and have detailed knowledge about the same which enables the team to move more quickly as compared to one large team.

Independent deployments

Micro frontends brings us the advantage of each team working on their preferred language/framework and deploy them independently. Each team has the flexibility to work on it own and have its own continuous delivery pipeline.

Scalable

Micro frontends are highly scalable as the apps are developed as smaller units in total and developers have better control over them as there is huge scope for flexibility/modifications.

Feature Toggle

With micro frontends in place one can easily decide to take the feature in or out of the application on the basis of requirement. Let’s take an example of an e-commerce organisation during SALE period, this organisation expects huge amount of traffic during this period and is more focussed on serving its customer without any delay/glitch. During such high traffic organisation can decide to switch off the micro front serving 3rd party advertisements, or some features which may not be of huge relevant with SALE period.

Micro Frontends

Some challenges during the journey

Micro frontends also brings up some challenges during development and deployment phases, as we orchestrate multiple frameworks/technologies the application goes through slow loading of page and takes away the ‘WOW’ factor and optimising them is a complex task as there is basic code associated with every micro application and cannot be removed as it is needed for bootstrapping large application in browser.

Optimisation

As true micro frontends is an orchestration of multiple frameworks/techniques so optimising the same usually is a challenge as it brings in a lot of excess bytes on browser to render multiple frameworks.

Also, micro frontends which are created with multiple frameworks does not guarantee good performance because of the multitude of JS libraries/frameworks loaded,

Communication between Micro frontends

Other challenges that have been observed with micro frontends is about communication between multiple smaller apps. Not all the micro frontends are guaranteed to follow the same frameworks/technologies, so there may not be a common way for them interact amongst themselves. Few prefer custom events for communication/sharing and other believe in using storages/databases/browser apis and can vary from project to project.

Server side rendering

It is nearly impossible to work with SSR as not all frameworks support SSR and manage it on our own takes away the benefit of it as not every framework/technology has Server side rendering support and stitching them all at server takes away the benefits of few solutions provided below.

Design

A major concern is maintaining consistency of design and branding elements across multiple applications. A high level view of entire frontend is needed to ensure design consistency even as teams develop different smaller applications independently.

Solutions

One of the most important parts of micro frontends is the “stitching layer”, this is actually responsible for blending all libraries/frameworks together and making them work as one and there could be several solutions to it , however, one of the most talked about solution would be to use “single-spa” as it by default takes care of most of the things needed to write this layer.

Before jumping directly onto “single-spa” lets understand other possible solutions to solve this use case and those could be:

IFrames

Each micro app could be hosted inside an iframe, this leads to a page having multiple small application working independently on its, this poses a challenge of how to communicate between apps( window.postMessage is the only viable option)

Custom components

Each team builds their component using their web technology of choice and wraps it inside a Custom Element(Web components), each micro app manages its own routes and works together as one.

Custom Shell

In this approach each micro app is usually shared on global scope(ie: window) and parent app is responsible to stitch it all into one. It is not well adopted by SSR world and we are yet to see a powerful Micro frontend app being rendered as SSR.

Summarising

Micro frontends have evolved rapidly over a period of time and is best suitable for very large enterprise applications where in the team works in distributed environment and has minimal dependency upon each other, Micro frontends should be carefully chosen as an option and not just for the reason of being new trend in industry as it can prove out to be counter productive and impact your delivery to an extent.

Also, it is not recommended to have Micro frontends as Server side rendering solution as it only leaves us with iFrames as possible solution.

Micro frontends is future in front end space and has been adopted by a lot of large organisations as it outweighs most of the challenges / problems / performance concerns over a period of time as teams tend to move towards a common solutions and can quickly adapt to the best practices.

References