Micro-frontend architecture is a collection of independently developed UI components that get assembled into a hub or Host page, giving a single-page Application User Experience.

This architecture encourages the development team to develop smaller, independent components, which also enables scalable and parallel development.

Micro-frontend extends the concept of Micro Services to the frontend world. Now, the current trend is to build a feature rich and powerful browser application, that sits on top of the microservice architecture.

Micro Frontend Architecture suggests and encourages the development of the website or web app as a combination of rich features which can be owned by independent individuals or small teams. Each team has a distinct area of expertise, and they develop it from scratch till production.

Components of a Micro Frontend Architecture

1. Micro Frontend Components: These components are the small parts of a web page and can be used anywhere on the webpage independently.
2. Host Pages: These are hub pages where all the micro frontend components come together to complete the web page.
3. Micro Frontend Framework – This is a framework which helps host pages and Micro Frontend Components to communicate. So, the app can talk to their backends or endpoints individually. 

As shown below, Bootstrap or Launch (Hub/Host Page) app, loads all the Micro Frontend Component Apps and mounts and unmounts in the DOM depending on the user interaction or routing.

Advantages of Micro Frontends

1. Scalability – Multiple engineers can work on the same page by dividing the components which can help in scaling of the App development horizontally which allows engineers to build, test and deliver it faster.
2. Reusability – Similar components can be reused as the components are independent of each other, as only the Data set will change having the same user interface. Hence, help in reducing the duplicate or common code and save development time.
3. Independent Apps – As in Micro Frontend Framework, components are built as an independent Web App, these apps can be built, tested and released independently of the other component and Host Page. It also reduces the coordination between teams and helps in faster delivery time.
4. Easier to develop and deploy – As these web apps are small in nature and developed by a single engineer or a very small team, it becomes easier to build, test and deploy it independently.
5. Easier Testing – Being a small web app, there will be a small number of unit tests and it will be faster to test the web apps, where in a larger web app, due to large number of unit tests, it takes longer time.
6. Shared Styles – Common styles can be placed in the Host page which can change the component style based on the host page styling, it helps in updating the common styling to each component.
7. Using Styled Components – This uses the power of tagged templates to style components. It removes the mapping between components and styles. This means that when you’re defining your styles, you’re creating a normal React component that has your styles attached to it.
   When using styled components, it creates a Styled Label. It will use a hashing algorithm to generate a unique identifier. This is what prevents class names from overlapping, saving the trouble of coming up with your own. Now, when you add or change your CSS, you don’t need to worry about your styles leaking unpredictably into other parts of the app. Similarly, when you delete a component, you also delete all the styles along with it.

Micro Frontend Integration Approaches

There are many architecture approaches that could be called Micro Frontend Architecture.

1. Server-side Template Composition – This is pretty standard, creating the HTML page in the server side before sending it to the Client browser. This approach sounds more monolithic, but we’ve split up our code in such a way that each piece represents a self-contained domain concept that can be delivered by an independent team.
2. Build-time Integration – In this approach each micro frontend component is a package, have the container application include them all as library dependencies. But as usual this approach also produces a single deployable JavaScript bundle which contains duplicate common dependencies.
3. Run-time Integration via iframes – Simplest approach is to compose the whole application together in the browser using iframes. It also offers a good degree of isolation in terms of styling and global variables, which won’t interfere with any other component.
4. Run-time Integration via JavaScript – This approach is more flexible as all the independent Micro Frontend Web apps can be included to the Hub/Host page using a <script> Tag. As all the bundles can be developed, tested and deployed individually, it satisfies the Micro Frontend Architecture.
5. Run-time Integration via Web Components – This approach is the same as the above approach but with a small difference, doing it ‘The Web Component Way’.