Development of web applications has seen a lot of changes in the last few years. Framework developers have been working their socks off to make the user experience seamless and less time-consuming. The old trend in which a web Application was developed where multiple pages were combined together, has slowly transformed into using frameworks such as Angular, React JS, etc. to make a single page application. The advantages of using a Single Page Application are as follows:

• Only selected content of the page is updated, which in turn increases the speed while making it more responsive.
• Increased caching capabilities.
• Navigation within the app is more linear, and thus the user experience is more interactive. For example, we can now use parallax scrolling and amazing transitions on the same page with any user navigation, on clicking links.
• Debugging is easy, as each framework has customized debugging tools in chrome.

Take a look at the image below. In a single page application, different templates are loaded inside the same template view. On the other hand, in the traditional method, the page in itself is loaded separately. 

However, the flip side of this situation is that the SEO use is not as effective as in multi-page applications. Also, the browser history cannot be used effectively owing to the fact that the browser state remains unchanged. On clicking the back button of a SPA application, the previous app state is called, instead of the previous browser state. Another disadvantage is that security issues can occur if the developers are not careful and sensitive data could be exposed. The missing access control at the functional level is also another issue.

What is Micro Frontend Architecture?

Single-page applications are preferred when an application is needed for dynamic platform usage and has less data volume. Presently, a powerful and content-rich web application lies on top of Micro Service Architecture. However, as the requirements increase, the teams handling this web application become diverse. So, to tackle this problem, the trend is slowly changing towards bringing in Micro Frontend Architecture in the web application. 

As the name suggests, in a Micro Frontend Application, we divide the Frontend Projects into smaller stand-alone projects in a single parent workspace. Teams can separately work on their projects and deliver to the clients as and when required. This increases the maintainability of the front end codebases, as the projects become more complex. Thus the update and upgrade processes of the application improve with this implementation and also results in greater function reusability.

Benefits of Micro Frontend Architecture

• Better Maintainability: In Micro Frontend Architecture, the code base is distributed based on the feature and functionality. A specific team maintains the code base, and thus, it enables better maintenance.

• Scalability: Micro Frontend Architecture allows the addition of more features and technological advancements to the same workspace.

• Faster Development and Deployment: Independent teams work simultaneously on their projects in a Micro Frontend environment. This ensures better work efficiency, and thus ultimately leads to accelerated development and deployment  Also, it enables project-specific updating to be more effective.

• Higher Resilience: As we had stated earlier, the whole project is divided into smaller chunks that can be developed independently. In case of an issue in a specific project, it does not affect the other applications. Thus it could be safely said that the Micro Frontend architecture is highly resilient.

How Implementing Micro Frontend Architecture Increased Team Productivity for a Leading Insurance Provider

One of our clients, a leading insurance provider, had started off with a project which had a single user management system. The frontend application laid on top of many microservices across different companies. Slowly they had the idea of expanding the project such that our system would act as a platform. As a part of that, new features were added, and multiple releases took place. Gradually, the project size started increasing, and the loading time and performance were badly affected. Users had to see a loader circling for approximately 13-17 seconds once they hit the URL in the browser. This was because the number of modules loaded had considerably increased as the project had been adding features over the last one year. 

These were just the issues faced by the end-user, and from the developer perspective, there was a different set of issues. The code had become complex over time, and it was difficult for a new developer to understand the whole system. Merge activities took 2 to 3 days. Also, testing took time as releasing one feature would require a tester to test the whole application from the beginning. Furthermore, changing a particular element in a module would require the entire project to be deployed, thereby increasing the deployment time. 

This is when we decided to implement Micro Frontend Architecture. Each module was built as a project, and as a result, we were able to achieve the following:

• The application was loaded in less than 3 seconds. Upon user action, the corresponding project was loaded in the DOM. Lazy loading was implemented inside each project.
• Each project was assigned to separate specialized teams. The efficiency of the whole team increased, and it was easy to manage the team.
• The time taken for merge activities reduced drastically. Changes were made on a particular project by a specific team, which reduced the time consumed for merge activity.
• Initiating separate deployment for each project reduced the time consumed for the deployment activities. Only sanity testing was needed to be done for the modules that had no development activity. This resulted in a reduction in the testing time.
• Effective team split and simultaneous development was possible with the same strength. 
• The readability of the code increased, and the reusability of components was more effective.

In simple terms, what Micro Frontend does is that it splits the application by business domain into various smaller chunks of frontend applications. Through this, the flexibility and scalability of the application are increased. One drawback that could possibly come while using this approach would be documentation. Proper documentation should be maintained across the projects. Investing a little more time during development for documenting the process would help people understand the architecture and the workflow of the individual projects. The time spent on the documentation would be much less than the time that would have otherwise been taken for building multiple projects without the Micro Frontend approach.

Step-by-step Guide to Implementing Micro Frontend Application Using Angular Framework

By,
Unnikrishnan M.
Software Engineer, RapidValue

The post Implementing Micro Frontend Architecture with Angular for Increased Team Productivity appeared first on RapidValue.