This project was created to teach the micro frontend design pattern the most effective way, by building! The directory Tutorial_Docs contains a step by step detailed break down of how to build a micro frontend project. It begins with day-0 which is the same as the content below. Progress through these documents and learn the underlying tech and code required to build a MFE.
Micro frontends introduce mircoservice development principles to frontend applications.[1]
Using this architecture, teams can independently build and deploy "child" applications and these will be combined in a "parent" application that acts as a container grouping the applications together into one single usable entity.[1]
The "child" applications can also share different components between one another also.[3]
Autonomous Teams
Microservice architecture is centered around small units of functionality that can be deployed independently. Using MFEs small teams can concentrate effort on a independent segment of functionality and not worry about breaking other aspects of a website or rely on other teams to make changes to accomodate new features. Each team is therefore an expert in their domain.[1]
Maintainability
Traditionally frontends have been monolithic. Over time more changes are introduced to the application and it becomes progressively harder to maintain as multiple features may be affected by maintenance changes.[2]
Isolation of front end logic into separate applications ensures maintenance is more simple, as it can be applied only to the logic that is required to change and any changes won't affect other applications.
Speed of Delivery
Communication overhead is drastically reduced between the frontend team. Updates to specific components in the child applications will be automatically reflected in the host and deployment of the child can happen independent of other teams. Additionally, more work can be done in parallel between the different teams ensuring quicker delivery.[3]
Reusability of Independent Artifacts
Independent artifacts produced by a team can seamlessly be used into multiple places on the website. This artifact must adhere to the MFE standards agreed upon by the MFE teams for this to be feasible.[3][4]
Technology Agnosticism
This architecture permits each of the child applications te be created in whichever tech stack the team deems best, providing they maintain the MFE standard and interface contract. This is desirable as teams function autonomously in this architecture. This means that the children applications can be a combination of react, vue, svelte, etc and then combined in the host application.[3][4]
Scalable Teams
As MFE teams are small and focussed on a mutually exclusive unit of frontend logic, new small teams can be formed to build new features scalling the work horizontally.[1]
Host/Remote (Parent/Child) Integration
The host or container application must connect to all the children application artifacts and display them correctly to appear as a single monolithic application. Additionallly, the need to have comprable performance to a monolithic application despite these integrations.[1]
Operational Overhead Infrastructure for deploying and hosting applications is needed for multiple teams as opposed to a single frontend team.[1]
Consistent User Experience Teams must agree upon standards for style to ensure that there is consistency to the UI/UX across the different child applications and not feel disjointed.
The most common way to create MFEs is by using either Single-Spa or Webpack 5's Module Federation.
Single-Spa
Single-spa is a framework for bringing together multiple JavaScript microfrontends in a frontend application.[5] You can find the link to the documentation here.
Module Federation
Provides run time sharing of components between different applications, facilitating single page applications composed of multiple applications.[6]
You can find the link to the documentation here.
This project details how to build a basic micro frontend using Webpack 5's module federation. In this project you will create three react apps, two child applications with componets that the host or container application will consume to give the user the impression that they are interacting with a single page applicaiton.
We will the deploy the MFE using docker.
This tutorial requires the following:
[1] https://aws.amazon.com/blogs/architecture/micro-frontend-architectures-on-aws/
[2] https://www.sitepoint.com/micro-frontend-architecture-benefits/
[3] https://levelup.gitconnected.com/micro-frontends-what-why-and-how-bf61f1f0a729
[4] https://www.youtube.com/watch?v=w58aZjACETQ&t=202s
[5] https://single-spa.js.org/docs/getting-started-overview/
[6] https://www.youtube.com/watch?v=x22F4hSdZJM&t=17s