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. ...