Micro Front-end Architecture with Angular
What is Micro Front-end ?
The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specializes in. A team is cross functional and develops its features end-to-end, from database to user interface. (micro-fontend.org)
You can find more details about micro front-end here
In this article, we will discuss Micro Front-end architecture using Angular 7.
Let's look at below diagram:
Note: As part of this article, we are sending message from App 1 to App2. However in real life scenario all micro front-end apps can communicate with each other.
We need two more more angular apps.
- Container App: This app is responsible to load shared resources such as css, images etc. and also going to host Micro Front-end app(s). We can also call this app as SPA(Single Page Application) since browser is going to load this app which includes all Micro Front-end apps.
- Micro Front-end App(s): Micro Front-end apps can be more than one and also built using different framework(such as React, Vue). In this article, we are going to discuss two angular apps which are distinct and one app will send message to another app.
As per Micro Front-end definition, each app as a composition of features which are independent of other app. However most of times, we may need to pass data or message from one app to another.
Let's see how each Micro Front-end apps looks like in our uses case.
Each Micro app is totally isolated with other app in terms of Integration and Database layer. As far as Front-end is concern, each app may share resources from container app or app have its own UI resources.
However if you see the component in App2, there is as another attribute "message". This attribute will accept message/data as input.
SPA contains one or more Web Components and each web components have one Angular component which will represent Micro Front-end app.
We are using Custom Elements/Web Components which are supported by following browsers at this moment.
- Chrome: Supported
- Opera: Supported
- Safari: Supported
- Firefox: Supported from version 63 onward
- Edge: Working on an implementation.
Here is the demo application which is built using above architecture:
Key Benefits of this Architecture:
- Development and testing of each Micro Front-end app can be done independently as well as with container app
- All libraries and UI artifacts will load in browser only once, which will help to boost performance #NoDuplicateLoading
- Jenkins compatible. Easy to configure in Jenkins for continuous build and #UIAutomation
You can find source code of demo application at below location:
Key implementation points:
- I have used ng-packager to bundle Micro Front-end apps and installed that bundle in container app
- Also used angular/elements and @webcomponents/custom-elements in Micro Front-end app
- For browser supports as mentioned above, following changes are required:
//1. change below property in ts.config.json file of each app
"target": "es2015",
// 2 add below import in polyfills.ts file
import '@webcomponents/custom-elements/custom-elements.min';
Tech Savvy, Delivered Module Lead | Senior Frontend Engineer with 9+ years of experience
5 年Hi Darpan Lalani, Thanks for the micro front end architecture. Found this article really helpful. Below are the some of the doubts raised when looking into the code according to our architecture. Requesting you to clarify the below doubts. 1. Does this code support for maintaining different GIT repositories for each application i.e (mf-app1, mf-app2 , mf-container) three apps in three different git repositories. 2. As i could see that in mf-container applications package.json your referring sub applications as a module with relative path i.e ("mf-app1": "file:../mf-app1/mf-sender") so is it possible? to give any git repository URL instead of the relative path. 3. Do we need to maintain any consistency among all applications like if (mf-app1) is having @angular/material module so it also to be included in the (mf-container) app. Thanks, Bikshapathi
Software Engineer
5 年May i get the steps for doing this, especially on URL calling steps
AWS 2x | Azure 1x | Chief Architect AWS | Cloud & Solutions Architect | Devops/GitOps | Cloud Engineer Sr 2 at Globant
5 年Hi Darpani Lalani I found your article on micro front-end architecture very interesting, I think that just as there is the style of microservice architecture on the backend side, this design approach on the front-end side can really analyze its usefulness today immersing ourselves and somehow demanding companies to adopt this aspect. On the other hand I had a question that I will have:? 1. There is some way to send or share information from the container application or SPA to the applications (elements).? 2. What alternative could you recommend for the sending of session between the elements from a login from the SPA or container application. Thank you in advance for your kind response. Regars!
Senior Manager | PwC AC Bangalore | Mentor | Enabler
5 年Thanks Darpan for sharing this. I am having couple of questions on this. - Will it support routing under individual apps like app1 has couple of routing urls like app1/pg1 and app1/pg2. same routing will also present on app2 (app2/pg1 , app2/pg2). - Is main container is in angular and how we share common components across multiple apps.
Software Engineer | Founder | Simplicity is the key
5 年Nice work. Have you maybe tried the sample with routing and having custom elements as components for the route? (sample: { path: 'my-path', component: SenderComponent },)