Micro Frontends

#programming #angular #designpatterns #frontend

Angular Micro Frontends?

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.

The Angular Miocrofrontend architecture brings various benefits for the developers and product owners such as:

1. Multiple Tech Stacks can be used simultaneously
2. Easy to Add/Update/Remove Code
3. No code Sharing
4. Single Page Applications or SPA look alike
5. Easier Application Maintenance
6. Improved Code Organization
7. Simplified Development Process
8. Efficient Debugging
9. Better Team Co-ordination
10. Enhanced Flexibility

Angular Micro frontend Architecture vs Traditional architecture

How Microfrontend architecture is different from traditional architecture let us take a few instances:

Repository

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.

Technology
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.

Implement the Micro Frontend Angular Architecture

Iframe

The iframe is used to load nested /independent web pages along with the parent webpage.
It is an HTML element and by specifying the desired URL in the tag we can load a different webpage and implement the Microfrontend Architecture
As Iframe has its context and sharing data with a parent or other webpage becomes more difficult and all operation needs to be done using Global context and Objects i.e ‘Window ‘object of the browser and that makes the application more vulnerable.

NGINX

NGINX is an Open-Source web server created for modern web applications to provide high performance and easy to maintain the routing of different applications if all applications are on the Same server.
Based on the Config provided on file for matching route and landing page, The NGINX process the request.
As the Config file is a text file only, it’s easy to add/update and remove the mapping of route and landing page details

Third-party Libraries

Many libraries are there to implement Angular Micro Frontend Architecture, below are the some of popular libraries:

Single-SPA
Module-federation
FrintJS

This library does not need to change existing code Or logic, It needs some wrapping code/config to enable Microfrontend Architecture.

The Step-by-Step Guide to Implementing Angular Micro Frontend Architecture

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
test1.mydomain.com / test2.mydoamin.com / test3.mydomain.com

Step 1: Create Root / Wrapper Application

Install the Package:
npm install create-single-spa <-global>
Run the below Command with Options at the root of the repository level:
create-single-spa

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:
bacancy-root-config.ts
All the desired applications must be registered here along with their path (same as router config file of Angular module)
The “index.ejs“ file loads this config file.