Technology surrounds us at every step of our traditional lifestyle. These technological surroundings evolve as time passes by. Every day a new technological advancement takes the industry by storm. Business owners to adapt to the technological revolution chose the microservices approach. But, the front end keeps on dangling for a boon there comes the Micro Frontend as a boon. This blog post revolves around Angular Micro Frontends and its benefits. Also, it covers the micro frontend architecture angular and its implementation. In the end, this blog intends to help you decide why choosing Micro Frontend Angular is the key to your organization’s success.
Angular Micro Frontends refers to an architectural pattern, involving the breaking down of a large Angular web application into small, independent, and deployable micro-applications with every micro-application being responsible for handling its own set of features. It intends to club web applications from different technologies and multiple domains under a single domain as a single web application although the tech stack and the deployment server may be different i.e. Sharing a base URL. The goal behind the Micro Front Frontend Architecture Angular is to enhance scalability, flexibility, and maintainability by reducing the complexity of the web application and promoting modularity.
Nowadays, every business owner wishes to consolidate a huge assortment of services and deliver everything in one place for their user’s needs which leads to an increase in the application size due to the addition of numerous functionalities, modules, and pages which makes it challenging for multiple teams of developers to work on a project as several instances may arise where more than one team would be required to work on a single, module, page, or functionality.
The need for Angular Micro Frontends becomes a mandate in this scenario because when multiple teams or developers start working on the same page they may overwrite each other’s changes or may face conflicts while committing code and delay the release process also multiple instances of re-testing are needed to ensure no faulty code is there within the application at the time of release.
For a simple solution, to avoid such scenarios, each team or developer can create their repo for their module/sub-domain and work independently without worrying about other developers’ changes, or commit changes, and whenever the module’s route gets activated, the new changes will be there on Page. Hence, all the developers can avoid the tasks of taking a regular pull from the target branch / Merge conflict and others. The Angular Miocrofrontend architecture brings various benefits for the developers and product owners such as:
Many business owners wonder if all the applications need the Micro Frontend Angular approach for their web application development. Well! the answer to this question is simply NO! This approach is only recommended for instances of large and complex applications development where the modules and pages are dependent on each other and it is difficult for different teams of developers to work on the same application simultaneously. For, smaller and non-complex applications that involve a few modules/pages and are not complex, the traditional approach is the most viable solution.
To better understand How Microfrontend architecture is different from traditional architecture let us take a few instances:
In Traditional Architecture, the Application’s all Code/Modules/Pages/Functionality are kept/committed within a single Repository, While in Angular Micro Frontend Architecture it is not needed to keep all Code / Modules/Pages/Functionality within a same Repository.
In a Traditional Architecture, all the Code / Modules/Pages/Functionality mostly shares the same technology i.e., Angular/PHP/JAVA/C#, etc. But for Micro Frontend Architecture this is not required anymore i.e., Page 1 can be of Angular, Page 2 Code can be of C#, etc.
When the Application becomes larger, the initial loading time of the application also increases, and the ‘Waiting’ scenario does not give a good impression to the end user.
There are many ways to Implement Microfrontend Architecture, below are the most common ways mentioned:
Many libraries are there to implement Angular Micro Frontend Architecture, below are the some of popular libraries:
This library does not need to change existing code Or logic, It needs some wrapping code/config to enable Microfrontend Architecture.
Example with Single-SPA library:
The Issue with Scenario 1
The Issue with Scenario 2:
All above issues can be addressed by implementing Microfrontend Architecture, Below is the explanation:
From the different ways we discussed above, we will use ‘single-spa’ the popular and easy-to-implement library. Below is the Traditional / Existing Code structure that has different department-wise codes and is released independently and accessed via different URLs i.e sales.mycompany.com / accounts.mycompany.com / admin.mycompany.com
To make an Existing application of Microfrontend Architecture, Follow the below steps:
First, we need to create a new wrapper/container application.
Install the Package:
Run the below Command with Options at the root of the repository level:
Here we are creating a wrapper application that will represent/wrap all different domain applications under a single Base URL, here we have used the “single-spa root config” option as the project already exists and we need to create only a wrapper.
Note: This command will install node modules as well.
The output of the above command will be:
One “root” folder will be created with some files that look like kind of config files along with common Angular files like tsconfig,package.json, etc.
Let’s understand Each file in brief: