Micro Frontend in Angular

Background

When single-page applications first took off, apps were 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 problems does it solve?

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 and Vue.
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.

What we will be building?

Our example splits a simple app into 3 parts, a header, a footer and a dashboard, each of which could be its own micro-application. This post covers the older way to do that with iframes and where it falls short.

Older way to achieve 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 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.