6 Communication patterns

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 the mini basket want to be notified to update their content accordingly. We’ll take 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.

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.

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 . Each frontend fetches data from its own backend , and in some cases, it’s required to replicate data between the backends of the teams .

6.1 User interface communication

6.1.1 Parent to fragment

6.1.2 Fragment to parent

6.1.3 Fragment to fragment

6.1.4 Publish/Subscribe with the Broadcast Channel API

6.1.5 When UI communication is a good fit

6.2 Other communication mechanisms

6.2.1 Global context and authentication

6.2.2 Managing state

6.2.3 Frontend-backend communication

6.2.4 Data replication