What Are Micro-Frontends And Steps To Implement Micro-Frontends In Angular

What Are Micro-frontends?

Micro-frontend is a design approach in which a frontend is decomposed into individual, semi-independent “micro-apps.” The micro- frontend concept is inspired by, and named after, microservices. 

Micro-frontend is individual components that work together to create one seamless product for end-users. The thought process behind micro-frontends is similar to microservices, except that micro-frontends pertain to the client side together to form one cohesive unit, which helps to make the overall product more user-friendly and efficient. 

Need For Micro-frontends

Micro-frontends are a relatively new concept, and they offer a number of advantages over traditional monolithic frontends. Perhaps the most significant approach is that micro-frontends allow for a much more granular approach to front end development, which can lead to a more maintainable and scalable codebase. 

Each micro-frontend can be developed independently and then deployed as a separate unit. This proves that changes can be made to one micro-frontend without affecting the others, which leads to a more responsive overall frontend. 

Micro-frontends address the problems by breaking the front end into small independent modules. This modular approach has several advantages, such as shorter development times, easier maintenance and better scalability. 

Architecture Of Micro-frontends 

The micro-frontend architecture is an approach to frontend development that adopts microservice principles. In a micro-frontend architecture, development teams build and deploy various front end applications independently.

Then, these applications are combined by a “parent” frontend application representing a container to retrieve, display and integrate the various child applications. 

Fig. Architecture Of Micro-frontend

In this model, the user interacts with what appears to be a single application, but in reality, they interact with independent applications published by different teams. By decoupling the various frontend applications, development works more independently and iterates more quickly.

This approach can result in faster feature development and delivery for the users of your application. 

Let’s see an example by understanding a high-level diagram of the e-commerce application. The e-commerce application has three features; product features, payment features, and chatbot features. All these features have a separate micro-frontend and are independent, having a respective micro surface.

If there are some issues with the chat feature, the other two micro-frontends are not affected at all. This way, it becomes easier to deploy the issue and won’t hamper the other features. 

Fig. High-level Diagram Of The E-commerce Application

Benefits Of Choosing Micro-frontends 

By developing with micro-frontends, you will learn the true advantages of this front end development approach. Now, let’s explore the five benefits of using micro-frontends; 

👉 Scalability

Micro-frontend development teams have an advantage because they can quickly start spinning up new teams when they need to deliver additional front end functionality. This allows you to scale your development process without disrupting other teams that are working on other parts of the application. 

👉 Maintainability

When front end repositories are kept small and specialized, it’s easier to understand them, and this makes it simpler to do long-term maintenance and testing. This ensures that features can be easily tested in isolation and that the overall testing time is reduced. 

👉 Faster deployment and troubleshooting

Embracing the micro-frontends architecture improves the development process. With this architecture, we can have smaller independent teams work on different features, and the deployment process becomes faster and with fewer errors. 

👉 Autonomy

Each team is an expert in its domain. The team members have specialized knowledge of the data models, business requirements, API calls and user interactions connected with the billing service. Therefore, this knowledge allows the team to develop the front end faster than a less specialized team. 

👉 Independent stack and versions

Autonomy allows each team to make choices about the technologies they use. For instance, a team could develop their micro-frontend using Vue.js, and the other team could develop their frontend using Angular.

This way, each team can concentrate on what works best for them without coordinating with or relying on other teams. 

👉 Easy upgrades

The development teams can easily upgrade the architecture without touching the old one. They even can be tested independently. The easy upgrades make it even easier to deploy faster. 

Implementing Micro-frontend In Angular 

Webpack

It is a popular module bundler, a tool for bundling application source code in convenient chunks and loading that code from a server into a browser. They can be imported into any web page. Webpack preprocesses the different non-JavaScript files, such as Typescript and SaaS files. 

Related Reads: How To Develop A SaaS Product? Best Practices & Process

Module federation

The module federation is a plugin that is added to the webpack and allows micro-frontends to load run time. They share common libraries so that libraries are not loaded several times. If you use micro-frontends angular, the model federation is very important. We need to install this plugin and hit the command.

Command:

npm i @angular-architects/module-federation

Related Reads: Angular Vs React Which One To Choose For Your App

Steps To Implement Micro-frontends In Angular (Module Federation Method)

Step 1: Create a workspace

We will start by creating a workspace. The workspace is where all the applications are clubbed. You can make any changes in the application in the workspace. 

Command:

ng new my-workspace --create-application false

Step 2: Create an application shell and remote application

After creating the workspace, we move towards creating the application shell and a remote application. The shell application is a host application that will be the main application. The remote application is the micro-frontend app. 

In the above example of an e-commerce application, the features such as payment, product and chat features are the remote applications. Therefore, these applications are connected to a shell application. 

However, in a workspace, we need to create or generate the application in which we will add the model federation plugin to both of these applications. The model federation will e added to each remote application and the shell application. 

Create application shell

Command:

cd my-workspace
ng generate application shell

Create application remote

Command: 

ng generate application remote

Step 3: Create module + routing

As we separate our remote applications feature-wise, we will create the module and routing in each application. After creating the module and routing, we will create a component. 

Command:

ng generate module employer --project=remote --routing

Step 4: Create a component

Here, we will generate the component employer. Then we will configure the component backed with configuring the employee routing file. We need to have the specific route on which the component. Next, the module will be loaded and configured with routes. 

Lastly, we need to expose the employer module in the webpack.config.js.

Command:

ng generate component employer --project=remote

Step 5: Adjust and configure remotes

We need to adjust and configure the remotes in the webpack.config.js. After that, the micro-frontends are loaded lazily with the route activated. And adapt app.component.html to have a router outlet and a router link. 

Step 6: Run the application

At last, we have to run the application. As we know, micro contents are small applications connected to the shell. However, individual applications run separately, allowing them to load into the host application. 

So here the question arises if we have deployed the code on the server side, how can we use it again? If the code is deployed on the S3 bucket, we can directly S3 link in the remote entry file. So instead of a local host request URL, we can simply use the S3 bucket link.

Live Examples Of Applications Using Micro-frontends