# Basics: Micro-frontend

By [TVS Next Blogs](https://paragraph.com/@tvsnext) · 2023-05-22

micro frontend

---

**What is a Micro-frontend?**

[Micro-frontends](https://tvsnext.io/blog/basics-micro-frontend/) have been a hot topic over the last few years. An increasing number of organizations have been using micro-frontends, and looking at its popularity, it might be the future of frontend web development.

**Micro-frontend is an architectural style of breaking down a large application into simple, small, and manageable pieces.**

In November 2016, ThoughtWorks Technology Radar first used the term _micro-frontends_ and mentioned that organizations should assess this technique.

**Why Micro-frontend?**

As we all know, frontend development is highly complicated. Over time the frontend layer, often developed by a large team, grows and gets difficult to maintain. That is what we call a **Frontend Monolith.** This monolith leads to communication overheads, making frontend cycles longer.

Micro-frontend breaks down this frontend monolith into smaller portions, each owned by an independent team. Each team has a specialization, and the team members are cross-functional.

**Benefits of Micro-frontend**

![](https://storage.googleapis.com/papyrus_images/ea57480a1f16d713d2e077cf2327c927.webp)

In a nutshell, micro-frontends make frontend development simple, quick, and risk-free like microservices do for backend development.

**Components of Micro-frontend:**

Our “how to create micro-frontends” will be more detailed in the next blog. For now, let us understand the main components of micro-frontend projects:

**Micro-frontend**, a small project which will be imported into a parent/container project.

1.  **A container host**, the parent project where all micro-frontends will be hosted.
    
2.  **Micro-frontend framework**, Webpack 5 Module Federation Plugin
    

The most critical aspect of Micro-frontends is the integration between the host/container and Micro-frontend applications. Micro-frontend applications can be integrated in one of two ways:

![](https://storage.googleapis.com/papyrus_images/d43ababd8efa244ad046706f5f565c43.webp)

**Deploying Micro-frontends:**

Deploying Client-Side composition micro-frontends created with Webpack Module federation is extremely easy, efficient, and inexpensive.

**Webpack Module Federation:**

In June 2019, Jack Jackson, a JavaScript architect, released his masterpiece “Module Federation plugin.” **This plugin allows developers to do a dynamic import to a specific file built and deployed by a separate webpack**. This is often confused with loading a bundle on the page, but it’s not that; if you load the bundle without the webpack, it will load the entire react application, which is more than 1MB. The Module Federation gave a whole new level to micro-frontend development. As a developer, it lets you import a foreign code into your application, share codes in a straightforward way, and be more independent. It might sound complicated, but in reality, all the heavy lifting is done by the webpack.

![](https://storage.googleapis.com/papyrus_images/bb2f6f018f375c50e8e0756cc81bf5d8.webp)

Every micro-frontend application must have a Continuous Delivery Pipeline (CDP), so it can be built and tested separately. It should also be able to get into production independently without any dependencies. Multiple smaller micro-frontend applications in the production can then be composed together into one large working application.

![](https://storage.googleapis.com/papyrus_images/ff2eaacb30f057847602f6d330bc0410.webp)

In the next part, we will learn more about creating [micro-frontend architecture](https://tvsnext.io/blog/basics-micro-frontend/) and deploying micro-frontend applications in AWS.

---

*Originally published on [TVS Next Blogs](https://paragraph.com/@tvsnext/basics-micro-frontend)*