In this digital time, the form of a web application is getting larger and more sophisticated, so frequently they need to be handled by multiple teams. Your web application might have features developed by different teams and sometimes it’s better to release only certain features into production before delivering the entire web application.
Most of these sophisticated apps live on the client side which makes it harder to maintain. With a monolithic big web application, there are some other issues as well. However, as applications get more complex over time, requiring on-the-fly scalability and high responsiveness, a micro-frontend design based on Angular components is becoming increasingly effective in addressing these requirements.
Micro Frontend is a concept that considers a website or web application as a collection of features controlled by separate teams. Each team is dedicated to and specialized in a specific area of business or purpose. Such a cross-functional team creates functionality from top to bottom, from server to user interface.
Benefits of Micro Frontend Architecture
Automation of CI/CD pipeline: Since each app integrates and deploys independently, it simplifies the CI/CD pipeline. Because all functionalities are separate, you don’t have to worry about the entire program while introducing a new feature. If there is a little error with the code in a module, the CI/CD pipeline will break the entire build process.
Team flexibility: Numerous teams can add value to multiple systems while working separately.
Single responsibility: Such an approach enables each team to build components with a single responsibility. Each Micro Frontend team focus 100% on the functionality of their Micro Frontend.
Reusability: You will be able to use code in multiple places. One created and delivered module can be reused by multiple teams.
Technology agnosticism: Micro Frontend architecture is independent of technology. You can use components from different web development frameworks (React, Vue, Angular, etc.).
Simple learning: Smaller modules are easier to learn and understand for new developers entering the teams, than a monolithic architecture with a huge code structure.
We have a micro frontend architecture displayed in the picture below:
Now we need to create webpack.config.js and webpack.prod.config.js files at the root of our app.
Module federation allows us to share common npm packages between different frontends, so it will reduce payload for lazy-loaded chanks. We can set up the minimum required version, is allowed two or more versions for one package, etc. More details about possible plugin options are here.
Please note: We have an exposed section, so here we can define which items we need to allow to export from our micro-frontend app. In our case, we export only 2 components.
After that we need to add a custom config file into angular.json and change the default builder to ngx-build-plus:
Register page Module federation
This web application will contain all logic for the login/register page.
The main flow is almost the same, we need to create a new app and install a custom builder for using custom webpack configs.
After that, we need to create webpack.config.js and webpack.prod.config.js
As you can see, here we export only RegisterPageModule. This module we can use like a lazy-loaded module in our shell app.
Also, we need to change the default builder to ngx-build-plus and add webpack configs into the angular JSON file (the same as we did for the Header & Footer module before).
Dashboard Module Federation
This module presents some data for an authorized user. The same approach as for Register page, but with personal webpack configs:
Shell app Module Federation
Main app that loads all separated micro frontend modules into one app. Like before, we create a new app with a custom angular builder:
Add custom webpack configs:
But before we need to set up webpack config with the custom builder into angular.json file.
In environment/environment.ts we declare all module configurations (for the prod version we need to replace localhost address by deployed public address):
Then we need to add a loading Dashboard and register page where it is required. First of all, we need to create utils for module federation, where we can load remote modules from other apps.
And utils for building lazy loaded routes:
Then we need to define a micro frontend service:
Then we need to declare remote modules according to the routes:
And use our Micro Frontend Service in the main app module:
Now we need to load our Footer and Header components. For that we need to update the app component:
and file src/app/app.component.ts will look like this:
Here we have logic for loaders and logic for lazy-loaded components (Header, Footer).
Communication Between Micro Frontends
We have few ways to share data between different micro frontends. More details are described here.
In our case, we have decided to use Custom Event for communication. Custom Event allows us to send custom data via Event payload.
One module should dispatch custom events like this:
Other modules can subscribe to this event:
For unauthorized users:
We see a rising demand for more manageable micro frontend architectures as frontend codebases get more sophisticated over time. So it is crucial to be able to draw clear boundaries that establish the right levels of coupling and cohesion between technical and domain entities, as well as scale software delivery across independent, autonomous teams.
If you’re intimidated by micro frontend architecture but still want to develop an app, let us set up all of these operations for you so that you can just receive a finished product.