As web applications are becoming more and more mature every day, we find a wide range of web applications; from simple to highly complex ones. Those web applications can be simple two to three page websites or a combination of several components, which may be even developed by more than one team. Managing this kind of complexity in a monolith application is not easy.
A simple web application with one to two pages could be easily developed by an individual or a small team, so there is no need to think about complex architectures. But the problem arises when the application becomes more complex and frontend components are too large to be developed by one team. Micro-frontend architecture becomes helpful in such situations.
Microservice architecture is where several lightweight and loosely coupled services are combined to deliver a larger service or application. Similarly, the basic idea of the Micro-frontend is breaking large frontend applications into more manageable loosely coupled pieces in a manner that each piece can be independently developed by a separate team. Those pieces should be defined with a clear mission and well-formed boundary so the teams could work with their own codebases and release independent versions.
This diagram shows how the individual micro-applications are combined to generate a complete application. These micro-applications are loosely coupled and can be developed using different frameworks like Angular, React, Vue etc. Main application can be a combination of several frameworks. Each Micro-frontend application can talk to each other using a common communication event bus where different micro-apps can emit events or subscribe to the events emitted by other micro-apps. Further, each micro-application can talk to the backend individually and receive and send data independently.
This is one of the simplest ways of dividing a web application. A web page can be divided into separate sections and these sections can be developed as separate micro-applications. As an example let’s say a page containing a header, products section, search section, suggested product section, and a footer, those components can be developed as separate apps and combined in production to deliver the whole application.
2. Divide by Features
Another common way of dividing Micro-frontends, is by application features. As an example, a complete application can have some features like login, dashboard, profile page, reporting area, etc. These features can be separated from each other and built individually as independent Micro-frontend apps to make a complete application.
3. Divide by domain
Another popular way of dividing Micro-frontends is based on the domain. For example, applications can be divided by profile domain, branding domain, core domain, etc. Those components will be integrated to finalise the complete application.
4. Divide by pages
Where an application consists of different pages which have different functionalities, that application can be divided into micro-applications by individual pages. As an example, a home page can be developed by one team and a reporting page can be developed by another team as separate applications.
Mirco-frontends can be implemented in several ways,
Framework-based Micro-frontend development is one of the most common ways of developing Micro-frontends as there are plenty of frameworks available for the moment.
Some of them are
In the next part of this article, we will be discussing how to set up a Micro-frontend application using a framework called Single SPA.