So you came across this topic called Microfrontends, and you must be wondering what is it and how is it beneficial for larger companies? What makes it so special from simple monolithic application? Let's see what are microfrontends.

Grady Booch - American Software Engineer, Co-creator of the Unified Modeling Language (UML).

So now you must be clear about all the benefits of the micro-frontend architecture, why you should use it when developing large scale applications. Now let's see some of the drawbacks of micro-frontends you must be aware before making the decision.

Kent Beck - American Software Engineer, Creator of Extreme Programming (XP) and Test-Driven Development (TDD).

We have discussed quite a few key points on benefits of using microfrontend architecture. We also discussed some of the use cases where microfrontend can be an overkill. Let's move forward and discuss different ways we can implement microfrontend. There are many ways we can implement micro-frontend architecture, there are lot's of custom approach as well, but here we will discuss only the popular and efficient ways to develop microfrontend applications:

Iframes can be used to embed different frontend components into a single page. While this approach offers strong isolation between components, it comes with limitations, few of them are, difficulties in sharing state and styling between components, URL navigation within embed app from parent app and inefficient resource sharing.

This approach involves hosting different apps, each in a separate sub-domain of a domain, making it suitable for some use cases. It can be a better solution when you are building an entirely separate kind of child app which is related to your parent app like something similar to Amazon pay which is a child app of Amazon e-commerce platform. So it makes sense to host it in a subdomain, something like payments.amazon.com. This approach may be suited for some cases but it is not resource efficient as every resource is downloaded again for different apps upon request which will result in larger bandwidth usage, hence more cost. Also it can be security vulnerable if you are using same authentication for all child apps as sharing authentication token in different domain can be challenging. Also sharing data or functionality between different apps can be challenging on the frontend side.

This approach should only be used when you need SEO for your apps. Otherwise there is no reason to use it as it drastically complexes things to do in the frontend side as well as in the backend side. First we need a lot of configuration if we want to use modern frameworks like React or Vue to use it on server side. Secondly, it becomes really difficult to share frontend functionalities and states between them. Also again it is not resource efficient as it will also request every single common resource again and again upon request rather than sharing it between apps. This has the highest complexity of setup as compared to other approaches, which makes it vulnerable and one mistake can break your app. It can be an overkill for many use cases which require to use micro-frontend architecture. 

Module Federation is the most efficient way to deal with micro-frontends. It comes with the capabilities to share apps, components or even functionalities between apps. It even shares the external modules we are leveraging so it is really good when comes to cutting down bandwidth cost. With module federation, the apps are even much faster compared to the other approaches and security is top notch. Each app can be developed independently and one host app can render all apps to work as one. Only drawback is that it is very hard to setup configurations and hosting for this, several steps needed to configure on the app side to get started. Once configuration is done then all the next steps are pretty much the same as in monolithic apps. One more limitations with this approach is the SEO, but when you are building something with micro-frontend, it usually is on the application side rather than on the marketing side. So it offers a lot more than it's limitations are and it is the preferred way to develop micro-frontend apps.

In simple words, YES. It is the way to build apps in micro-frontend. Module federation makes it seem like a monolithic app but behind the scenes there are separate apps for different parts of the product. If your product will have multiple complex parts, you should separate it and opt for micro-frontend. It's the future of app development.