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.
“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
“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.
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
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…
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!
Did you like this article? Consider becoming a Patron!