Types of Micro-frontends

1. Monorepository

In this, the application can be found within the same directory or repository. We can create a global directory and include all the components in it to use them. It is useful in small types of applications.

Advantages

• Simplicity in Dependency Management: Monorepositories typically have centralized dependency management, ensuring that all components within the repository use consistent versions of libraries and dependencies. This can simplify the development process by reducing dependency conflicts.
• Ease of Code Sharing: With all code stored in a single repository sharing code between different parts of the system is straightforward. This encourages code reuse and helps maintain consistency across the project.
• Single Version Control History: Having a single version control history for the entire project provides a comprehensive view of all changes made over time, and ensures collaboration, troubleshooting, and auditing.
• Atomic Commits: Changes to multiple components can be committed atomically, ensuring that the project remains in a consistent state across all its parts.

2. Multirepository

In this, components can be found outside the directory. Different components with different languages can be found in the different repositories. It is useful in larger size of projects which need clarity and reliability.

Advantages

• Modularity and Autonomy: Multirepositories offer greater modularity and autonomy for individual components or services. Each repository can have its own release cycle, development process, and tooling, allowing teams to work independently and efficiently.
• Parallel Development: Teams can work concurrently on different repositories without being hindered by dependencies on other teams or components. This enables faster development cycles and reduces bottlenecks.
• Scalability: As the project grows, additional repositories can be added to make new features or services. This scalability allows for better organization and management of the codebase, particularly in large and complex projects.
• Isolation of Failures: Failures in one repository are isolated from others, minimizing the impact on the overall system. This fault isolation enhances system reliability and resilience.

3. Metarepository

These are the combination of the above two repositories. This project is divided into different repositories and one of those repositories can have more than one repository.

Advantages

• Centralized Management: A meta-repository provides centralized management and visibility across multiple repositories. This centralization can streamline processes such as dependency management, code reviews, and release management.
• Cross-Repository Refactoring: With a meta-repository, it’s easier to perform refactoring or changes that span multiple repositories. It will improve code consistency and maintainability across the entire project.
• Dependency Tracking: A meta-repository can track dependencies between repositories. It will ensure that changes in one repository will not break dependencies in others. This helps maintain consistency and stability in the overall system.
• Unified Documentation and Governance: Centralized documentation, policies, and governance can be applied uniformly across all repositories within the meta repository. It will help in consistency and compliance with organizational standards.

Micro front-end refers to a design pattern in software architecture where the user interface (UI) of a web application is broken down into smaller parts for more manageable parts known as micro front-ends. Each micro frontend is a self-contained module and is responsible for rendering a specific section of the overall user interface.

The concept of micro frontend comes from microservice architecture. Basically, Microservice is an architecture in which an application is decomposed into small independent services that can be worked independently and combined with a fully working service by combining all the services. Let’s understand it in more detail before knowing What is Micro Frontends.