Building Micro-Frontends

Chapter 5. Micro-Frontend Technical Implementation

In this chapter, we will use the micro-frontend decisions framework to build a basic ecommerce website using one of the technical approaches discussed in Chapter 4. As we’ve discussed, there isn’t a one-size-fits-all solution when it comes to architecture. The project’s goals, the organization’s structure and communications, and the technical skills available with the company are some of the factors we have to consider when we need to choose an approach.

After identifying the context we’ll operate in, we can use the micro-frontend decisions framework to help define the key pillars for our architecture’s technical direction. Instead of creating the same example in multiple frameworks, I’ll focus on helping you build the right mental model, which will allow you to master any micro-frontend framework rather than memorizing only one or two of the options available.

We will definitely explore some code, but I will stress the importance of understanding why a decision is made. This way, despite the approach and framework you use in your next project, you will be able to decide what the right direction is, independent of how familiar you are with a specific micro-frontend framework.

Remember the old saying “Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime”? Let’s learn to fish.

The Project

Our project is an internal swag ecommerce website for an enterprise organization. The site is ...