Move to Microfront Architecture
The content of the article
What is a microfrontend?
Monolith Application Problem
What should you pay attention to when choosing an architecture?
Examples of architectural solutions
When should you use Module Federation?
Problems
useful links
What is a microfrontend?
Microfrontend architecture is an approach to building applications in which each part of the application responsible for certain functionality is represented by a separate frontend application. This approach allows you to achieve higher application flexibility and scalability, since each microfrontend can be developed and deployed independently of the others.
As a rule, microfrontends are used in combination with a microservice architecture, in which the application consists of a set of independent microservices, each of which performs its own function. Microfrontends allow developers to develop interfaces for each microservice separately and combine them into a single application, which makes it easier to maintain, scale and deploy the application.
One of the key benefits of microfrontends is the ability to rapidly develop and deliver user interface changes without having to change the entire application. In addition, microfrontends can help simplify the development process, improve code reusability, and reduce dependencies between different parts of a frontend application.
Useful link with a detailed explanation of the microfrontend concept.
Monolith Application Problem
A monolithic application is an application that consists of one large program that performs all the functions of the application. In such an application, all modules and components are in the same code base, which can lead to a number of problems.
One of the main problems with monolithic applications is their complexity. Developing, testing, and making changes to such an application can be a difficult task, especially when different developers work on different parts of the application. Changes in one part of the application can have unexpected effects in other parts, which can make it difficult to find and fix bugs.
Also, a monolithic application can be difficult to scale. As the load on the application increases, it may be necessary to increase the capacity of the servers, which can be expensive and inefficient. When scaling a monolithic application, you typically need to scale the entire system, not just individual components.
Another problem with monolithic applications is the dependence on specific technologies and technology stacks. If an application is written in one programming language or using a specific framework, then this can make it difficult to migrate to other technologies or technology stacks.
To solve these problems, many developers are moving to a microservice architecture, where the application is broken into small independent services, each of which performs its own function. This makes it easy to scale individual application components and simplifies the development and testing of each component. In addition, microservices can be written using different technologies and technology stacks, which provides flexibility and makes it easier to migrate to other technologies in the future.
What should you pay attention to when choosing an architecture?
The choice of a specific implementation of a microfrontend architecture depends on many factors, including the size and complexity of the project, technology requirements, the level of experience of the development team, and other factors. There is no one “best” implementation – each tool has its own strengths and weaknesses, and the choice of tool depends on the specific needs of the project.
Here are a few factors that may influence the choice of a tool for implementing a microfrontend architecture:
Boundaries between microfrontends. Defining the boundaries between microfrontends is one of the most important steps in designing a microfrontend architecture. It is necessary to determine which application components will be moved to separate microfrontends, and which ones will be left in the main application. There is a balance to be struck between too small and too large microfronts.
Communication between microfrontends. How microfrontends will communicate with each other is also an important issue. It is necessary to determine which protocols will be used for communication, what will be the structure of messages and how they will be processed.
architectural pattern. There are several architectural patterns for the microfrontend, such as the modular federation pattern and the comand bus pattern. Each of them has its advantages and disadvantages, so you need to choose the pattern that works best for your application.
Tools and technologies. Microfrontend implementation requires special tools and technologies, such as libraries for dynamic module loading, state management systems, etc. You need to choose the technologies that best suit your needs.
Testing and deployment. Microfrontends require separate testing and deployment, which may require additional effort and tools. It is necessary to pay attention to testing and deployment of microfrontends in order to avoid problems during operation.
Compatibility and security. When choosing a microfrontend architecture, you need to pay attention to system compatibility and security.
Scalability. Microfrontends are typically designed for scalability and the ability to add new features and functionality in the future. Therefore, when choosing a microfrontend architecture, you need to make sure that it provides the ability to scale the application if necessary.
State management. State management is one of the important parts of the microfrontend architecture. It is necessary to determine how the state will be managed between different microfrontends and what tools will be used to manage the state.
Ease of development. It is necessary to pay attention to the convenience of developing a microfrontend. Microfrontend development should be user-friendly and intuitive for developers to make it easier to develop and maintain the application in the future.
Reliability and fault tolerance. Finally, when choosing a microfrontend architecture, you need to pay attention to the reliability and fault tolerance of the system.
In general, the choice of microfrontend architecture depends on the specific requirements and needs of your application. You must carefully analyze the requirements and choose the architecture that best meets these requirements.
Examples of architectural solutions
1. Webpack Module Federation
Webpack Module Federation is a tool that allows you to create microfrontends using Webpack. It allows you to create separate front-end applications and combine them together into a single client-side application. For example, you can create a separate microfrontend for each page in your app and combine them together to create a complete app.
Sample code for creating a microfrontend using Webpack Module Federation:
// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
name: 'my_microfrontend',
library: { type: 'var', name: 'my_microfrontend' },
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button',
},
}),
],
};// Button.js
const Button = ({ text, onClick }) => {
return (
<button onClick={onClick}>
{text}
</button>
);
};
export default Button;I talked about Module Federation in sufficient detail in my article.
2.Single SPA
Single-SPA is a tool for building microfrontends using JavaScript frameworks (e.g. React, Vue, Angular). It allows you to create separate front-end applications and combine them together into a single client-side application using routing.
Example code for creating a microfrontend using Single-SPA:
// src/Button.js
import React from 'react';
const Button = ({ text, onClick }) => {
return (
<button onClick={onClick}>
{text}
</button>
);
};
export default Button;// src/ButtonApp.js
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import Button from './Button';
const ButtonApp = () => {
return (
<Button text="Click me" onClick={() => alert('Button clicked!')} />
);
};
const ButtonAppWrapper = singleSpaReact({
React,
ReactDOM,
rootComponent: ButtonApp,
});
export { ButtonAppWrapper };Useful link to documentation by single-spa
3. Podium
Podium is a tool for building microfrontends using JavaScript frameworks (e.g. React, Vue, Angular). It allows you to create standalone front-end applications and combine them together into a single server-side application using templates.
Sample code for creating a microfrontend using Podium:
// src/Button.js
import React from 'react';
const Button = ({ text, onClick }) => {
return (
<button onClick={onClick}>
{text}
</button>
);
};
export default Button;// src/ButtonApp.js
import Podium from '@podium/client';
import Button from './Button';
const podium = new Podium();
const ButtonApp = {
name: 'button_app',
assets: {
js: ['http://localhost:3000/remoteEntry.js'],
},
template: ({ render }) => {
const content = render('button', { text: 'Click me' });
return `
<html>
<head>
<title>Button App</title>
</head>
<body>
${content}
</body>
</html>
`;
},
};
podium.register(ButtonApp);
podium.mount('button', ({ text }) => {
return <Button text={text} onClick={() => alert('Button clicked!')} />;
});
export default ButtonApp;Useful link to documentation Podium
4.Open Components
Open Components is a tool for building microfrontends using any technology including HTML, CSS, JavaScript and Web Components. It allows you to create standalone front-end applications and combine them together into a single server-side application using templates.
Sample code for creating a microfrontend using Open Components:
<!-- src/Button.html -->
<button>{{text}}</button>// src/ButtonApp.js
import OpenComponents from 'oc-client';
import Button from './Button.html';
const oc = new OpenComponents();
const ButtonApp = oc.create('button_app', ({ props }) => {
return Button(props);
});
oc.register(ButtonApp);
export default ButtonApp;Useful link to documentation Open Components
These are not all possible implementations of the microfrontend architecture, and there are many other tools and approaches to implement it. It’s important to choose the right tool for your project and make sure you set up your architecture correctly to achieve maximum flexibility and scalability.
When should you use Module Federation
Let’s look at a few reasons why Module Federation:
Multi-module applications. If you have a large, multi-module application, then MF can help you split your code across different modules and make the application easier to maintain and develop.
Distributed development. If your development team is spread across multiple locations, MF can help you decouple different microservices and make them easier to integrate.
Code reuse. MF can help you reuse code and functionality between different applications and microservices, which can reduce development time and improve code quality.
Flexibility and scalability. MF can help you create a more flexible and scalable architecture by allowing you to quickly add and remove applications and microservices without compromising system integrity.
Development acceleration. Modular federation can help you speed up development by allowing different teams to work independently and integrate their code with modular federation.
Of course, using modular federation has its drawbacks and requires a certain level of complexity and experience in development, so the choice of technology should depend on the specific needs of the project. However, if your project satisfies the criteria listed above, then MF might be a good choice for your project.
As mentioned earlier, to understand whether you need to use Module Federation, as well as to understand how to use this technology in a production environment, you can refer to an article on this topic.
Problems
Microfrontends have some issues that can arise when using them:
Complexity of integration: when using microfrontends, it is necessary to implement mechanisms for integrating various parts of the application into a single system. This can lead to difficulties in integrating existing and new components.
State management: When using microfrontends, it becomes necessary to manage state between different application components. This can lead to difficulties in keeping track of state and synchronizing data between different components.
Complexity of testing: when using microfrontends, it becomes necessary to test individual components and their integration. This can lead to difficulties in setting up a test environment and in writing tests for various components.
Deployment complexity: When using microfrontends, each component must be deployed separately, which can lead to difficulties in managing the deployment and monitoring the status of each component.
Increased code complexity: Using microfrontends can increase the complexity of the application code due to the need to implement integration and state management mechanisms.
Despite all these potential problems, the benefits of a microfront architecture outweigh any downsides.
