Micro Frontends Architecture

gowebing

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:

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.

 

 

 

 

Top