This chapter covers:
- Examining user interface communication patterns to exchange events between micro frontends.
- Inspecting ways to manage state and discussing the issues of shared state.
- Illustrating how to organize server communication and data fetching in a micro frontends architecture.
Sometimes user interface fragments owned by different teams need to talk to each other. When a user adds an item to the basket by clicking the buy button, other micro frontends like e.g., the mini basket wants to be notified to update their content accordingly. We’ll have a more in-depth look at this topic in the first part of this chapter. But there are also other forms of communication going on in a micro frontends architecture, as you can see in figure 6.1.
Figure 6.1. An overview of different communication mechanisms in a typical micro frontends architecture. The frontend applications in the browser need a way to talk to each other. We call this UI communication (1). Each frontend fetches data from its own backend (2), and in some cases, it’s required to replicate data between the backends of the teams (3).
In the second part of this chapter, we’ll explore how these types of communications play together. We’ll discuss how to manage state, distribute necessary context information, and replicate data between the team’s backends.