The simple explanation of Microfrontend

Modern web apps are more complicated, and some of them are managed by multiple teams. When you want to put one of the features into production before releasing the entire program. So, if we just have one repository, how are we going to manage that???

As a result, a monolithic design is difficult to maintain and has other disadvantages. So, in this short article, I will explain what a micro frontend is, why it is useful, and where it is headed.?

What exactly is a micro frontend??

Micro Frontends are small apps that are separated into subdomains. There are two types of Architecture (Client Side and Server Side Architecture). Micro frontend is a client-side architecture design whereas individual web components are simple single-page applications.??

Advantages -??

• Easy and independent implementation - Implementation is easy and independent while working with micro/small components. It is simple to manage and maintain, and we can assign specific components to specific teams because the small components are simple to understand and change if necessary.? It is feasible for a developer to understand smaller component code.?
• ?Easy to deploy - We can easily and independently deploy tiny components once we have them. The creation of several pipelines and managing the URLs of each #microfrontend is the only problem we confront.?
• Efficiency - Micro Frontend's best feature is its efficiency. Let us say one of the mini-applications is not working, but the others are. These mini-applications aren't interconnected in any way. It's crucial in larger applications. Whereas single page contains #multiplefeatures. For example, if the Gmail calendar feature isn't working or has been down for a while, users can still use the other features, such as sending emails, etc.??
• ?Reusability - The simple component code can be used in a variety of situations. Once the component has been deployed via the component URL, it can be used by many teams.?

How can we build the Micro Frontend using web components??

• The application must be divided into domains or features.?
• Create a separate repository for each feature and populate it with the appropriate components.?
• Deploy the feature repository to a cloud-based service like CloudFront.?
• Create a unique selector for each component and, if necessary, add event input or output properties.?
• Create a primary container app and include the deployed build URLs in the index.html file.?
• Create a component in the container and add the deploy web component's selector to it.?
• Deploy the container app.

Code for reference

Container

Web Component