Microfront-End: Systematic Mapping

Luiz Felipe Cirqueira dos Santos

1 a

, Marcus Vinicius Santana Silva

1 b

Shexmo Richarlison Ribeiro dos Santos

1 c

, F

abio Gomes Rocha

1 d

and Elisrenan Barbosa da Silva

2 e

Postgraduate Program in Computer Science - PROCC/UFS, Federal University of Sergipe,

Av. Mal. C

andido Rondon, Rosa Elze, 1861, S

ao Crist

ao, Brazil

Computer, Est

acio University Center of Sergipe, R. Teixeira de Freitas, Salgado Filho, 10, Aracaju, Brazil

luizfelipecirqueira@outlook.com, {marcus.vinicius.3007, Shexmor, gomesrocha, elisrenan}@gmail.com

Keywords:

Microfrontend, Micro Front-End, Micro-Frontend.

Abstract:

In the context of backend development, adopting microservices has brought new challenges to frontend in-

tegration, leading to the development of microfrontends. Monolithic frontends go against the principles of

microservices specialization, requiring a more modular approach. This study aims to characterize the adop-

tion of micro frontends within microservices. To achieve this, a systematic mapping was conducted across

six databases, selecting 32 articles that identiﬁed 11 tools for managing applications with micro frontends.

The study discusses the increase in complexity and the contexts and conditions for applying micro frontend

implementation models. As a contribution, this study outlines the main paths for adopting micro frontends

within a microservices architecture, providing valuable insights for software engineering and promoting better

integration between the backend and front end. Additionally, it describes the characteristics of micro frontends

and the advantages and disadvantages of their adoption, highlighting security concerns, their impact on team

collaboration, and how they may affect the organizational structure and team development processes.

1 INTRODUCTION

Developing the presentation layer of a modern web

application has become a crucial task for industrial

companies. Development teams constantly seek new

ways to build, deploy, and maintain applications ef-

fectively so that companies can deliver value quickly

and efﬁciently to their customers (Peltonen et al.,

2021). Modern applications are built with feature-

rich and powerful frontends. The more functionali-

ties there are, the harder it becomes to maintain the

front end, signiﬁcantly when different teams develop

it (Taibi and Mezzalira, 2022).

New frontend frameworks are continuously intro-

duced to the market, providing developers with many

valid options to build robust and feature-rich web ap-

plications, such as Single Page Applications (SPA),

Server-Side Rendering (SSR) applications, or static

HyperText Markup Language (HTML) ﬁles com-

https://orcid.org/0000-0003-4538-5410

https://orcid.org/0009-0000-9211-5259

https://orcid.org/0000-0003-0287-8055

https://orcid.org/0000-0002-0512-5406

https://orcid.org/0000-0001-8890-9718

bined with a web page. However, most of them end up

being monolithic. Therefore, the application’s client-

side grows, making its development challenging, es-

pecially when teams need to edit the same frontend

application (Peltonen et al., 2021).

Micro frontends were introduced in 2016 to solve

this problem. Micro frontends allow the front end to

be broken down into individual and semi-independent

micro-applications, separating the front end’s busi-

ness logic and creating independent services that in-

teract with each other (Taibi and Mezzalira, 2022).

Micro frontends share microservices’ main prin-

ciples, beneﬁts, and challenges (Geers, 2020): both

are modeled around business domains, hiding imple-

mentation details from each other. Each team should

own its microservice (backend) and the related fron-

tend, enabling decentralized decision-making and in-

dependent deployment. However, micro frontends

also introduce some disadvantages, such as the risk

of communication overhead if the system is not well-

designed and reviewed as the business grows, poten-

tial performance issues when project vendors are not

carefully considered (e.g., for SPA), and the compro-

mise of the user experience when the governance be-

Santos, L., Silva, M., Santos, S., Rocha, F. and Barbosa da Silva, E.

Microfront-End: Systematic Mapping.

DOI: 10.5220/0013015400003825

Paper published under CC license (CC BY-NC-ND 4.0)

In Proceedings of the 20th International Conference on Web Information Systems and Technologies (WEBIST 2024), pages 119-130

ISBN: 978-989-758-718-4; ISSN: 2184-3252

119

hind a design system is not well thought out (Peltonen

et al., 2021).

This study focuses on conducting a systematic lit-

erature mapping to provide answers on the character-

ization of micro frontends, their positives and nega-

tives, and the paths followed in current research by

analyzing the entire population of articles in the cho-

sen databases that address micro frontends. The rest

of this paper is structured as follows. Section 2 pro-

vides the context for this work, discussing microser-

vices, frontends, and micro frontends and offering a

comparison. Section 3 discusses related work on mi-

cro frontends. Section 4 addresses the methodology

employed in this paper. Section 5 describes and pro-

vides the results, and Section 6 discusses the proposed

questions. Section 7 contains the ﬁnal considerations.

2 THEORETICAL FRAMEWORK

In recent years, microservices have gradually become

a trend in software architecture design. Microservices

are generally considered a collection of independent

services, each being an independent process that fo-

cuses on a single responsibility and functionality, de-

coupling dependencies between services. This idea of

division was transferred to the front, but it requires a

different understanding and application (Wang et al.,

2020).

Having a well-deﬁned architecture to maintain

scalability and organization in the application is unde-

niable, aiming to achieve development efﬁciency and

technological heterogeneity. One of the most com-

monly used forms of architecture is monolithic ar-

chitecture. However, the difﬁculty of scalability and

code reuse is evident due to the high coupling be-

tween its parts (Perlin et al., 2023).

With the awareness of these scalability and

reuse impediments, the need arises to adopt service-

oriented applications. Microservices have been

widely adopted to address the complexity of mono-

lithic systems in the backend due to their modularity

and independence (Perlin et al., 2023).

Micro frontends extend the concepts of Microser-

vices to the frontend side of the application. This

transforms monolithic web applications from a single

codebase architecture into an application that com-

bines multiple small frontend applications into one.

These independent applications can be executed, de-

veloped, and deployed independently. The ability for

independent development and deployment allows de-

velopment teams to build isolated, loosely coupled

services. The idea behind micro frontends is to treat a

web application as a combination of functionalities or

business subdomains. Each team should handle only

one domain (Peltonen et al., 2021).

Frontend monoliths introduce horizontal layers on

the frontend side of the application, but micro fron-

tends aim to divide the application vertically. Each

vertical slice is built entirely from scratch and serves

a speciﬁc business domain or functionality. Each de-

velopment team can be technologically agnostic with

micro frontends and decide what technology stack to

use. Teams can update or change the stack without

coordinating with other teams (Peltonen et al., 2021).

3 RELATED WORK

As mentioned, this study aims to characterize micro

frontends, their strengths and weaknesses, and the

current research paths. In the work of Taibi and Mez-

zalira (Taibi and Mezzalira, 2022), it is reported that

micro frontends emerged from the evolution of soft-

ware architectures and shared the fundamental princi-

ples, beneﬁts, and problems of microservices. They

are modeled around business domains, hiding imple-

mentation details between them, and each team has its

backend and related frontend service, bringing decen-

tralization of decisions and independent deployment.

In their work, Bian, Ma, Zou, and Yue (Bian

et al., 2022) report that systems are becoming in-

creasingly complex and that extensive web frontend

projects must be completed with more than one de-

velopment team. They introduce a concept similar

to microservices in web applications, which can help

traditional monolithic web applications overcome the

existing dilemmas associated with monolithic appli-

cations.

Mannisto, Tuovinen, and Raatikainen (M

annist

et al., 2023) present the experiences of a small team

from the company Visma in transforming its mono-

lithic User Interface (UI) into a micro-frontend solu-

tion. They discuss the motivations and their essential

design and implementation decisions, including an ar-

chitectural assessment. The main conclusions are that

(1) the motivations for micro frontends are related

to improving customer-speciﬁc reconﬁgurability and

reducing associated costs rather than enabling team

independence, (2) the APIs (Application Program-

ming Interfaces) provided by web standards—and the

Web Component API based on them—offered a com-

petitive alternative to JavaScript frameworks, avoid-

ing many issues induced by the frameworks, and (3)

small organizations without a large number of re-

source teams can beneﬁt from micro-frontend archi-

tectures.

In summary, these works help outline the objec-

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

120

tives of the study, such as the characterization of mi-

cro frontends, their strengths and weaknesses, and the

current research paths, providing theoretical and em-

pirical foundations that contextualize the evolution,

beneﬁts, and challenges of micro frontends, essential

for the systematic analysis. They help identify com-

mon motivations for adopting micro frontends, such

as decentralization, team independence, and improve-

ments in conﬁgurability and cost. They also point out

speciﬁc challenges and practical solutions, enriching

the analysis and conclusions of the systematic map-

ping study on micro frontends.

4 METHODOLOGY

This article aimed to characterize, in a structured

manner, from a broad perspective, micro frontends.

To this end, a systematic mapping was chosen as

the research instrument. A systematic mapping is a

comprehensive and rigorous review of a ﬁeld or re-

search topic, allowing for a broad view of the paths

taken and their respective gaps (Vel

asquez-Dur

an and

Ram

ırez Montoya, 2018) (Keele et al., 2007). The

systematic mapping presented in this article follows

the guidelines of Kitchenham and Charters [34] and

is divided into three phases: planning, execution, and,

ﬁnally, the communication of results. Thus, we ﬁrst

deﬁned the topic to be researched. Next, we de-

tailed the methodology applied and the selection of

databases where the articles were searched. We pre-

pared the questions to be answered by this study and

the search string related to the topic, all using a tool

called Parsifal.

To ensure the transparency and reproducibility of

the study, we followed a detailed protocol for classify-

ing the articles. This protocol included the following

steps:

• Deﬁnition of Inclusion and Exclusion Criteria

• Article selection

• Classiﬁcation and Analysis of Articles

• Deﬁnition of research questions

• Number of publications per year

Articles that deal, even partially, with micro frontends

were included in deﬁning the inclusion criteria. As for

the exclusion criteria, we removed duplicate articles,

those published as abstracts or expanded summaries,

articles not written in English, articles not discussing

micro frontends, and secondary studies, as shown in

Table 1.

We performed a search using the terms ”mi-

crofrontend” OR ”micro front-end” OR ”micro-

frontend”, without time restrictions, in the ACM,

Table 1: Criteria.

Inclusion Articles that deal, even partially, with micro frontends

Exclusion

Duplicate article

Article published as an abstract or expanded summary

Articles that are not written in English

Articles that do not discuss micro frontends

Secondary study

IEEE, ISI Web of Science, Science Direct, Scopus,

and Springer Link databases on April 3, 2024. The se-

lected databases are hybrid, being both search engines

and bibliometric databases, widely adopted in studies,

as they ensure good coverage for systematic reviews,

according to (Kitchenham and Brereton, 2013). We

identiﬁed 107 relevant articles that addressed, even

partially, the concept of micro frontends.

After removing duplicates and applying inclusion

and exclusion criteria, 25 duplicate articles were elim-

inated, resulting in 82 articles for veriﬁcation. Of

these, 32 were considered relevant, as they dealt with

micro frontends in their title and abstract for the study.

At the same time, the remaining 50 were excluded for

not meeting the established criteria, as shown in Fig-

ure 1. Within the stages of this study, we read the ar-

ticles that met the inclusion and exclusion criteria to

ﬁnd answers to the questions, using structured ques-

tions that can guide future research sequences and

evaluate the research process (Kitchenham and Brere-

ton, 2013), described in Table 2.

Figure 2 illustrates the annual increase in the num-

ber of articles on micro frontends, reﬂecting this ap-

proach’s growing interest and adoption. These publi-

cation trends provide insights into the evolution and

maturity of micro frontends practices, highlighting

the development of academic and practical interest in

this topic. This information is essential as it allows

for identifying research trends, measuring the growth

of the adoption of this technology, and understand-

ing periods of signiﬁcant development and innova-

tion. Furthermore, it helps recognize the increasing

relevance of micro frontends in the developer and re-

searcher communities, providing a foundation for fu-

ture investigations and improvements in the ﬁeld.

5 RESULTS

This section presents the results of our systematic

mapping on micro frontends. Each research ques-

tion was thoroughly examined to extract signiﬁcant

insights into this architecture’s beneﬁts, challenges,

and trends. We divided our ﬁndings into subthemes

to facilitate understanding and visualization of the in-

formation. In each subtheme, we will present the an-

swers to the speciﬁc questions.

Microfront-End: Systematic Mapping

121

Table 2: Research Questions and Justiﬁcations.

Question

Number

Question Text Justiﬁcation

Q1 Where are micro frontends being applied?

What are the conditioning factors for the adop-

tion of micro frontends?

Identify patterns and factors that drive or hinder

adoption.

Q2 Which frameworks are most adopted using mi-

cro frontends?

Standardize development and ﬁnd active sup-

port.

Q3 How are micro frontends being tested, and what

are the best practices to ensure software qual-

ity?

Ensure software quality and avoid problems.

Q4 How are micro frontends built, integrated, and

delivered to end-users?

Optimize processes and improve efﬁciency.

Q5 What are the positive aspects of adopting micro

frontends?

Demonstrate added value to stakeholders.

Q6 What are the negative aspects of adopting micro

frontends?

Anticipate challenges and mitigate risks.

Q7 How do micro frontends impact collaboration

between teams within an organization?

Understand the inﬂuence on team dynamics and

efﬁciency.

Q8 What speciﬁc security challenges are associated

with micro frontend architecture?

Ensure data protection and system integrity.

Q9 What tools exist to manage applications with

micro frontends when there is an increase in

their complexity?

Manage complexity and maintain efﬁciency.

Q10 How does introducing micro frontends affect

a team’s organizational structure and develop-

ment processes?

Adjust organization and processes to the new

approach.

Q11 What kinds of results were obtained? Measure success and identify improvements.

Q12 What types of validation were performed? Ensure effective implementations and compli-

ance with requirements.

Figure 1: Selection of The Articles.

Figure 2: Articles of Year.

5.1 RQ1. Where Are Micro Frontends

Being Applied? What Are the

Conditioning Factors for Adopting

Micro Frontends?

Micro frontends are applied in a variety of con-

texts, such as the development of complex web ap-

plications (Peltonen et al., 2021) (Taibi and Mezza-

lira, 2022), system architecture engineering (Sch

affer

et al., 2019), integration with advanced technologies

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

122

(Sim

oes et al., 2023), and companies with distributed

teams (M

annist

o et al., 2023). In large-scale projects,

such as site portals and enterprise systems (Bian et al.,

2022) (Zhang et al., 2023), micro frontends facili-

tate the integration of various subsystems. In con-

trast, modular systems, such as industrial installations

(Lorenz et al., 2021), offer ﬂexibility and adaptability.

The ability to handle distributed development teams

(Perlin et al., 2023) and the need to integrate emerging

technologies, such as Web 3D (Sim

oes et al., 2023),

also drive the adoption of micro frontends.

Factors inﬂuencing the adoption of micro fron-

tends include frontend complexity (Taibi and Mezza-

lira, 2022), the need for agile and independent devel-

opment (M

annist

o et al., 2023), demand for ﬂexibil-

ity and scalability (Taibi and Mezzalira, 2022), de-

coupling and reuse of components (Sch

affer et al.,

2019) (Tosic et al., 2023), independence in updates

(Knecht et al., 2020), reduction of maintenance costs,

and availability for organizational changes (Taibi and

Mezzalira, 2022). The modularity provided by mi-

cro frontends allows for handling the increasing com-

plexity of user interfaces (Taibi and Mezzalira, 2022),

while independent development capabilities simplify

the development process (Sch

affer et al., 2019). Flex-

ibility in technology choice and component reuse con-

tribute to a more scalable and efﬁcient architecture

annist

o et al., 2023) (Zhang et al., 2023).

5.2 RQ2. What Are the Most Adopted

Frameworks for the Adoption of

Micro Frontends?

Based on the mapped articles, as shown in Table 3, we

identiﬁed that micro frontends are implemented using

a variety of frameworks and approaches, with Angu-

lar, four articles (Peltonen et al., 2021) (Perlin et al.,

2023) (Pavlenko et al., 2020) (Yang et al., 2019), Re-

act, four articles (Peltonen et al., 2021) (Perlin et al.,

2023) (Sch

affer et al., 2019) (Pavlenko et al., 2020),

and Vue.js, ﬁve articles (Peltonen et al., 2021) (Wang

et al., 2020) (Perlin et al., 2023) (Bian et al., 2022)

(Pavlenko et al., 2020) standing out for their versa-

tility and robustness in building dynamic interfaces.

Tools such as Webpack 5 with Module Federation

annist

o et al., 2023) (Pavlenko et al., 2020) (Petcu

et al., 2023) facilitate dynamic module integration,

while Single-SPA (M

annist

o et al., 2023) (Pavlenko

et al., 2020) (Petcu et al., 2023) allows combining mi-

cro frontends from different frameworks into a single

application. Other alternatives include using Luigi,

Application Shell [2], and methods such as iFrames,

two articles (Taibi and Mezzalira, 2022) (P

oskei and

Bub, 2021), and ESI (Edge Side Includes) (Taibi and

Mezzalira, 2022) for micro frontend integration, each

adapted to the speciﬁc needs and preferences of the

project.

Table 3: Frameworks and Approaches for Implementing

Micro Frontends.

Framework / Approach Number of Articles

Angular 4

React 4

Vue.js 5

Webpack 5 with Module Federation 3

Single-SPA 3

Luigi 2

Application Shell 1

iFrames 2

ESI (Edge Side Includes) 1

5.3 RQ3. How Are Micro Frontends

Being Tested, and What Are the

Best Practices to Ensure Software

Quality?

The analyzed articles show that micro frontends are

tested independently and collectively using unit, in-

tegration, and end-to-end (E2E) tests (Mena et al.,

2019) (Sch

affer et al., 2019) (Zhang et al., 2023).

Using tools such as Jest and Mocha, unit tests ver-

ify isolated components, while integration tests en-

sure the joint functionality of micro frontends (Mena

et al., 2019) (de Oliveira et al., 2022). E2E tests,

using Cypress and Selenium, ensure that the entire

application works correctly (Sch

affer et al., 2019)

(Zhang et al., 2023) (B

uhler et al., 2022). To main-

tain software quality, practices such as test automa-

tion and CI/CD (Continuous Integration/Continuous

Deployment) pipelines are essential, allowing for the

automatic and continuous execution of tests (Yang

et al., 2019) (Tilak et al., 2020). Technologies like

Docker, NGINX, and Node.js simulate production en-

vironments, ensuring the correct functionality of mi-

cro frontends (Sim

oes et al., 2023) (Noppadol and

Limpiyakorn, 2021).

5.4 RQ4. How Are Micro Frontends

Built, Integrated, and Delivered to

End Users?

After analyzing the articles, we found that the con-

struction, integration, and deployment of micro fron-

tends to end users are carried out independently by

each team, using tools such as Webpack and Mod-

ule Federation (B

uhler et al., 2022), as well as tech-

nologies like Docker and NGINX for container host-

Microfront-End: Systematic Mapping

123

ing and routing (Yang et al., 2019). Component inte-

gration is achieved through an application shell archi-

tecture or iframes (Sim

oes et al., 2023), allowing for

dynamic and modular composition of the user inter-

face. CI/CD pipelines facilitate deployment (Sch

affer

et al., 2019) and may involve hosting on proprietary

servers, cloud services such as Amazon Web Services

(AWS), and Content Delivery Networks (CDNs), en-

suring continuous and efﬁcient updates (Sim

oes et al.,

2023).

5.5 RQ5. What Are the Positive Aspects

of Adopting Micro Frontends?

Several positive aspects have been identiﬁed in the

adoption of micro frontends. These beneﬁts include

modularity, component reuse, increased software de-

velopment, and maintenance efﬁciency. Technologi-

cal independence allows teams to use different tech-

nology stacks without compromising integration, fa-

cilitating both scalability and customization of the ap-

plication. Additionally, code isolation prevents er-

rors in one component from affecting the rest of

the application, promoting greater resilience (Pelto-

nen et al., 2021) (Taibi and Mezzalira, 2022) (Geers,

2020) (Wang et al., 2020) (Perlin et al., 2023) (Bian

et al., 2022) (M

annist

o et al., 2023) (Vel

asquez-Dur

and Ram

ırez Montoya, 2018) (Mohammed et al.,

2022) (Sorgalla et al., 2021) (Knecht et al., 2020)

(Mena et al., 2019) (de Oliveira et al., 2022) (Sch

affer

et al., 2019) (Sim

oes et al., 2023) (Pavlenko et al.,

2020) (Petcu et al., 2023) (Yang et al., 2019) (Tosic

et al., 2023) (Wanjala, 2022) (Capdepon et al., 2023)

oskei and Bub, 2021) (Zhang et al., 2023) (Lorenz

et al., 2021) (B

uhler et al., 2022) (Tilak et al., 2020)

(Noppadol and Limpiyakorn, 2021) (Zhao et al.,

2023) (Nishizu and Kamina, 2022) (Shakil and Zoitl,

2020) (Stefanovska and Trajkovik, 2022).

The modular approach facilitates team collabora-

tion, system scalability, and incremental improvement

implementation (de Oliveira et al., 2022). Adopt-

ing micro frontends also improves performance and

user experience, especially in high-demand scenarios

(de Oliveira et al., 2022) (B

uhler et al., 2022).

5.6 RQ6. What Are the Negative

Aspects of Adopting Micro

Frontends?

The articles indicate that adopting micro frontends

increases the complexity of applications, requiring

careful coordination in integration, routing, and com-

munication between micro frontends, leading to de-

velopment overhead and performance issues. Man-

aging shared state and UI consistency is also chal-

lenging (Peltonen et al., 2021) (Taibi and Mezza-

lira, 2022) (Geers, 2020) (Wang et al., 2020) (Perlin

et al., 2023) (Bian et al., 2022) (M

annist

o et al., 2023)

(Vel

asquez-Dur

an and Ram

ırez Montoya, 2018) (Mo-

hammed et al., 2022) (Sorgalla et al., 2021) (Knecht

et al., 2020) (Mena et al., 2019) (de Oliveira et al.,

2022) (Sch

affer et al., 2019) (Sim

oes et al., 2023)

(Pavlenko et al., 2020) (Petcu et al., 2023) (Yang

et al., 2019) (Tosic et al., 2023) (Wanjala, 2022)

(Capdepon et al., 2023) (P

oskei and Bub, 2021)

(Zhang et al., 2023) (Lorenz et al., 2021) (B

uhler

et al., 2022) (Tilak et al., 2020) (Noppadol and

Limpiyakorn, 2021) (Zhao et al., 2023) (Nishizu and

Kamina, 2022) (Shakil and Zoitl, 2020) (Stefanovska

and Trajkovik, 2022).

Other challenges include the initial investments in

setting up architecture and CI/CD pipelines, ensur-

ing security in a distributed architecture, and man-

aging dependencies and style conﬂicts. The ad-

ditional complexity may not offset the beneﬁts for

smaller projects, making the approach less advanta-

geous (Taibi and Mezzalira, 2022) (Mohammed et al.,

2022).

5.7 RQ7. How Do Micro Frontends

Impact Collaboration Between

Teams Within an Organization?

Micro frontends signiﬁcantly impact team collabora-

tion, promoting independence and autonomy by al-

lowing each team to develop and maintain its part of

the frontend with their technology choices (Knecht

et al., 2020) (Sch

affer et al., 2019) (Pavlenko et al.,

2020) (B

uhler et al., 2022) (Zhao et al., 2023). This

increases efﬁciency, development speed, and team ac-

countability, enhancing engagement (Knecht et al.,

2020) (Sch

affer et al., 2019) (Pavlenko et al., 2020)

uhler et al., 2022). However, this approach also

presents challenges, such as effective coordination

and communication between teams to ensure smooth

integration of micro frontends (Knecht et al., 2020)

(Sch

affer et al., 2019) (Zhao et al., 2023). Fragment-

ing the monolith into microprojects requires clear

team subdivision, which can be complex (Knecht

et al., 2020) (Sch

affer et al., 2019). Additionally, the

initial effort needed to set up architecture and CI/CD

pipelines may affect development efﬁciency and clar-

ity of responsibilities (Knecht et al., 2020) (Sch

affer

et al., 2019).

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

124

5.8 RQ8. What Are the Speciﬁc

Security Challenges Associated with

Micro Frontend Architecture?

Speciﬁc security challenges associated with mi-

crofrontend architecture, as found in the research, in-

clude managing permissions and access, protecting

against code injection attacks (such as XSS, Cross-

Site Scripting), and ensuring security in communica-

tions between micro frontends (Pavlenko et al., 2020).

Each micro frontend needs to ensure proper authenti-

cation and authorization, which can be complex due

to the distributed nature of the architecture (Perlin

et al., 2023). Additionally, protection against CSRF

(Cross-Site Request Forgery) attacks and the integrity

of communication interfaces are essential to prevent

data leaks (Pavlenko et al., 2020).

Another signiﬁcant challenge is managing depen-

dencies between projects, as different micro frontends

may use different versions of the same libraries, in-

creasing the attack surface and the potential for se-

curity ﬂaws. The additional complexity of manag-

ing multiple distributed vulnerability points requires

ongoing monitoring, updating, and protecting each

component individually while maintaining overall ap-

plication security (M

annist

o et al., 2023) (Pavlenko

et al., 2020).

5.9 RQ9. What Tools Exist to Manage

Applications with Micro Frontends

as Their Complexity Increases?

As seen in Table 4, to manage the complexity of

applications with micro frontends, several tools are

used, such as Webpack 5 with Module Federation

for module sharing (M

annist

o et al., 2023) (Pavlenko

et al., 2020) (Petcu et al., 2023), and frameworks

like Single-SPA and Luigi (M

annist

o et al., 2023)

(Pavlenko et al., 2020) (Petcu et al., 2023) that fa-

cilitate micro frontend integration. Automation and

CI/CD tools such as Jenkins, GitLab CI/CD, and

Docker and Kubernetes for containers and orchestra-

tion are also essential (Sch

affer et al., 2019). NGINX

is used for

Routing and load balancing, while Node.js with

Express and Socket.IO (Sch

affer et al., 2019) supports

web servers and real-time communication. Monitor-

ing and tracking tools like New Relic, Datadog, and

Sentry help with performance analysis and error man-

agement.

Table 4: Tools for Managing the Complexity of Applica-

tions with Micro Frontends.

Tool Number of Articles

Webpack 5 with Module Federation 3

Single-SPA 2

Luigi 2

Automation and CI/CD Tools

(Jenkins, GitLab CI/CD) 1

Docker 1

Kubernetes 1

NGINX 1

Node.js with Express 1

Socket.IO 1

Monitoring and

Tracking Tools (New Relic, Datadog, Sentry) 1

5.10 RQ10. How Does the Introduction

of Micro Frontends Affect the

Organizational Structure and

Development Processes of a Team?

Introducing micro frontends affects the organizational

structure and development processes by promoting

team autonomy and independence. Teams can be re-

sponsible for speciﬁc system parts, facilitating a more

agile and iterative approach (Peltonen et al., 2021)

(Taibi and Mezzalira, 2022) (Geers, 2020). This

also allows for greater ﬂexibility and a more gran-

ular division of labor, with each team fully own-

ing its business domain (Wang et al., 2020) (Per-

lin et al., 2023) (Bian et al., 2022). As a result,

there is a reduction in code conﬂicts and an in-

crease in responsiveness to customer needs (M

annist

et al., 2023) (Vel

asquez-Dur

an and Ram

ırez Montoya,

2018). However, this shift can also bring challenges,

such as learning new technologies, greater coordina-

tion between teams, and managing dependencies and

complex integrations (Mohammed et al., 2022) (Sor-

galla et al., 2021) (Knecht et al., 2020). Addition-

ally, a signiﬁcant initial effort may be required to set

up architecture, CI/CD pipelines, and continuous in-

tegration processes (Mena et al., 2019) (de Oliveira

et al., 2022). Overall, this approach encourages a

component-oriented mindset and promotes collabora-

tion among different functional areas of the organiza-

tion (Sch

affer et al., 2019) (Sim

oes et al., 2023).

5.11 RQ11. What Type of Results Were

Obtained?

Based on the articles reviewed during the research,

the results obtained were diverse, as shown in Ta-

ble 5. Most results (14) consisted of speciﬁc solu-

tions, prototypes, responses, or judgments (Taibi and

Mezzalira, 2022) (Perlin et al., 2023) (Bian et al.,

2022) (Mohammed et al., 2022) (Sorgalla et al., 2021)

Microfront-End: Systematic Mapping

125

(Sim

oes et al., 2023) (Pavlenko et al., 2020) (Yang

et al., 2019) (Tosic et al., 2023) (Wanjala, 2022) (Nop-

padol and Limpiyakorn, 2021) (Zhao et al., 2023)

(Nishizu and Kamina, 2022) (Shakil and Zoitl, 2020).

Analytical models (8) (Peltonen et al., 2021) (Wang

et al., 2020) (Sorgalla et al., 2021) (Sim

oes et al.,

2023) (Pavlenko et al., 2020) (Yang et al., 2019)

(Tosic et al., 2023) (P

oskei and Bub, 2021) and re-

ports (8) (Peltonen et al., 2021) (Wang et al., 2020)

(Sorgalla et al., 2021) (Sch

affer et al., 2019) (Petcu

et al., 2023) (Yang et al., 2019) (Tosic et al., 2023)

oskei and Bub, 2021) followed as the most com-

mon types of results. Additionally, qualitative or de-

scriptive models (5) (M

annist

o et al., 2023) (Sorgalla

et al., 2021) (Mena et al., 2019) (de Oliveira et al.,

2022) (Lorenz et al., 2021), procedures or techniques

(4) (Perlin et al., 2023) (Mena et al., 2019) (B

uhler

et al., 2022) (Tilak et al., 2020), empirical models (2)

(Sorgalla et al., 2021) (Sch

affer et al., 2019), and tools

or notations (2) (Peltonen et al., 2021) (Yang et al.,

2019) were identiﬁed. These data indicate a predom-

inance of practical and applicable solutions, accom-

panied by various analytical and descriptive models,

reﬂecting the diversity of approaches and results in

the literature on micro frontends.

Table 5: Types of Results Obtained in Research on Micro

Frontends.

Type of Result Number of Articles

Speciﬁc solutions, prototypes,

responses or judgments 14

Analytical models 8

Reports 8

Qualitative or descriptive models 5

Procedures or techniques 4

Empirical models 2

Tools or notations 2

5.12 RQ12. What Validation Methods

Are Most Commonly Used in

Micro Frontend Studies?

As seen in Table 6, the data on the types of val-

idation used in the articles indicate that evaluation

was the most common method, appearing in 8 oc-

currences (Taibi and Mezzalira, 2022) (Perlin et al.,

2023) (Bian et al., 2022) (M

annist

o et al., 2023) (Mo-

hammed et al., 2022) (Sorgalla et al., 2021) (Knecht

et al., 2020) (Mena et al., 2019). Next is the combi-

nation of analysis, evaluation, and Experience, used

in 5 occurrences (Mohammed et al., 2022) (Sorgalla

et al., 2021) (Knecht et al., 2020) (Mena et al., 2019)

(de Oliveira et al., 2022). Validation through exam-

ples combined with experiences was used in 7 oc-

currences (Peltonen et al., 2021)(Perlin et al., 2023)

(Sch

affer et al., 2019) (Sim

oes et al., 2023) (Pavlenko

et al., 2020) (Petcu et al., 2023) (Yang et al., 2019).

Additionally, analysis and evaluation were used in 4

occurrences (M

annist

o et al., 2023) (Sorgalla et al.,

2021) (Knecht et al., 2020) (Sim

oes et al., 2023)

and isolated analysis, which also appeared in 4 oc-

currences (Sch

affer et al., 2019) (Tosic et al., 2023)

(Wanjala, 2022) (Capdepon et al., 2023). Evalua-

tion combined with Experience was used in 2 occur-

rences (Perlin et al., 2023) (Bian et al., 2022) and

isolated Experience, which also appeared in 2 occur-

rences (de Oliveira et al., 2022) (Capdepon et al.,

2023). There was also one occurrence of validation

that included an extensive combination of analysis,

evident assertion, evaluation, Experience, and persua-

sion (Mena et al., 2019). Finally, combining analysis

with examples was used in 3 occurrences [(Sch

affer

et al., 2019) (Sim

oes et al., 2023) (Wanjala, 2022).

These data show that validation in micro front-end

studies generally involves a mix of practical evalua-

tions and empirical examples, reﬂecting a robust and

varied approach to verifying proposed solutions.

Table 6: Types of Validation Used in Articles on Micro

Frontends.

Type of Validation Number of

Occurrences

Evaluation 8

Combination of Analysis, Evaluation

and Experience 5

Examples combined with Experiences 7

Analysis and Evaluation 4

Isolated Analysis 4

Evaluation combined with Experience 2

Isolated Experience 2

Extensive Combination (Analysis, Assertion,

Evaluation, Experience and Persuasion) 1

Analysis combined with Examples 3

6 DISCUSSION

The results obtained from the systematic mapping on

micro frontends have several signiﬁcant implications

for both academia and Software Engineering profes-

sionals. For academia, the insights extracted from the

analyzed articles reveal emerging trends and current

challenges, guiding future research and contributing

to the theoretical evolution of micro frontend archi-

tecture. Identifying beneﬁts, such as modularity and

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

126

technological independence, and challenges, such as

integration complexity and security, provides a solid

foundation for in-depth studies that can result in new

solutions and advancements in the ﬁeld. The ﬁnd-

ings offer practical guidance for practitioners on ap-

plying and adopting frameworks and best practices

for testing and delivering micro frontends. Knowl-

edge about management tools, the impacts on organi-

zational structure, and strategies to overcome speciﬁc

security challenges are valuable, enabling a more in-

formed and efﬁcient adoption of this architecture.

Through our systematic mapping, we discovered

that micro frontends offer a promising approach to

web development despite challenges such as integra-

tion complexity. Table 7 presents the implications of

the systematic mapping results in a clear and concise

table containing a synthesized discussion summariz-

ing the essential ﬁndings about micro frontends.

Thus, the ﬁndings, organised into seven cate-

gories, can be highlighted as follows: Tools and

frameworks emerge as central themes, highlighting

their importance in implementing micro frontends.

However, aspects related to quality and security still

require further investigation and the development of

more robust solutions. Signiﬁcant gaps are evident,

especially in integrating quality assurance tools spe-

ciﬁc to modular architectures. The inherent com-

plexity of distributed testing, which involves multiple

modules developed autonomously, demands a more

efﬁcient and automated approach capable of dealing

with the peculiarities of this architecture.

Furthermore, there is a pressing need for more re-

search on strategies for migrating legacy systems to

micro frontends, a common challenge in companies

with large monoliths that are considering this modu-

lar approach. Clear guidelines for this transition could

pave the way for the widespread adoption of the archi-

tecture. Future research should concentrate on devel-

oping methodologies that facilitate this migration and

minimise the associated risks and costs.

Moreover, there is yet to be a deep understanding

of the long-term impact of adopting micro frontends

on companies’ organisational structures. The modu-

larisation of interfaces and the autonomy of develop-

ment teams can profoundly transform how teams or-

ganise and collaborate. Studying this dynamic and the

possible beneﬁts of productivity and organisational

efﬁciency constitutes a signiﬁcant research gap.Thus,

the ﬁndings, organised into seven categories, can be

highlighted as follows Tools and frameworks emerge

as central themes, highlighting their importance in

implementing micro frontends. However, aspects re-

lated to quality and security still require further in-

vestigation and the development of more robust solu-

tions. Signiﬁcant gaps are evident, especially in in-

tegrating quality assurance tools speciﬁc to modular

architectures. The inherent complexity of distributed

testing, which involves multiple modules developed

autonomously, demands a more efﬁcient and auto-

mated approach capable of dealing with the peculiar-

ities of this architecture.

Additionally, there needs to be more studies on

strategies for migrating legacy systems to micro fron-

tends, a common challenge in companies with giant

monoliths that wish to adopt the modularity of this ap-

proach. Clear guidelines for this transition may allow

the widespread adoption of the architecture. Future

research should focus on developing methodologies

that facilitate this migration and minimize the risks

and costs associated with the process.

Moreover, there is yet to be a deep understand-

ing of the long-term impact that adopting micro fron-

tends can have on the organizational structure of com-

panies. The modularization of interfaces and the au-

tonomy of development teams can profoundly trans-

form how teams organize and collaborate. Studying

this dynamic and the possible productivity and orga-

nizational efﬁciency beneﬁts constitutes a signiﬁcant

research gap.

7 FINAL CONSIDERATIONS

The results of this mapping not only enrich the aca-

demic body of knowledge but also provide practi-

cal guidelines that can be directly applied to real-

world software development projects, promoting a

more harmonious and effective integration of micro

frontends into Software Engineering practices. How-

ever, addressing security and management concerns

and robust validation methods for successful imple-

mentation are crucial. Micro frontends represent a

substantial evolution in web development, but their

adoption requires a strategic approach for optimal re-

sults.

As software architectures evolve, micro frontends

are likely to become an essential practice in web ap-

plication development. The increasing adoption of

cloud-based architectures and the integration with mi-

croservices amplify the relevance of this approach,

enabling greater scalability and modularity. More-

over, the advancement of automation tools and De-

vOps practices can facilitate the implementation of

micro frontends, accelerating the development cycle

and ensuring more agile and continuous delivery. The

emergence of frameworks and libraries focused on

micro frontends also points to the maturation of the

technique, making it more accessible and efﬁcient for

Microfront-End: Systematic Mapping

127

Table 7: Implications and Key Findings about Micro Frontends.

Category Aspect Description

Implications for

Academia

Emerging Trends Insights from the analyzed articles reveal

emerging trends and current challenges,

guiding future research and contributing to

the theoretical evolution of micro frontend ar-

chitecture.

Beneﬁts and Challenges Identiﬁcation of beneﬁts, such as modularity

and technological independence, and chal-

lenges, such as integration complexity and

security, providing a solid foundation for in-

depth studies.

Implications for

Practitioners

Practical Application Findings provide practical guidance on appli-

cation, framework adoption, and best prac-

tices for testing and delivering micro fron-

tends.

Tools and Strategies Knowledge about management tools’ im-

pacts on organizational structure and strate-

gies for overcoming security challenges are

precious for effectively adopting this archi-

tecture.

Synthesis of

Findings

Emerging Trends Reveal the industry’s evolution and adoption

of micro frontends.

Beneﬁts Include modularity, technological indepen-

dence, and greater organizational ﬂexibility.

Challenges Include integration complexity and security

issues that must be addressed.

Practical Application Offers guidance on frameworks, testing prac-

tices, delivery, and management tools.

Organizational Impacts Include changes in organizational structure

and team dynamics.

large corporations.

Despite the beneﬁts, the future of micro fron-

tends presents signiﬁcant challenges that must be ad-

dressed. The growing complexity of managing multi-

ple parts of an application can become an obstacle,

requiring robust coordination and monitoring prac-

tices. Additionally, the lack of standardization be-

tween tools and frameworks may hinder interoper-

ability and increase adoption costs. To overcome

these challenges and broaden the scope of research,

gray literature sources could be included in future in-

vestigations, aiming to gather market-driven insights.

Although these sources were not used in this initial

mapping due to the absence of peer-reviewed rigor,

their inclusion could provide practical and valuable

insights into adopting micro frontends. Furthermore,

as new solutions emerge, such as the use of artiﬁ-

cial intelligence to automate the integration of micro

frontends, there is great potential for innovations that

could transform the development and maintenance of

web applications. Therefore, the strategic adoption of

this approach presents a promising path for the future.

In addition to practical guidelines and implemen-

tation challenges, future research must focus on the

quality of micro frontends. The diversity of frame-

works and tools can directly impact the maintain-

ability and performance of applications. Studies in-

vestigating automated testing practices, such as in-

tegration and end-to-end testing, are essential to en-

sure the robustness of applications composed of mi-

cro frontends. Additionally, performance analyses

should be conducted to identify bottlenecks and opti-

mize user experience. Code quality, dependency man-

agement, and interoperability between different com-

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

128

ponents deserve attention. A greater focus on quality

assurance methodologies adapted to this architecture

will enable development teams to implement more re-

liable and scalable solutions, maximizing the beneﬁts

of micro frontends in software projects.

REFERENCES

Bian, Y., Ma, D., Zou, Q., and Yue, W. (2022). A multi-way

access portal website construction scheme. In 2022

5th International Conference on Artiﬁcial Intelligence

and Big Data (ICAIBD), pages 589–592. IEEE.

uhler, F., Barzen, J., Harzenetter, L., Leymann, F., and

Wundrack, P. (2022). Combining the best of two

worlds: Microservices and micro frontends as basis

for a new plugin architecture. In Symposium and Sum-

mer School on Service-Oriented Computing, pages 3–

23. Springer.

Capdepon, Q., Hlad, N., Seriai, A.-D., and Derras, M.

(2023). Migration process from monolithic to micro

frontend architecture in mobile applications. In IWST.

de Oliveira, D. S. M., Oliveira, F. C., Pernencar, C. A.,

de Morais, B. S., Silva, J. W., Costa, A. R., Pereira,

J. B., and Saboia, I. F. (2022). Licor: Beyond the de-

sign system. a proposal to empower teams to develop

software in compliance with the principles of accessi-

bility, usability, and privacy by design in the extreme

contexts and challenging domains post-covid-19. In

International Conference on Human-Computer Inter-

action, pages 139–147. Springer.

Geers, M. (2020). Micro frontends in action. Simon and

Schuster.

Keele, S. et al. (2007). Guidelines for performing system-

atic literature reviews in software engineering. Tech-

nical report, Technical report, ver. 2.3 ebse technical

report. ebse.

Kitchenham, B. and Brereton, P. (2013). A systematic re-

view of systematic review process research in soft-

ware engineering. Information and software technol-

ogy, 55(12):2049–2075.

Knecht, C., Schuller, A., and Miclaus, A. (2020). Man-

ageable and scalable manufacturing it through an app

based approach. In Advances in Manufacturing, Pro-

duction Management and Process Control: Proceed-

ings of the AHFE 2019 International Conference on

Human Aspects of Advanced Manufacturing, and the

AHFE International Conference on Advanced Pro-

duction Management and Process Control, July 24-

28, 2019, Washington DC, USA 10, pages 14–26.

Springer.

Lorenz, J., Lohse, C., and Urbas, L. (2021). Microfrontends

as opportunity for process orchestration layer archi-

tecture in modular process plants. In 2021 26th IEEE

International Conference on Emerging Technologies

and Factory Automation (ETFA), pages 01–04. IEEE.

annist

o, J., Tuovinen, A.-P., and Raatikainen, M. (2023).

Experiences on a frameworkless micro-frontend ar-

chitecture in a small organization. In 2023 IEEE

20th International Conference on Software Architec-

ture Companion (ICSA-C), pages 61–67. IEEE.

Mena, M., Corral, A., Iribarne, L., and Criado, J. (2019). A

progressive web application based on microservices

combining geospatial data and the internet of things.

IEEE access, 7:104577–104590.

Mohammed, S., Fiaidhi, J., Sawyer, D., and Lamouchie, M.

(2022). Developing a graphql soap conversational mi-

cro frontends for the problem oriented medical record

(ql4pomr). In Proceedings of the 6th International

Conference on Medical and Health Informatics, pages

52–60.

Nishizu, Y. and Kamina, T. (2022). Implementing micro

frontends using signal-based web components. Jour-

nal of Information Processing, 30:505–512.

Noppadol, N. and Limpiyakorn, Y. (2021). Application of

micro-frontends to legal search engine web develop-

ment. In IT Convergence and Security: Proceedings

of ICITCS 2021, pages 165–173. Springer.

Pavlenko, A., Askarbekuly, N., Megha, S., and Mazzara,

M. (2020). Micro-frontends: application of microser-

vices to web front-ends. J. Internet Serv. Inf. Secur.,

10(2):49–66.

Peltonen, S., Mezzalira, L., and Taibi, D. (2021). Mo-

tivations, beneﬁts, and issues for adopting micro-

frontends: a multivocal literature review. Information

and Software Technology, 136:106571.

Perlin, R., Ebling, D., Maran, V., Descovi, G., and

Machado, A. (2023). An approach to follow microser-

vices principles in frontend. In 2023 IEEE 17th In-

ternational Conference on Application of Information

and Communication Technologies (AICT), pages 1–6.

IEEE.

Petcu, A., Frunzete, M., and Stoichescu, D. A. (2023). Ben-

eﬁts, challenges, and performance analysis of a scal-

able web architecture based on micro-frontends. Uni-

versity Politehnica of Bucharest, Scientiﬁc Bulletin.,

Series C, 85(3):319–334.

oskei, I. and Bub, U. (2021). Enterprise-level migra-

tion to micro frontends in a multi-vendor environment.

Acta Polytechnica Hungarica, 18(8):7–25.

Sch

affer, E., Mayr, A., Fuchs, J., Sjarov, M., Vorndran,

J., and Franke, J. (2019). Microservice-based ar-

chitecture for engineering tools enabling a collabora-

tive multi-user conﬁguration of robot-based automa-

tion solutions. Procedia CIRP, 86:86–91.

Shakil, M. and Zoitl, A. (2020). Towards a modular archi-

tecture for industrial hmis. In 2020 25th IEEE Inter-

national Conference on Emerging Technologies and

Factory Automation (ETFA), volume 1, pages 1267–

1270. IEEE.

Sim

oes, B., Del Puy Carretero, M., Martinez Santiago, J.,

noz Segovia, S., and Alcain, N. (2023). Twinark:

A uniﬁed framework for digital twins based on micro-

frontends, micro-services, and web 3d. In Proceed-

ings of the 28th International ACM Conference on 3D

Web Technology, pages 1–10.

Sorgalla, J., Wizenty, P., Rademacher, F., Sachweh, S., and

undorf, A. (2021). Applying model-driven engineer-

ing to stimulate the adoption of devops processes in

Microfront-End: Systematic Mapping

129

small and medium-sized development organizations:

the case for microservice architecture. SN Computer

Science, 2(6):459.

Stefanovska, E. and Trajkovik, V. (2022). Evaluating micro

frontend approaches for code reusability. In Interna-

tional Conference on ICT Innovations, pages 93–106.

Springer.

Taibi, D. and Mezzalira, L. (2022). Micro-frontends: Prin-

ciples, implementations, and pitfalls. ACM SIGSOFT

Software Engineering Notes, 47(4):25–29.

Tilak, P. Y., Yadav, V., Dharmendra, S. D., and Bolloju,

N. (2020). A platform for enhancing application de-

veloper productivity using microservices and micro-

frontends. In 2020 IEEE-HYDCON, pages 1–4. IEEE.

Tosic, M., Petrovic, N., and Tosic, O. (2023). Seman-

tic micro-front-end approach to enterprise knowledge

graph applications development. In WEBIST, pages

488–495.

Vel

asquez-Dur

an, A. and Ram

ırez Montoya, M. S. (2018).

Research management systems: Systematic mapping

of literature (2007-2017).

Wang, D., Yang, D., Zhou, H., Wang, Y., Hong, D.,

Dong, Q., and Song, S. (2020). A novel applica-

tion of educational management information system

based on micro frontends. Procedia Computer Sci-

ence, 176:1567–1576.

Wanjala, S. T. (2022). A framework for implementing micro

frontend architecture. International Journal of Web

Engineering and Technology, 17(4):337–352.

Yang, C., Liu, C., and Su, Z. (2019). Research and appli-

cation of micro frontends. In IOP conference series:

materials science and engineering, volume 490, page

062082. IOP Publishing.

Zhang, C., Zhang, D., Zhou, H., Wang, X., Lv, L., Zhang,

R., Xie, Y., Liu, H., Li, Y., Jia, D., et al. (2023). Appli-

cation business information interaction bus based on

micro frontend framework. In 2023 7th International

Symposium on Computer Science and Intelligent Con-

trol (ISCSIC), pages 306–310. IEEE.

Zhao, L., Kang, Y., and Wang, Y. (2023). Application of

micro front-end technology in network public opin-

ion system. In 2023 IEEE 7th Information Technology

and Mechatronics Engineering Conference (ITOEC),

volume 7, pages 227–230. IEEE.

WEBIST 2024 - 20th International Conference on Web Information Systems and Technologies

130