Micro frontends are the technical representation of a business subdomain, they provide strong boundaries with clear contracts, also they avoid sharing logic with other subdomains (DDD) Luca Mezzalira
Domain and subdomains are concepts used mainly in backend projects, but they can be used in frontend as well.
Micro Frontends is an old topic, with lots of different approaches. Same paradigm as micro-services in the backend.
Often, when an application needs to scale we start using the same strategies:
- More databases
- More microservices
- ...
The idea with micro frontends is to apply some of the same principles to the frontend code, more micro frontends. Additionally, micro frontends allow us to scale the teams, no the infrastructure.
You share nothing with other micro frontends.
Slice the domain of the application in subdomains. Assign teams for each one.
- iframes
- Open Components. Front + Back inside self-container units.
- Server-side composition. (Mosaic9)
- URL
- Single SPA
- Frint JS
- Smaller, more cohesive and maintainable codebases.
- Better collaboration. A large number of teams and developer can work on the same product.
- It eases the use of different frameworks. -> Encourages different better solutions to different problems.
- Strong boundaries.
- More deploys.
- Less friction between teams.
- More independent teams.
- Better management.
- Innovation without impacting the entire application.
- Better dependency management.
- Easier to upgrade.
- Easier to maintain legacy code.
- More autonomous teams. They can all do the full work.
- Faster developer onboard process.
- Opportunity to test different technologies in the same product -> Developers more motivated.
- More complex communication between frontend parts.
- More parts, more builds to set up.
- Duplication of dependencies.
- Increases the number of bytes our users must download.
- Repetition of code.
Check Building Micro Frontends with React, Vue, and Single-spa for a great example.
Bigger example: Simple SPA examples
- Good for big teams and/or projects.
- Good for distributed teams.
- Helps to migrate.
- Helps to coexist applications.