Micro Frontends Architecture

What Is a Micro Frontend?

Micro frontends are an architectural approach that extends the concept of microservices to the front end of web applications. In a micro frontend architecture, a complex web application is broken down into smaller, independently deployable, and maintainable units called micro frontends. Each micro frontend is responsible for a specific part of the user interface and its related functionality.

Key characteristics and concepts of micro frontends include:

• Independence: Micro frontends are self-contained and independently developed, tested, and deployed. This autonomy allows different teams to work on different parts of the application with minimal coordination.
• Technology agnostic: Each micro frontend can use different front-end technologies (e.g., Angular, React, Vue.js) as long as they can be integrated into the parent or Shell application.
• Isolation: Micro frontends are isolated from each other, both in terms of code and dependencies. This isolation ensures that changes in one micro frontend do not impact others.
• Integration: A container or Shell application is responsible for integrating and orchestrating the micro frontends. It provides the overall structure of the user interface and handles routing between micro frontends.
• Independent deployment: Micro frontends can be deployed independently, allowing for continuous delivery and faster updates. This reduces the risk of regression issues and accelerates the release cycle.
• Loose coupling: Micro frontends communicate through well-defined APIs and shared protocols, such as HTTP, allowing them to be loosely coupled. This separation of concerns simplifies development and maintenance.
• User Interface composition: The container application assembles the user interface by composing the micro frontends together. This composition can be done on the server-side (Server-Side Includes) or client-side (Client-Side Routing).
• Scaling and performance: Micro frontends enable the horizontal scaling of specific parts of an application, helping to optimize performance for frequently accessed areas.
• Decentralized teams: Different teams or development groups can work on individual micro frontends. This decentralization is advantageous for large or distributed organizations.

Micro frontend architectures are particularly useful in large, complex web applications, where a monolithic approach might lead to development bottlenecks, increased complexity, and difficulties in maintaining and scaling the application.

By using micro frontends, organizations can achieve greater flexibility, agility, and maintainability in their front-end development processes, aligning with the broader trend of microservices in the world of software architecture.

Micro Frontends Hosted Into a Single Shell UI

Let's look at how two Angular micro frontends can be hosted into a single Shell UI.

To host two Angular micro frontends in a single Shell Angular UI, you can use a micro frontend framework like single-spa or qiankun to achieve this. These frameworks enable you to integrate multiple independently developed micro frontends into a single application Shell. Here’s a high-level overview of how to set up such an architecture:

1. Create the Shell Angular Application

Set up your Shell Angular application as the main container for hosting the micro frontends. You can create this application using the Angular CLI or any other preferred method.

2. Create the Micro Frontends

Create your two Angular micro frontends as separate Angular applications. Each micro frontend should have its own routing and functionality.

3. Configure Routing for Micro Frontends

In each micro frontend application, configure the routing so that each micro frontend has its own set of routes. You can use Angular routing for this.

4. Use a Micro Frontend Framework

Integrate a micro frontend framework like single-spa or qiankun into your Shell Angular application.

Here’s an example of how to use single-spa in your Shell Angular application:

Install single-spa:

npm install single-spa

Shell Angular Application Code

In your Shell Angular application, configure the single-spa to load the micro frontends.

import { registerApplication, start } from 'single-spa';

// Register the micro frontends
registerApplication({
  name: 'customer-app',
  app: () => System.import('customer-app'), // Load customer-app
  activeWhen: (location) => location.pathname.startsWith('/customer-app'),
});

registerApplication({
  name: 'accounts-app',
  app: () => System.import('accounts-app'), // Load accounts-app
  activeWhen: (location) => location.pathname.startsWith('/accounts-app'),
});

// Start single-spa
start();

5. Host Micro Frontends

Configure your Shell Angular’s routing to direct to the respective micro frontends based on the URL. For example, when a user accesses /customer-app, the shell should load the customer micro frontend, and for /accounts-app, load accounts micro frontend.

6. Development and Build

Develop and build your micro frontends separately. Each should be a standalone Angular application.

7. Deployment

Deploy the Shell Angular application along with the micro frontends, making sure they are accessible from the same domain.

With this setup, your Shell Angular application will act as the main container for hosting the micro frontends, and you can navigate between the micro frontends within the shell’s routing. This allows you to have a single Angular UI that hosts multiple micro frontends, each with its own functionality.