Micro-front end, future of frontend architecture.

Before moving into Micro frontend lets understand the evolution of software architecture. Software usually contains 3 layers. frontend, backend and storage (DB). Front end will be in the form of a user interface, And the backend will normally have your main business logic. Storage is where the data is stored. 

 Earlier we used to have a monolithic application where your front and backend used to be bundled in one application. They used to reside in a single code repository. This entire application used to be maintained by 1 large team. For changing anything in the application you need to test the entire application because even a small change can break any part of the application that is unrelated to the change. Industry soon realized the need to split the front end and back-end part of the code. This enabled a specialized team for frontend and backend. 

Later backend services started using Microservices to decouple the code and improve scaling. Microservices architecture resolved most of the backend scaling issues we were facing for years. Now we reached a point realizing we still have issues with the front-end part of the application. This is where the Micro frontend comes in. 

Micro frontend architectures are basically extensions of Microservices architecture style, and the aim is to apply the same design principles as Microservices architecture to the frontend part of the application to gain the same advantage as backend. 
Here Technology choices, Codebases, Teams, and Release processes are independent of each other. And development teams will independently build and deploy smaller applications. 
In this architecture we create multiple Micro frontends, then integrate all these into a single application. Generally, there is a micro frontend for each page in the application, and there is a single container application, which: 
  •  renders common page elements such as headers and footers 
  •  and it handles authentication and navigation 
  •  brings the other micro frontends together onto the page, and tells each micro frontend when and where to render itself 

What are the Advantages of Micro front end: 
  • It offers better scalability. 
  • Faster development, as teams can work independently 
  • Independent deployment is possible. 
  • Codebases are smaller and more manageable. 
  • Easier testing: for every small change, you don’t need to test the entire application. 
  • Technology Independent: individual development teams can choose their own technology. like ReactJS, Angular or Vue JS 

How do we integrate all these micro fronts? 
Well, there are many approaches to integrate all the Micro frontends. 
 1. Run-time integration via iFrames 
 This is one of the easiest approaches to compose applications together. It offers isolation in terms of styling and global variables not interfering with each other. But it is less flexible than other options. In this, routing, history, and deep linking becomes complicated. Also, iFrames are quite old technology and slow. 
2. Run-time integration via JavaScript 
 This is the most flexible one, and widely used. In this approach Each micro frontend is included onto the page using a <script> tag, and it exposes a global function as its entry-point. The container application then determines which micro frontend should be mounted and calls the relevant function to tell a micro frontend when and where to render itself.
3.  Run-time integration via Web Components
One variation to the previous approach is you are doing things 'the web component way'. If you like the web component spec, and you like the idea of using capabilities that the browser provides, then this is a good option. 


Challenges with Micro front end:
Styling:  if one team's micro frontend has a stylesheet that says h1 { color: black; }, and another micro frontend says h1 { color: blue; }, and both these selectors are attached to the same page, then someone is going to be disappointed!
There are many approaches to handle this case like using strict naming convention and you can also use CSS-in-JS libraries.
Cross-application communication :
One of the most common questions regarding micro frontends is how to let them talk to each other. It is recommended to communicate as little as possible, to avoid tight coupling.
That said, some level of cross-app communication is often needed. For that we can use Custom events which allow micro frontends to communicate indirectly, another way is to use the address bar as a communication mechanism.

Comments

Post a Comment

Popular posts from this blog

SSL Certificate authentication in ASP.NET Core

Have you ever wondered, even though you added a certificate to HttpClient while accessing data from the Api service, why you are getting unAuthorized access or your Api is not working as expected? Answer to the above question is that the certificate exchange is done at the start of the HTTPS conversation, it's done by the server before the first request is received on that connection. So the right place to add a certificate to HttpClient is the Program.cs or StartUp.cs file. Microsoft.AspNetCore.Authentication.Certificate contains an implementation similar to Certificate Authentication for ASP.NET Core. Certificate authentication happens at the TLS level, long before it ever gets to ASP.NET Core. More accurately, this is an authentication handler that validates the certificate and then gives you an event where you can resolve that certificate to a ClaimsPrincipal. Implement an HttpClient using a certificate and IHttpClientFactory In the following example, a client certificate is
Read more

Belekeri, Karwar Beach Photos

Image
Belekeri Beach : Situated 8 kms away from Ankola is an old port of Belekin with the long stretches of unexplored beaches. Situated at the bay of the river Belekin. The place has two temples of Jenubeera and Ishwara and also an old inscription dating back to the 15th century. Belekeri Port was a good port during the time of British, and managenese ore was being exported from here. The beautiful beach here attracts many tourists
Read more

Publish an Angular with .NET CORE app to IIS on AWS Cloud EC2 instance

I faced a few challenges while publishing my application(Front end on Angular 13, Backend is .NET CORE 6) to IIS on AWS EC2 instance using Custom Identity. So I thought of sharing this post which will help you to fix the issue quickly. It is a straight forward process to publish an application to IIS without using custom identity and many are already aware of this process. When we create an Application Pool by default it uses Application Pool Identity. In many cases we can not use Application Pool Identity. For example if your application is accessing web share or network share then your application needs to have required permission to access these shares. In this case you will have to create a Service Account and provide necessary permission to your Service Account to access these shares. Then you need to use this Service Account as Identity instead of Application Pool Identity to set up your application. However if you want to use another identity then we have to make sure your new i
Read more