What are Micro Frontends and why are they important?

Micro Frontends.... Macro Benefits? As eCommerce builds become more nuanced and intentionally crafted, Micro Frontends (MFEs) are playing an increasingly important role in our architecture. If you’re less familiar with their purpose and potential, read on to learn more about this powerful concept, and the opportunity it could bring to your own build.

What the hell are Micro Frontends?

Micro Frontends are an architectural style that sees the frontend of a website or web-based app split into loosely coupled components or services. Essentially, they could be considered the frontend equivalent of backend microservices, providing customer-facing components which are independently deployable.

How do Micro Frontends work?

Micro Frontends work by breaking down the architecture of your site or app into a composition of features. Each of these different components is cared for by different cross-functional teams. These are governed by customer need or use case (i.e “payment” or “search”), as opposed to individual skill sets or specific technology.

When paired with server-side microservices, developers can use Micro Frontends to split an entire web solution into several end-to-end verticals.

Why are Micro Frontends important?

That’s the what – now, the why. When would implementing Micro Frontends be advantageous to a build? Broadly, the core and overarching benefits of Micro Frontends include...

• More team and system autonomy: Product teams work on features which are self-contained and running with minimal codependency on other features. This means that the customer-facing app or site can function even when some components are temporarily out of action.

• More manageable codebases: Micro Frontends have their own individual codebases, which will inevitably be lighter and easier to keep under control when it comes to their organisation and growth. Dedicated, smaller teams are allocated to each of these code bases, helping to simplify code reviews etc.

• More streamlined growth: Features operate independently, so scaling can also happen independently. It’s typically more cost and time efficient to scale where the need is, without having to scale the entire application.

• More productive dev teams: Finally, with clear focus and a lower barrier to entry (thanks to the simplified nature of Micro Frontend code bases), it’s easier for your developers to rapidly bring value to a project, enhancing cohesion, morale and productivity.

Rotate° on the role of Micro Frontends

Here at Rotate°, we see Micro Frontends as an antidote to some of the issues increasingly associated with cumbersome monolithic builds. The legacy of sites built on this traditional architecture can all too easily become one of complexity and commitment – deployments are slow and rebuilds are a colossal undertaking. Issues can fly under the radar and, even when they are identified, there can be limited scope for creative problem-solving.

Within our builds, we’ve seen success by including a Micro Frontend aggregator fronted by a content delivery network (CDN) within our architecture. This enables fragments (which are all fronted by our CDN) and the cache to be configured independently – a big win in terms of optimisation. Additionally, this architecture allows both vertical and horizontal slicing (of page slices and specific fragments within a certain page).

There are other wins for performance too. Micro Frontends allow for the introduction of "Island architecture" – where interactive UI components render in insolation to a surrounding “sea” of static HTML. This means slow rendering Javascript can be minimised, and allows for prioritised parallel loading.

For a deeper technical dive into our approach to the deployment of Micro Frontends, our Head of Engineering Austin Weight has written a piece that goes into a good deal of detail, and outlines some of the improvements that he’s seen linked to the rollout of this architecture.

Micro – The Next Big Thing?

Micro Frontends are the subject of growing interest, and increasingly seen to offer access to some significant build benefits. Closely tied to all of the opportunities offered by Composable Commerce, Micro Frontends can play a key role in helping teams move away from the monolithic status quo that many builds have been governed by up until now.

Overall, they herald an exciting time to be building, and a good time to team up with an experienced partner such as Rotate° to get the most out of this new opportunity for enhanced agility and flexibility.