Micro-frontend is the division of a monolithic application into semantically isolated parts and their independent development. Each page of the site or application is structured into blocks. It could be a block for authorization, a block for working with files, pictures, ads, search filters, etc.
Traditional monolith architecture is convenient in many ways; however, as technology becomes more complex, it shows a number of disadvantages. Monolith architecture is poorly scalable, it is difficult to support, develop and test.
That's why there is this idea of the microservice frontend architecture. A certain part of the functionality is distributed to the development team, which works with both front-end, back-end, and data. The whole application or website consists of many small parts developed by different teams.
What are the Advantages of Microservices on the Frontend?
Agnostic from frameworks: Each individual block can be written in its own framework, one site can use React and Vue, and Angular, or even custom elements written in pure JavaScript.
Any part of the app can be isolated from others: The advantage of this approach is that you manage parts of your application very specifically, especially if it's big. This can be a block for authorization, a block for files, images, ads, etc.
Custom elements: With Custom Elements, web developers can create new HTML tags, improve existing tags, or enhance other developers' code.
It enables us to create reusable components with just pure JS/HTML/CSS code. With it, we can write less code and output modular code that we can reuse in our application.
What are the Disadvantages?
As for the disadvantages, the microfrontend is another abstraction and there are some complications in terms of development. You will need to carefully choose the architecture for each project.
There are several key disadvantages:
- It increases the overall complexity of the application
- The JS bundle of a monolithic application will always be smaller than the aggregate of bundles in a micro frontend architecture
- Possible problems with application caching and versioning
- Global variables or CSS styles can be quite buggy in a micro frontend architecture unless applications are completely isolated.
It also should be noted that there must be a specific solution in the micro frontend architecture that runs all modules within your application together. Here are various techniques for recombining these modules.
Use iFrame
This old-fashioned method allows each module to use any structure without having to coordinate tools and dependencies with other commands. You will be able to rely on some libraries or exchange data with the help of window.postMessage API. For instance, here’s how
Advantages
Easy to integrate: This method doesn’t require any additional tools for implementation. Each individual widget can be placed in an IFrame that loads the desired application. Agnostic from frameworks: You can use completely different interface frameworks; some parts can be developed in React, some in Angular, and then you can use your own JavaScript to develop other parts.
Disadvantages
If you use this approach, you are likely to encounter performance issues and the complexity of support. They may include:
- Memory consumption
- Limited ability to communicate through direct API calls
- Active microservices management will be handwritten
Apart from that, this method is used for small projects rather than for enterprise-level projects with a high amount of functionality.
Single SPA
Single-spa is a framework for doing microservices in a browser. Here different applications can coexist with other applications that are part of some project. As a result, if you need to use different frameworks or libraries on the same page, you should look at single-spa.
Advantages
- Dividing an application into several modules in the browser allows you to develop and deploy the applications independently of each other.
- You can manage large shared dependencies (e.g. React, Vue, or Angular libraries)
- Lazy load so that your application will only load modules when needed.
Disadvantages
-
This method requires the same version of frameworks. Framework libs should be only shared dependency. For example, if you are using React 16.8 in all your current microservices, you won`t be able to start a new microservice with the most recent React version.
-
Re-loading code, either libraries or entire frameworks, degrades the performance of the entire application, not just a single page.
Qiankun
Qiankun is based on the single-spa method. It includes lazy load, independent deployment of micro-apps, and framework agnostic. Today, it’s getting more and more recognition from developers as it offers more value and numerous advantages that other micro-frontend solutions lack.
Such tasks include merging subsystems, isolation, and independence of each module during development and deployment, dependencies handling, etc.
Advantages
- Truly framework agnostic (no versions dependency)
- Can isolate styles between apps. Lib adds some custom selector to every element
- Can isolate main app styles from sub-apps with shadow dom
- Global state from the box
- Easy to integrate any existing app with only a few tweaks needed
Disadvantages
- Shadow root isolation doesn’t work with Angular apps, because Qiankun can’t go through the shadow DOM and render in custom elements
- The biggest part of the community is from China. Therefore, almost all issues on Github are written in the Chinese language.
Wrapping up
There are many frameworks that simplify micro frontend development. But before applying these solutions to a project, it`s recommended to familiarize yourself with the various patterns and solutions.
Should you use a micro frontend? If you are developing a small website, the answer is probably no. If, however, you are working on a large application involving a large number of individual UI elements or views spanning multiple domains, then it is probably worth using it.
The above-mentioned methods are the most common solutions out there that can be used for projects of different sizes.