How To Implement Micro-Frontend Architecture With Angular

Everything you need to know about microservice oriented architecture for the frontend from beginner to advanced

Photo by Jaime Spaniol on Unsplash

Modern web applications are becoming big and more complex and sometimes managed by different teams. 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?

Most of these complex apps live on the client-side which makes it harder to maintain. There are some other issues as well with this monolithic big fat application. In this post, I am going to discuss advantages, disadvantages, implementation and a lot of other stuff.

Introduction

A Journey Into Mirco-Frontends

Advantages of Mirco-Frontends

Features of Mirco-Frontends

How Do We Split Apps

Different Approaches to Micro-Frontends

Micro-Frontend Frameworks

Example Micro-frontend Project With Angular

Summary

Conclusion

Introduction

Micro-frontends are small applications mostly divided by subdomain or functionality working together to deliver a larger application. Before diving into Mirco-frontends, we will understand what are micro frontends and why we are talking about those.

Usually, projects come in different sizes and different requirements. If your project is simple enough to have two or three pages and can be maintained by a single team, you don’t have to think about these Micro-frontends. You can just implement with any of your chosen framework such as Angular, React, or Vuejs.

But, this is not the case all the time. Sometimes your frontend app might be a small part of another big application or your app consists a lot of sections and features which are developed by different teams or your app is being released into production feature by feature with developed by separate teams. If you are in one of these situations then you need to think about Micro Frontends. Let’s look at it in the below diagram.

Micro Frontends Architecture

As you see in the above diagram, we have 6 frontend apps working together to deliver the large application. The communication between these apps can be done with an event bus, window object, or publish/subscribe methods. Each app can be implemented by a separate team and any framework. Each app can talk to their backends or endpoints individually. There is a bootstrap/launch app that loads all the apps and mounts and unmounts in the DOM depending on the user interaction or routing.