Questions tagged [micro-frontend]

In a micro-frontend architecture, the user interface is divided into multiple self-contained micro-applications, each responsible for a specific functionality or feature. These micro-applications can be developed using different technologies, frameworks, or programming languages, depending on the team's preferences and requirements.

One of the key benefits of micro-frontends is the ability to decouple frontend development, allowing teams to work autonomously and adopt different technologies as needed. This flexibility enables independent deployment and scalability of individual micro-applications, reducing the risk of regressions and minimizing the impact of changes.

Micro-frontends can communicate and collaborate with each other through well-defined APIs or by leveraging shared data stores or events. This allows seamless integration and coordination between different micro-applications, providing a unified and cohesive user experience.

Another advantage of micro-frontends is their potential for reusability. Teams can develop common UI components, styles, and utilities that can be shared across micro-applications, promoting consistency and reducing duplication of effort. This reusability also facilitates maintenance and updates, as changes made to shared components can be automatically propagated to all micro-applications using them.

However, implementing micro-frontends requires careful planning and consideration of various aspects such as communication protocols, data sharing mechanisms, routing, and coordination between micro-applications. It may also introduce additional complexity, as each micro-application needs to be independently developed, tested, and deployed.

Despite the challenges, micro-frontends provide an effective approach for large-scale frontend development, empowering teams to work efficiently, scale their applications, and deliver enhanced user experiences through modular, independent, and reusable components.

583 questions
38
votes
3 answers

how to embed an angular app into another app?

My team develop an angular 5 application that has been in production for a while, but we've been tasked recently with making the app work in other 3 sites the company owns. One site is a SPA built with Angular6, other is also a SPA but uses…
26
votes
2 answers

Vue.JS for a Micro Frontend approach

Our team is developing a large project and we want to build a big app with multiple forms and dashboards and features. One monolithic SPA would get complicated. So we discuss the approach of „micro frontend“ architecture. The goal is to generate a…
René
  • 261
  • 1
  • 3
  • 3
23
votes
5 answers

WP5 Module Federation: remoteEntry.js caching

With Webpack 5 module federation if remote entry is modified, you don't need to redeploy main module/application and the newest version of the module will be loaded when it's requested by the browser. I'm wondering: since the remote URL remains the…
22
votes
2 answers

What does it mean by Framework agnostic?

I am hearing this phrase for a long time. I read few articles also still I am not able to understand what does it actually mean. I always see they give some framework name. But I want to understand what it means and why it came. Can anyone help me…
Swastik
  • 499
  • 1
  • 4
  • 10
20
votes
2 answers

Webpack taking ages to load page AFTER build is complete

We're using create-react-app (with react-app-rewired) on a very large monolith. We've done some improvements to the build time (got it down to approx 20s), but after the build is complete (following a yarn start) the application takes a good 2…
WillKre
  • 6,280
  • 6
  • 32
  • 62
14
votes
0 answers

Angular PWA in microfrontends

I have several microfrontends setup using an "app-shell" sort of app for the domain root and each microfrontend on the first path element. Each app is built like a standalone angular application using shared libraries to reuse common components and…
Øystein Amundsen
  • 3,993
  • 8
  • 44
  • 63
12
votes
6 answers

Micro front end in react

Hello I am learning micro front end architecture. Consider I am working on e-commerce application where I have four verticals - Home, Account, PLP&PDP and Cart&Checkout. My understanding is that each verticals will have their views, actions,…
N Sharma
  • 33,489
  • 95
  • 256
  • 444
11
votes
2 answers

Recommended way to share components between nextjs zones?

Context: I'm building a portal with next and its multi zones feature. This allows us to have multiple NextJS applications running independently by different teams, but as a single app. The problem: I need to make sure header, navigation and footer,…
sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50
11
votes
2 answers

Several instances of 'styled-components' initialized in CRA micro-frontend application

I'm running a micro frontend application with multiple React versions, each micro frontend repo is using lazy loading for dynamically loading its React version and it works as expected (Yay!) The micro frontend app is structured as follows: That…
Shimi
  • 1,178
  • 8
  • 18
11
votes
3 answers

How to share redux store in micro frontend architecture?

I am trying to create a small project to implement micro-frontend architecture following Micro Frontends article. I am creating multiple repositories for each MFE(Micro frontend) and also using Redux for the application. I have the following…
aditya81070
  • 678
  • 1
  • 5
  • 22
11
votes
4 answers

Convenient micro frontend framework?

Which is the best approach/framework for micro frontend development? I have more than 5 apps based on angular, react and vue and want to display all 5 apps on a single UI. We have many micro frontend frameworks like single spa, piral, moisaic…
Zeeshan
  • 149
  • 1
  • 5
10
votes
0 answers

Module federation and React Context hooks

When using React useContext hooks, it currently requires an import from a component higher up in the tree to pass in the Context object. Say for example: // index.jsx export const MyContext = React.useContext('1') export function MyApp(props){ …
10
votes
1 answer

Managing user session in Micro frontend

We are planning to adopt to micro frontend, our project is in Asp.Net Core MVC, in which we want multiple apps each owned by different team, where they can develop, test, deploy independently. what I am looking for is, if each component on front end…
BreakHead
  • 10,480
  • 36
  • 112
  • 165
9
votes
2 answers

Webpack 5 module federation missing chunk when dynamically loading remote module

I am trying to split a big monolith React app into micro-frontends using webpack module federation. I already have the remote module deployed and working great when running the dev server locally, everything works perfectly fine. But after running…
9
votes
2 answers

Can I use functional component and class component together?

I am working on a project with Micro Front End architecture. There will be several Micro Front Ends and different team works with different MFE. Are there any technical difficulties to use the class component and functional component together in a…
Noor A Shuvo
  • 2,639
  • 3
  • 23
  • 48
1
2 3
38 39