Micro Frontend in Angular
Background
When Single page applications came into pictures in last decade, our apps were comparatively smaller and they were being managed by a smaller team. With time, applications became bigger and the idea of having separate teams for different features came into picture. Your application might have features developed by different teams and you want to release only certain features into production before delivering the entire application. How do you manage different teams, different release timelines if you have one repo?
What is micro-frontend?
The term Micro Front Ends is a concept similar to Microservices where we can split a monolithic Front End application to micro applications that can be loaded as a single application running on the browser. Each application can have its own code base, be managed by different teams which can test and deploy their micro app independently.
What problem it solves?
Micro frontend solves lots of our daily problems. Some of them are-
✔ The testing becomes simpler, for every small change you don’t have to go and test the entire application.
✔ Codebases are smaller and more manageable.
✔ Micro Frontend architecture is independent of technology. You can use components from any of the available web frameworks like angular, react, vue etc.
✔ We will be able to use each micro app multiple times, a shopping cart micro app can be used with travel site as well as an e-commerce site.
✔ Just as with microservices, independent deployability of micro frontends is key. This reduces the scope of any given deployment, which in turn reduces the associated risk.
Since each MFE is a separate SPA, and a full-page load is required in order to navigate from one MFE to another.
What we will be building?
We will be building a simple app to demonstrate micro-frontend where we will be having 3 separate micro-applications for header, footer and dashboard section.
Older way to acheive micro-frontend (IFrames)
Iframes are the HTML documents that can be embedded inside another HTML document. Here is an example of Iframe. You can place whatever source you want in the iframe tag and it is rendered based on the width and height of the frame in the parent document.
However, this approach limits the UX experience you can deliver as the micro frontend content cannot exceed the iframe boundaries. Additionally, integrating various application parts adds lots of complexities while building a responsive page.
This kind of approach better suits the project where all the functionality resides on the same page without any navigation and the communication between iFrames happens through the Window object.
Next Part
Communication between our individual apps is very crucial and in the next part we will be discussing different ways to communicate between micro-frontend apps and along with that we will see how to acheive our goal of having multiple micro-applications in Angular.
