In this article, we will read about how to make a Pineapple curry... ahh... sounds unlike, 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 the big micro-frontends… ok, let’s jump to our main agenda.
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
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, uses a combination of frameworks or libraries to make frontend application yummy, i.e more scalable, testable and manageable.
Why we need Micro-frontend?
Micro-frontend is independent of any framework, this means we can use it with any of the popular frameworks, and not only limited to, 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 are these design problems
- Frontend updating/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 micro-frontend approach, we breakdown the application into features and then develop and deploy independent features. Now in the future, if required, we can change/upgrade a small independent deployable feature rather than concentrating on whole application up-gradation. Also on this change its Easy to get approval from business stakeholders :)
- 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 on frontend requires a similar design approach which can break down the big monolith frontend hence we termed “Microservices for frontend” as “Micro-frontend”.
- Cross-functional over cross-technology team: Most of us are working in agile managed project delivery process which 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 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…
- Using Iframe: one of the solutions to implementing micro-frontend is using the iframe approach. Its 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 iframe 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.
- Using WebComponent: There are many ways we can use webcomponents 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 which helps in inter-app communication. I would be soon writing a detailed blog on the Angular approach of building micro-frontends.
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.
3. Readymade framework: There are few frameworks available in the market which takes care of 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 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-frontend run. Tailor.js also helping engineers building micro-frontend easy. 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 ecommerce context.
There are many other options available in the market which helps 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, till then enjoy your Pineapple Curry!