Key Principles and Components of Microfrontends

Microfrontends are a double-edged sword. When done right, they can bring a great amount of joy and productivity to teams; however, if not implemented the right way, they can make things way worse.

Having said that, there are a couple of key principles and considerations we need to keep in mind when building a microfrontend architecture.

In this chapter, we will look at the key design principles of a microfrontend architecture and why it is important to treat them as sacrosanct. The reason we emphasize these principles is that they lay the foundation of the microfrontend architecture. Teams may not be able to extract all the benefits of a microfrontend pattern if they choose to ignore these principles. Then, we will look at the key components that are critical to any microfrontend architecture.

In this chapter, we will cover the following topics:

• Understanding the Key Principles
• The key Components of a Microfrontend...

Understanding the Key Principles

It’s important that all software teams lay down a set of rules and guiding principles that all team members and the code they write adhere to. This ensures that when teams discuss certain technical approaches, they can validate them against these guidelines. This, in turn, ensures that the teams can focus on the outcomes by mapping them against these key guidelines and not get too obsessed with the nuances of the process. This helps teams to arrive at decisions a lot faster.

In the following sections, we will look at the key principles that teams must adhere to when following a microfrontend pattern.

Domain Driven Teams

Dan Abramov, who leads the React project at Meta, once tweeted the question, “Is Microfrontends solving a technology problem or an organizational problem?”

When you think about it, a lot of problems we see in today’s software development do stem from the way teams are organized.

Domain Driven...

The key Components of a Microfrontend Architecture

After spending time going through the principles of a microfrontend, now let’s look at some of the key components of a microfrontend architecture.

In this section, we will look at the essential components any microfrontend architecture needs to have, and we will look at some of the nuances associated with them.

After completing this section, you will be aware of the four basic components that make up any microfrontend architecture.

Routing Engine

As we saw in the previous chapter, depending on the type of microfrontend pattern you aim to build, the routing engine for your app will be partially or fully decoupled from your apps.

There are multiple approaches we can take. We can use NGINX as a reverse proxy and have a list of all the primary routes that map to the respective apps in the multi-SPA pattern. If the apps are deployed in a Kubernetes cluster, we can make use of Ingress routes to map the primary routes...

Summary

With that, we come to the end of our second chapter. We started the chapter by looking at the key principles we need to keep in mind. We saw why it is important to break teams down based on domain models, and why it is critical for teams to be able to independently deploy their own apps. We learned about the misconceptions associated with code reuse and how it can lead to a distributed monolith trap. We also saw the importance of DevOps and an automation culture. Finally, we learned about the four key components of a microfrontend. Everything that we learned in this chapter we will put into practice in the coming chapters, as we go about building our very own microfrontend application.

In the next chapter, we will dive deeper into monorepos versus polyrepos and learn how it’s more about team culture than technology. We will also start off by setting up our code repository as a monorepo to set up the foundation for future work.