One of the advantages of microservices based architectures is that parts of applications can be updated independently from each other. However, in the process of modularizing applications the frontends are often forgotten.
While backend functionality is split in multiple microservices, the users interfaces often remain to be monoliths. This article describes how to use micro frontends as a technique to use the concept of microservices for web applications.
The article is part of a series of articles that documents how to modernize a sample Java EE application from 2010 with modern technologies.
The sample application is a simple e-commerce application. The original application and the source code of all subsequent modernization steps is available as open source on GitHub.
Let’s take a look at a definition of micro frontends on the blog from Martin Fowler.
An architectural style where independently deliverable frontend applications are composed into a greater whole
You want to be able to update parts of the user interface without having to update the complete web application. In the optimal case there are even separate CI/CD pipelines for the different parts of the user interface.
The sample e-commerce application has different pages for browsing the shop, displaying the shopping cart and managing account information. The following screenshot shows the structure of the web application. There is a navigator in the left column and based on the selection in the navigator, different information is displayed in the main area of the window.
The products in the catalog only have titles, pictures and descriptions. Let’s say you want to add rating functionality. Rating functionality is only needed in the catalog of the e-commerce application. The other services ‘shopping cart’ and ‘account information’ are pretty separate from it.
In order to implement this new functionality, different parts of the stack need to be changed:
- Business functionality / backend microservice
- User interface / micro frontend
Here is how I’ve broken down the web application in six parts.
Note: The main reason for using micro frontends is modularization and independent updates, not a mixture of different web frameworks since this can lead to micro frontend anarchy.
single-spa takes inspiration from modern framework component lifecycles by abstracting lifecycles for entire applications. … Microfrontends enable many benefits such as independent deployments, migration and experimentation, and resilient applications.
In my next articles I’ll describe single-spa, the shell component and the messaging component in more detail.
To learn more about application modernization, check out my blog series in the GitHub repo.