Communication Mechanisms

Building a micro front-end application

We will go ahead and build our micro front-end application and combine our previously created Angular, React, and Vue front-ends into an application that behaves like a single storefront. We will also integrate our front-ends with the REST API that we built. This will ensure that both the React Product List front-end and the Vue Shopping Cart front-end work off the same list of products, as exposed by the /products endpoint.

In a production front-end, the general idea is that each application is a silo, meaning isolated from others, and therefore has its own REST endpoints and databases in such a way that each team has the freedom to modify any piece of their architecture without affecting other front-ends. In reality, though, there will always be some sort of shared data that all front-end applications may need access to. As an example, a store of registered users might be shared across front-ends or a store of products. This may take the form of replicated databases, or it may take the form of shared microservices.

In our discussions thus far, we have talked about using the JavaScript technique for building our micro front-end application. This technique utilizes a “host” application that is responsible for loading each front-end and embedding it within the HTML page. We will use our existing Angular application as the “host” application and work toward embedding our React and Vue front-ends into the Angular application.

This means that our Angular application will control the page flows and will embed the other front-ends into either new or existing Angular pages. It will be responsible for showing or hiding front-ends based on the overall page state and will also communicate with the Event Bus to raise events, as we have seen in our diagrams earlier.

Throughout this chapter, we will be updating our existing Angular, React, and Vue applications in order to get them to work within a micro front-end architecture. At the end, our application would look like the following screenshot: