MicroFrontends

In this article, we will read about how to make a pineapple curry… ahh… sounds different, you are here for micro-frontend but reading about pineapple curry, what the hell is this? Don’t worry, this is just a mind trick to make your brain more active before reading about micro-frontends :) Ok let’s jump into our main topic, micro-frontends.

The demo can be seen here: https://microfrontend.netlify.com and a single micro-app here: https://microfrontend-team-movies.netlify.com/

What is a micro-frontend?

“In this approach, the web application is broken down into its features, and each feature is owned, frontend to backend, by a different team. This ensures that every feature is developed, tested and deployed independently from other features” — ThoughtWorks Technology Radar

micro-frontends team view

Why we are calling it a ‘curry’?

“Curry” is a variety of dishes that use a combination of spices or herbs to make a dish yummy, similarly. Our micro-frontend curry is an approach that uses a combination of frameworks or libraries to make frontend applications yummy, i.e more scalable, testable and manageable.

Why we need Micro-frontend?

A micro-frontend is independent of any framework. This means we can use it with any of the popular frontend libraries, such as Angular, React, or Vue. We can classify it as a solution to solve some of the frontend design problems using available UI frameworks. So let’s understand what these design problems are:

1. Frontend up-gradation/change is expensive. We are living in the “new” era wherein after every six months we are getting some new technology/framework as a solution to a big industry problem. But upgrading the application technology stack is not as simple and also not as cost-effective as it looks. Using the micro-frontend approach, we can breakdown the application into features and then develop and deploy these features independently. Now in the future, if required, we can change/upgrade a small independent deployable feature rather than concentrating on whole application up-gradation. Also, it's “Easy to get approval from business stakeholders” :)
2. Monolith on top of microservices: We have seen the advantages of microservice design in backend systems. It brings flexibility in choosing different technology stack, more focused around the business requirement, and also easy to develop and maintain. Bringing all these benefits to the frontend requires a similar design approach which can break down the big monolith frontend hence we termed “Microservices for frontend” as “Micro-frontend”.
3. Cross-functional over cross-technology team: Most of us are working in an agile managed project delivery process that advocates cross-functional over a cross-technical team (Angular/React team, Java team, DB team, etc.). Benefits are big in terms of client expectation matching and end-product delivery if we align to be cross-functional. Micro-frontend provides the flexibility to have a cross-functional team that focuses on end-to-end delivery.

How we can implement Micro-frontend?

As we know, to make “Pineapple curry”, there are different recipes available. Similarly, to implement Micro-frontend there are different recipes available. Some recipes are very easy to execute, and some require heavy lifting. One can choose a recipe/solution based on business requirements. Let me list down some of the solutions here:

1. Using an iframe: one of the solutions to implementing micro-frontend is using the iframe approach. It’s somehow best suited, but not limited in those scenarios where the business is least bothered about technology up-gradation to implement a feature like single-sign-on. Using iframes, we can host multiple applications under a single parent window. Inter-app communication can be solved using HTML5 custom events. For app bundling and deployment, one could write a custom NPM script.
2. Using Web Components: There are many ways we can use web components to build micro-frontends. In Angular, we can create sub-applications to develop different apps under a single shell application. In this approach, there are two important items. First, you need a stitching shell to combine all sub-applications and second, a messaging channel that helps with inter-app communication. I would be soon writing a detailed blog on the Angular approach of building micro-frontends

Logical view

The same approach can be used with React as well. Here also we need a stitching shell which aggregates all sub-application at run-time.

microrfrontend using react

3. Readymade framework: There are a few frameworks available in the market which take care of the stitching and inter-app communication task and help you focus more on business feature implementation. Single SPA is one the popular framework which integrates sub-apps on the client-side and provides out-of-box communication layer for sub-app communication. ARA framework is a new addition to this list, it internally uses Airbnb’s Hypernova to make micro-frontends run. Tailor.js also helps engineers building micro-frontend easily. It’s a layout service that uses streams to compose a web page from fragment services. It’s partially inspired by Facebook’s BigPipe, but developed in an e-commerce context.

There are many other options available in the market which help you make build micro-frontends using a different recipe. If you want to look at the extended list, I would recommend you to visit awesome-microfrontends. There is also one book published on the same topic, you can find it here.

In the next post, I will deep-dive one of the approaches to understand how we can actually build it. Until then, enjoy your Pineapple CURRY :)