{"id":4534,"date":"2021-05-12T11:09:59","date_gmt":"2021-05-12T09:09:59","guid":{"rendered":"https:\/\/www.evertop.pl\/?p=4534"},"modified":"2021-07-14T11:54:54","modified_gmt":"2021-07-14T09:54:54","slug":"introduction-to-micro-frontend-part-i","status":"publish","type":"post","link":"https:\/\/www.evertop.pl\/en\/introduction-to-micro-frontend-part-i\/","title":{"rendered":"Introduction To Micro Frontend. Part I"},"content":{"rendered":"

1. Introduction, a few words about micro frontend architecture, solution architecture<\/h2>\n

Micro frontends are small web applications that are broken down into components or functions that work together to provide a larger application.<\/p>\n

If your project is small enough and supported by one team, the better solution will be to choose a monolithic SPA architecture and use one favorite framework such as Angular, React, Vue, Svelte etc. to build the presentation layer.<\/p>\n

If the project starts to grow or several teams will work on it, it is definitely worth taking an interest in the micro frontend solution, which will facilitate the work and coordination of micro-projects by individual teams. Each team, according to the project specification, can use a different preferred framework.<\/p>\n

Teams can have their own functions and components, work in their own code base and use their own dependencies in the project, release versions independently, constantly deliver small, incremental updates.<\/p>\n

When using a micro frontend solution, we must also remember in what contexts they are most beneficial.<\/p>\n

Martin Fowler defined Micro-Frontend Architecture as “an architectural style in which independently delivered frontend applications are assembled into a larger whole.”<\/p><\/blockquote>\n

Also, remember that everything has its advantages and disadvantages.<\/p>\n

Choose solutions to the needs of the project carefully.<\/p>\n

2. Theory in application, what problems it solves, micro frontend vs monolith SPA<\/h2>\n

Let’s look at the simplified diagram below, which will tell us a lot about the architecture of the solution and the approach to micro-applications and these components.<\/p>\n

\"the<\/p>\n

Source: https:\/\/micro-frontends.org<\/a><\/p>\n

On the left, we can see the standard approach using a monolith as our application which includes a presentation layer, a data access layer, a logic layer, etc.<\/p>\n

This is a standard approach used in small applications with the coordination of one team called Monolith.<\/p>\n

In the middle part we see the front and back end layers.<\/p>\n

The project has been divided into two teams that communicate with each other, but their responsibility has been divided into the area they deal with.<\/p>\n

On the right, we have an approach to the project as microservices.<\/p>\n

We have a dedicated part of the frontend and shared access to dedicated services.<\/p>\n

Below in the diagram, we see the approach to the project as a micro frontend.<\/p>\n

\"end-to-end<\/p>\n

Source: https:\/\/micro-frontends.org<\/a><\/p>\n

Each area is separated into a team that deals with a separate functionality, e.g. data searching or providing information from the newsletter.<\/p>\n

The approach is great when several teams are working on a project.<\/p>\n

Responsibility comes down to the preparation of the appropriate component \/ functionality that will be used in the project.<\/p>\n

An additional advantage is the creation by teams of independent separate micro-projects that have their own dependencies and can be implemented using other javascript frameworks, e.g. angular, react, etc.<\/p>\n

Source codes are separated into independent projects, which makes it easier to upgrade the version, update sources or replace old legacy components with new ones without interfering with the operation of our application.<\/p>\n

So what are the advantages of using a micro frontend?<\/h3>\n

The most important ones that appear and are appreciated by the mass of programmers are:<\/p>\n

– easy-to-maintain code<\/p>\n

Using the micro frontend approach, the entire main application is divided into areas that are created by independent development teams that pursue a specific business goal.<\/p>\n

These separated areas are easier to manage, update and change.<\/p>\n

– independent placement<\/p>\n

The ability to implement a small set of functions without being dependent on other modules significantly reduces the scope and complexity of the implementation, even if another micro-application has damaged components or functions.<\/p>\n

– independent teams<\/p>\n

Independent teams working on a specific solution and focusing on a designated area for which they are responsible.<\/p>\n

Several teams from different time zones can work on the application, thanks to the fact that the application is separated into small projects, communication with teams is reduced to a minimum.<\/p>\n

– scalable team of programmers<\/p>\n

When the application receives new functionalities, we can flexibly implement new teams that will deal with individual functions and components without affecting the work of other teams.<\/p>\n

Choosing to implement a project as micro fronted also has several disadvantages such as<\/p>\n

– duplicate code<\/p>\n

When creating micro applications, teams work using their dependencies in projects, which often results in a large increase in the libraries used and their duplication.<\/p>\n

– state management<\/p>\n

Each micro-application manages its own state.<\/p>\n

In the traditional approach, the state is shared.<\/p>\n

If your team needs to use shared state, you should take care of techniques that will help you encode URLs.<\/p>\n

– communication between micro applications<\/p>\n

Micro frontends are based on the concept of independent applications.<\/p>\n

If we have a situation that our micro-application needs to transmit notifications to another micro-application should use the appropriate events, which may cause problems with synchronization.<\/p>\n

– UI\/UX consistency<\/p>\n

If several teams scattered around the world with their own timezone are working on a project, problematic situations may arise, such as making change decisions in our main application. One team will want to make contextual changes to the application, which must be approved by other teams.<\/p>\n

– Charging time<\/p>\n

This can become an issue where we hate the separate micro project approach.<\/p>\n

Each micro project has its own dependencies that the user must download for the application to work properly, and this extends the loading time of the entire application as an application<\/p>\n

Of course, there are more advantages and disadvantages, I wanted to highlight only the most important ones in my opinion.<\/p>\n

\"man<\/p>\n

Here is a list of the most famous frameworks that already exist and that will make it easier when we are working on applications using the micro frontend approach.<\/p>\n